diff --git a/themes/modern2/template/css (old)/ajax-loader.gif b/themes/modern2/template/css (old)/ajax-loader.gif
new file mode 100644
index 000000000..e0e6e9760
Binary files /dev/null and b/themes/modern2/template/css (old)/ajax-loader.gif differ
diff --git a/themes/modern2/template/css (old)/components/1-main/mixin.scss b/themes/modern2/template/css (old)/components/1-main/mixin.scss
new file mode 100644
index 000000000..364922671
--- /dev/null
+++ b/themes/modern2/template/css (old)/components/1-main/mixin.scss
@@ -0,0 +1,90 @@
+@mixin transition {
+ transition: all 0.2s ease-in-out 0s;
+ -moz-transition: all 0.2s ease-in-out 0s;
+}
+@mixin transition-bg {
+ transition: background 0.2s ease-in-out 0s;
+ -moz-transition: background 0.2s ease-in-out 0s;
+}
+@mixin transition-border {
+ transition: border 0.2s ease-in-out 0s;
+ -moz-transition: border 0.2s ease-in-out 0s;
+}
+@mixin fullImage {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ -o-object-fit: cover;
+}
+@mixin transformY {
+ transform: translateY(-50%);
+ -moz-ransform: translateY(-50%);
+ -o-transform: translateY(-50%);
+ -ms-transform: translateY(-50%);
+ -webkit-transform: translateY(-50%);
+}
+@mixin transformX {
+ transform: translateX(-50%);
+ -moz-ransform: translateX(-50%);
+ -o-transform: translateX(-50%);
+ -ms-transform: translateX(-50%);
+ -webkit-transform: translateX(-50%);
+}
+@mixin transform {
+ transform: translate(-50%, -50%);
+ -moz-ransform: translate(-50%, -50%);
+ -o-transform: translate(-50%, -50%);
+ -ms-transform: translate(-50%, -50%);
+ -webkit-transform: translate(-50%, -50%);
+}
+@mixin transformReset {
+ transform: translate(0, 0);
+ -moz-ransform: translate(0, 0);
+ -o-transform: translate(0, 0);
+ -ms-transform: translate(0, 0);
+ -webkit-transform: translate(0, 0);
+}
+@mixin rotate {
+ transform: rotate(90deg);
+ -webkit-transform: rotate(90deg);
+ -o-transform: rotate(90deg);
+ -ms-transform: rotate(90deg);
+ -moz-transform: rotate(90deg);
+}
+@mixin rotate180deg {
+ transform: rotate(180deg);
+ -webkit-transform: rotate(180deg);
+ -o-transform: rotate(180deg);
+ -ms-transform: rotate(180deg);
+ -moz-transform: rotate(180deg);
+}
+@mixin rotate270deg {
+ transform: rotate(270deg);
+ -webkit-transform: rotate(270deg);
+ -o-transform: rotate(270deg);
+ -ms-transform: rotate(270deg);
+ -moz-transform: rotate(270deg);
+}
+
+@mixin xxsm-xsm {
+ @media (max-width: 374px) { @content; }
+}
+@mixin xsm-sm {
+ @media (max-width: 540px) { @content; }
+}
+@mixin sm-md {
+ @media (max-width: 700px) { @content; }
+}
+@mixin md-lg {
+ @media (max-width: 768px) { @content; }
+}
+@mixin lg-xlg {
+ @media (max-width: 1024px) { @content; }
+}
+
+@mixin xlg-xxlg {
+ @media (max-width: 1400px) { @content; }
+}
+@mixin xxlg-xxxlg {
+ @media (max-width: 1640px) { @content; }
+}
\ No newline at end of file
diff --git a/themes/modern2/template/css (old)/components/1-main/nulifier.scss b/themes/modern2/template/css (old)/components/1-main/nulifier.scss
new file mode 100644
index 000000000..02c044780
--- /dev/null
+++ b/themes/modern2/template/css (old)/components/1-main/nulifier.scss
@@ -0,0 +1,102 @@
+/***
+
+====================================================================
+ Reset
+====================================================================
+
+***/
+// :root {
+// font-size: calc(1vw + 0.6em);
+// }
+* {
+ margin: 0px;
+ padding: 0px;
+ border: none;
+ outline: none;
+}
+button {
+ outline: none;
+}
+button:focus {
+ outline: none;
+}
+button:focus {
+ outline: none;
+}
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+/***
+ ====================================================================
+ Global Settings
+ ====================================================================
+ ***/
+
+body {
+ font-family: "Roboto", sans-serif;
+ font-size: 14px;
+ color: #000;
+ line-height: 1.7em;
+ font-weight: 400;
+ background: #fff;
+ -webkit-font-smoothing: antialiased;
+ -moz-font-smoothing: antialiased;
+}
+a {
+ text-decoration: none;
+ cursor: pointer;
+ color: #000;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ position: relative;
+ font-weight: normal;
+ margin: 0px;
+ background: none;
+ line-height: 1.6em;
+}
+/* Typography */
+h1 {
+ font-size: 4em;
+}
+h2 {
+ font-size: 40px;
+}
+h3 {
+ font-size: 34px;
+}
+h4 {
+ font-size: 22px;
+}
+h5 {
+ font-size: 20px;
+}
+h6 {
+ font-size: 18px;
+}
+p {
+ position: relative;
+ line-height: 1.8em;
+}
+.auto__container {
+ position: relative;
+ max-width: 1440px;
+ padding: 0px;
+ margin: 0 auto;
+}
+ul,
+li {
+ list-style: none;
+ padding: 0px;
+ margin: 0px;
+}
+.mr-top-bot {
+ margin: 80px 0;
+}
+
diff --git a/themes/modern2/template/css (old)/components/1-main/variables.scss b/themes/modern2/template/css (old)/components/1-main/variables.scss
new file mode 100644
index 000000000..52f957d0e
--- /dev/null
+++ b/themes/modern2/template/css (old)/components/1-main/variables.scss
@@ -0,0 +1,16 @@
+$main-color: #fd4c24;
+$text-light-black: #242424;
+$text-black: #000;
+$text-color-white: #ffffff;
+$text-color-grey: #a2a2a2;
+$color-grey: #b4b4b4;
+$p-size: 16px;
+$p-height: 26px;
+$h2-size: 22px;
+$h2-height: 28px;
+$h3-size: 20px;
+$h3-height: 24px;
+$h4-size: 16px;
+$h4-height: 20px;
+$h5-size: 14px;
+$h5-height: 20px;
diff --git a/themes/modern2/template/css (old)/components/2-layout/footer.scss b/themes/modern2/template/css (old)/components/2-layout/footer.scss
new file mode 100644
index 000000000..702a7c83b
--- /dev/null
+++ b/themes/modern2/template/css (old)/components/2-layout/footer.scss
@@ -0,0 +1,31 @@
+.footer {
+ background: $text-light-black;
+ padding: 30px 0;
+ &__inner {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ }
+ &__copyright {
+ font-size: $h5-size;
+ line-height: $h5-height;
+ font-weight: 400;
+ color: $text-color-white;
+ a {
+ color: $text-color-white;
+ margin-left: 10px;
+ }
+ }
+ &__social {
+ display: flex;
+ align-items: center;
+ &-link {
+ fill: $text-color-white;
+ margin: 0 10px;
+ @include transition;
+ &:hover {
+ fill: $main-color;
+ }
+ }
+ }
+}
diff --git a/themes/modern2/template/css (old)/components/2-layout/header.scss b/themes/modern2/template/css (old)/components/2-layout/header.scss
new file mode 100644
index 000000000..1fe5e3af1
--- /dev/null
+++ b/themes/modern2/template/css (old)/components/2-layout/header.scss
@@ -0,0 +1,74 @@
+.header {
+ position: relative;
+ .mobileSearch {
+ display: none;
+ }
+ &::before {
+ position: absolute;
+ content: "";
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 4px;
+ background: #00822c;
+ }
+ &__inner {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 20px 0;
+ }
+ &__logo {
+ width: 120px;
+ }
+ &__search {
+ display: flex;
+ align-items: center;
+ &-input {
+ width: 350px;
+ position: relative;
+ input {
+ width: calc(100% - 60px);
+ font-family: "roboto";
+ padding: 14px 40px 14px 20px;
+ font-size: $h4-size;
+ line-height: $h4-size;
+ color: rgba($color: $text-light-black, $alpha: 0.3);
+ border-radius: 5px;
+ border: 1px solid #c9c9c9;
+ &::placeholder {
+ font-family: "roboto";
+ font-size: $h4-size;
+ line-height: $h4-size;
+ color: rgba($color: $text-light-black, $alpha: 0.3);
+ }
+ }
+ }
+ &-btn {
+ position: absolute;
+ top: 50%;
+ right: 20px;
+ @include transformY;
+ svg {
+ width: 18px;
+ height: 18px;
+ fill: $text-light-black;
+ }
+ }
+ }
+ &__slogan {
+ font-family: "Oswald", sans-serif;
+ color: $main-color;
+ font-weight: 700;
+ font-size: 40px;
+ line-height: 40px;
+ margin-right: 20px;
+ letter-spacing: -1.5px;
+ }
+ .hamBtn {
+ display: none;
+ }
+}
+.searchModal {
+ display: none;
+}
diff --git a/themes/modern2/template/css (old)/components/2-layout/lightpick.scss b/themes/modern2/template/css (old)/components/2-layout/lightpick.scss
new file mode 100644
index 000000000..598351286
--- /dev/null
+++ b/themes/modern2/template/css (old)/components/2-layout/lightpick.scss
@@ -0,0 +1,433 @@
+// Helper Functions
+
+/// Replace `$search` with `$replace` in `$string`
+/// @author Hugo Giraudel
+/// @param {String} $string - Initial string
+/// @param {String} $search - Substring to replace
+/// @param {String} $replace ('') - New value
+/// @return {String} - Updated string
+@function lightpick-str-replace($string, $search, $replace: "") {
+ $index: str-index($string, $search);
+
+ @if $index {
+ @return str-slice($string, 1, $index - 1) + $replace +
+ lightpick-str-replace(
+ str-slice($string, $index + str-length($search)),
+ $search,
+ $replace
+ );
+ }
+
+ @return $string;
+}
+
+/// Split `$string` between the `$separator` characters
+/// @author https://stackoverflow.com/a/42295154/108816
+/// @param {String} $string - Initial string
+/// @param {String} $separator - Substring to split on
+/// @return {List} - Split string
+@function lightpick-str-split($string, $separator) {
+ $split-arr: ();
+ $index: str-index($string, $separator);
+
+ @while $index != null {
+ $item: str-slice($string, 1, $index - 1);
+
+ $split-arr: append($split-arr, $item);
+
+ $string: str-slice($string, $index + 1);
+
+ $index: str-index($string, $separator);
+ }
+
+ $split-arr: append($split-arr, $string);
+
+ @return $split-arr;
+}
+
+// SCSS Variables
+
+$lightpick-font: system-ui, Roboto, Helvetica, Arial, sans-serif !default;
+$lightpick-line-height: 1.125em !default;
+$lightpick-border-radius: 4px !default;
+$lightpick-padding: 4px !default;
+$lightpick-color: #000 !default;
+$lightpick-background-color: #fff !default;
+$lightpick-months-background-color: #eee !default;
+$lightpick-title-font-size: 16px !default;
+$lightpick-title-font-weight: normal !default;
+$lightpick-day-of-week-font-size: 11px !default;
+$lightpick-day-of-week-font-weight: bold !default;
+$lightpick-day-hover-color: #e0e0e0 !default;
+$lightpick-day-hover-background-image-color: lightpick-str-replace(
+ quote(#{$lightpick-day-hover-color}),
+ "#",
+ "%23"
+);
+$lightpick-day-hover-background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle fill='#{$lightpick-day-hover-background-image-color}' cx='16' cy='16' r='16'/%3E%3C/svg%3E") !default;
+$lightpick-day-disabled-opacity: 0.38 !default;
+$lightpick-day-previous-next-opacity: $lightpick-day-disabled-opacity !default;
+$lightpick-day-size: 40px !default;
+$lightpick-day-font-size: 13px !default;
+$lightpick-selected-date-color: #fff !default;
+$main-color: #268bd2 !default;
+$lightpick-selected-date-background-image-color: lightpick-str-replace(
+ quote(#{$main-color}),
+ "#",
+ "%23"
+);
+$lightpick-selected-date-background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle fill='#{$lightpick-selected-date-background-image-color}' cx='16' cy='16' r='16'/%3E%3C/svg%3E") !default;
+$lightpick-selected-date-font-weight: bold !default;
+$lightpick-selected-range-background-color: rgba($main-color, 0.1) !default;
+$lightpick-selected-range-hover-background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle fill='#{rgba($main-color, 0.5)}' cx='16' cy='16' r='16'/%3E%3C/svg%3E") !default;
+$lightpick-today-color: #dc322f !default;
+$lightpick-today-background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle fill='#{rgba($lightpick-today-color, .5)}' cx='16' cy='16' r='16'/%3E%3C/svg%3E") !default;
+$lightpick-tooltip-background-color: #fff !default;
+$lightpick-tooltip-padding: 4px 8px !default;
+$lightpick-tooltip-margin: -(unquote(nth(lightpick-str-split(quote(#{$lightpick-tooltip-padding}), " "), 1))) !default;
+$lightpick-tooltip-triangle-size: 4px !default;
+$lightpick-tooltip-border-color: rgba(0, 0, 0, 0.12) !default;
+$lightpick-tooltip-font-size: 11px !default;
+$lightpick-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !default;
+$lightpick-dropdown-font-size: 1em !default;
+$lightpick-dropdown-font-weight: bold !default;
+$lightpick-dropdown-disabled-color: #333 !default;
+$lightpick-action-width: 32px !default;
+$lightpick-action-height: $lightpick-action-width !default;
+$lightpick-action-background-color: #ddd !default;
+$lightpick-action-reset-background-color: #aeacad !default;
+$lightpick-action-reset-color: #fff !default;
+$lightpick-action-apply-background-color: #2495f3 !default;
+$lightpick-action-apply-color: #fff !default;
+$lightpick-action-border-radius: 5px !default;
+$lightpick-action-font-size: 12px !default;
+$lightpick-action-close-font-size: 18px !default;
+
+// Styles
+.calendar__outer {
+ width: 100%;
+ input {
+ width: 100%;
+ display: none;
+ }
+}
+.lightpick {
+ position: absolute;
+ z-index: 99999;
+ border-radius: $lightpick-border-radius;
+ // background-color: $lightpick-background-color;
+ // box-shadow: $lightpick-box-shadow;
+ color: $lightpick-color;
+ font-family: $lightpick-font;
+ line-height: $lightpick-line-height;
+ width: 100%;
+ margin-bottom: 80px;
+ &--inlined {
+ position: relative;
+ display: inline-block;
+ }
+
+ &,
+ & *,
+ &::after,
+ &::before {
+ box-sizing: border-box;
+ }
+
+ &.is-hidden {
+ display: none;
+ }
+
+ &__months {
+ display: grid;
+ background-color: $lightpick-months-background-color;
+ grid-template-columns: auto;
+ grid-gap: 1px;
+
+ @at-root .lightpick--2-columns #{&} {
+ grid-template-columns: auto auto;
+ }
+
+ @at-root .lightpick--3-columns #{&} {
+ grid-template-columns: auto auto auto;
+ }
+
+ @at-root .lightpick--4-columns #{&} {
+ grid-template-columns: auto auto auto auto;
+ }
+
+ @at-root .lightpick--5-columns #{&} {
+ grid-template-columns: auto auto auto auto auto;
+ }
+ }
+
+ &__month {
+ width: 100%;
+ background-color: $lightpick-background-color;
+
+ &-title-bar {
+ display: flex;
+ margin-bottom: $lightpick-padding;
+ justify-content: space-between;
+ text-align: center;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border: 1px solid #242424;
+ position: relative;
+ padding: 10px 0;
+ }
+
+ &-title {
+ margin-top: $lightpick-padding;
+ margin-bottom: $lightpick-padding;
+ margin-left: $lightpick-padding;
+ font-size: $lightpick-title-font-size;
+ font-weight: 700;
+ line-height: $lightpick-title-font-size * 1.5;
+ cursor: default;
+ padding: 0 $lightpick-padding;
+ border-radius: $lightpick-border-radius;
+
+ & > .lightpick__select {
+ border: none;
+ background-color: transparent;
+ outline: none;
+ -moz-appearance: none;
+ -webkit-appearance: none;
+ appearance: none;
+
+ &:disabled {
+ color: $lightpick-dropdown-disabled-color;
+ }
+ }
+
+ & > .lightpick__select-months {
+ font-weight: $lightpick-dropdown-font-weight;
+ font-size: $lightpick-dropdown-font-size;
+ margin-right: 0;
+ direction: ltr;
+ }
+ }
+ }
+
+ &__toolbar {
+ display: flex;
+ // text-align: right;
+ justify-content: space-between;
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ -webkit-transform: translateY(-50%);
+ -moz-transform: translateY(-50%);
+ -ms-transform: translateY(-50%);
+ -o-transform: translateY(-50%);
+
+ left: 0;
+ width: 100%;
+ }
+
+ &__previous-action,
+ &__next-action,
+ &__close-action {
+ display: flex;
+ width: $lightpick-action-width;
+ height: $lightpick-action-height;
+ outline: none;
+ border: none;
+ background: none;
+ // border-radius: 50%;
+ // background-color: $lightpick-action-background-color;
+ justify-content: center;
+ align-items: center;
+
+ &:active {
+ color: inherit;
+ }
+ }
+
+ &__previous-action,
+ &__next-action {
+ font-size: 20px;
+ margin: 0 5px;
+ }
+
+ &__close-action {
+ font-size: $lightpick-action-close-font-size;
+ }
+
+ &__days-of-the-week {
+ display: grid;
+ grid-template-columns: repeat(7, 1fr);
+ }
+
+ &__day-of-the-week {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: $h3-size;
+ line-height: $h3-height;
+ font-weight: 700;
+ padding: 10px 0;
+ }
+
+ &__days {
+ display: grid;
+ grid-template-columns: repeat(7, 1fr);
+ }
+
+ &__day {
+ display: flex;
+ height: $lightpick-day-size;
+ padding: 10px 0;
+ background-position: center center;
+ background-size: contain;
+ background-repeat: no-repeat;
+ font-size: $h3-size - 3px;
+ line-height: $h3-height - 3px;
+ justify-content: center;
+ align-items: center;
+ cursor: default;
+
+ &.is-today {
+ background-image: $lightpick-today-background-image;
+ background-size: 18.8% auto;
+ background-position: center bottom;
+ color: $lightpick-today-color;
+ }
+
+ &:not(.is-disabled):hover {
+ background-size: contain;
+ background-image: $lightpick-day-hover-background-image;
+ }
+
+ &.is-disabled {
+ opacity: $lightpick-day-disabled-opacity;
+ pointer-events: none;
+
+ &.is-forward-selected {
+ opacity: 1;
+
+ &:not(.is-start-date) {
+ background-color: $lightpick-selected-range-background-color;
+ background-image: none;
+ }
+ }
+ }
+
+ &.disabled-tooltip {
+ pointer-events: auto;
+ }
+
+ &.is-previous-month,
+ &.is-next-month {
+ opacity: $lightpick-day-previous-next-opacity;
+ }
+
+ &#{&}.is-in-range:not(.is-disabled) {
+ opacity: 1;
+ }
+
+ &.is-in-range {
+ border-radius: 0;
+ background-color: $lightpick-selected-range-background-color;
+ background-image: none;
+
+ &:hover {
+ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle fill='rgba(38, 139, 210, 0.5)' cx='16' cy='16' r='16'/%3E%3C/svg%3E");
+ }
+ }
+
+ &.is-start-date.is-in-range,
+ &.is-end-date.is-in-range.is-flipped {
+ border-top-left-radius: 50%;
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ border-bottom-left-radius: 50%;
+ background-color: $main-color;
+ background-image: none;
+ }
+
+ &.is-end-date.is-in-range,
+ &.is-start-date.is-in-range.is-flipped {
+ border-top-left-radius: 0;
+ border-top-right-radius: 50%;
+ border-bottom-right-radius: 50%;
+ border-bottom-left-radius: 0;
+ background-color: $main-color;
+ background-image: none;
+ }
+
+ &.is-start-date.is-end-date {
+ background-color: transparent;
+ background-image: $lightpick-selected-date-background-image;
+ }
+
+ &.is-start-date,
+ &.is-end-date,
+ &.is-start-date:hover,
+ &.is-end-date:hover {
+ background-image: $lightpick-selected-date-background-image;
+ background-size: auto;
+ background-position: center;
+ color: $lightpick-selected-date-color;
+ font-weight: $lightpick-selected-date-font-weight;
+ }
+ }
+
+ &__tooltip {
+ position: absolute;
+ margin-top: $lightpick-tooltip-margin;
+ padding: $lightpick-tooltip-padding;
+ border-radius: $lightpick-border-radius;
+ background-color: $lightpick-tooltip-background-color;
+ box-shadow: $lightpick-box-shadow;
+ white-space: nowrap;
+ font-size: $lightpick-tooltip-font-size;
+ pointer-events: none;
+
+ &::before {
+ position: absolute;
+ bottom: -($lightpick-tooltip-triangle-size + 1);
+ left: calc(50% - #{$lightpick-tooltip-triangle-size + 1});
+ border-top: ($lightpick-tooltip-triangle-size + 1) solid
+ $lightpick-tooltip-border-color;
+ border-right: ($lightpick-tooltip-triangle-size + 1) solid transparent;
+ border-left: ($lightpick-tooltip-triangle-size + 1) solid transparent;
+ content: "";
+ }
+
+ &::after {
+ position: absolute;
+ bottom: -$lightpick-tooltip-triangle-size;
+ left: calc(50% - #{$lightpick-tooltip-triangle-size});
+ border-top: $lightpick-tooltip-triangle-size solid
+ $lightpick-tooltip-background-color;
+ border-right: $lightpick-tooltip-triangle-size solid transparent;
+ border-left: $lightpick-tooltip-triangle-size solid transparent;
+ content: "";
+ }
+ }
+
+ &__footer {
+ display: flex;
+ justify-content: space-between;
+ }
+
+ &__reset-action,
+ &__apply-action {
+ border-radius: $lightpick-action-border-radius;
+ font-size: $lightpick-action-font-size;
+ border: none;
+ }
+
+ &__reset-action {
+ color: $lightpick-action-reset-color;
+ background-color: $lightpick-action-reset-background-color;
+ }
+
+ &__apply-action {
+ color: $lightpick-action-apply-color;
+ background-color: $lightpick-action-apply-background-color;
+ }
+}
diff --git a/themes/modern2/template/css (old)/components/2-layout/newsCard.scss b/themes/modern2/template/css (old)/components/2-layout/newsCard.scss
new file mode 100644
index 000000000..00584a703
--- /dev/null
+++ b/themes/modern2/template/css (old)/components/2-layout/newsCard.scss
@@ -0,0 +1,90 @@
+.card {
+ position: relative;
+ padding: 25px;
+ background: $text-color-white;
+ &__header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ position: relative;
+ &-category {
+ padding: 5px 10px;
+ background: $main-color;
+ font-size: $h5-size;
+ line-height: $h5-height;
+ color: $text-color-white;
+ font-weight: 700;
+ max-width: 115px;
+ text-align: center;
+ margin-bottom: 10px;
+ }
+ &-view {
+ display: flex;
+ align-items: center;
+ color: $text-color-grey;
+ font-weight: 400;
+ font-size: $h5-size;
+ line-height: $h5-height - 5px;
+ svg {
+ margin-right: 5px;
+ stroke: $text-color-grey;
+ width: 21px;
+ height: 14px;
+ }
+ }
+ &-date {
+ display: flex;
+ align-items: center;
+ font-size: 12px;
+ line-height: $h5-height;
+ color: $text-color-grey;
+ font-weight: 400;
+ svg {
+ margin: 0 5px;
+ width: 4px;
+ height: 4px;
+ }
+ }
+ }
+ &__link {
+ color: $text-black;
+ font-weight: 500;
+ font-size: 15px;
+ line-height: 20px;
+ margin: 10px 0 0 0;
+ display: block;
+ height: 60px;
+ //overflow: hidden;
+ //text-overflow: ellipsis;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ -webkit-line-clamp: 3;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ &__box {
+ padding: 30px 0;
+
+ &:last-child {
+ border-top: 1px solid $text-color-grey;
+ padding: 30px 0 0 0;
+ }
+ &:nth-child(2) {
+ padding: 0 0 30px 0;
+ }
+ }
+ &.other {
+ padding: 30px;
+ .card__header {
+ &-category {
+ background: $text-light-black;
+ color: $text-color-white;
+ }
+ }
+ border-bottom: 1px solid #e6e6e6;
+ &:last-child {
+ border-bottom: none;
+ }
+ }
+}
diff --git a/themes/modern2/template/css (old)/components/2-layout/newsSlider.scss b/themes/modern2/template/css (old)/components/2-layout/newsSlider.scss
new file mode 100644
index 000000000..1041f788f
--- /dev/null
+++ b/themes/modern2/template/css (old)/components/2-layout/newsSlider.scss
@@ -0,0 +1,99 @@
+.newsSlider {
+ &__outer {
+ position: relative;
+ overflow: hidden;
+ .p2 {
+ cursor: pointer;
+ position: absolute;
+ top: 50%;
+ left: 0;
+ @include transformY;
+ width: 30px;
+ height: 40px;
+ background: rgba($color: #000000, $alpha: 0.5);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 1;
+ }
+ .n2 {
+ cursor: pointer;
+ position: absolute;
+ z-index: 1;
+ top: 50%;
+ right: 0;
+ @include transformY;
+ width: 30px;
+ height: 40px;
+ background: rgba($color: #000000, $alpha: 0.5);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+ }
+ .newsSlider__item {
+ position: relative;
+ height: 320px;
+ img {
+ @include fullImage;
+ }
+ &::before {
+ position: absolute;
+ content: "";
+ top: 5px;
+ left: 5px;
+ width: calc(100% - 10px);
+ height: calc(100% - 10px);
+ background: rgb(0, 0, 0);
+ background: linear-gradient(
+ 0deg,
+ rgba(0, 0, 0, 1) 0%,
+ rgba(0, 0, 0, 0) 100%
+ );
+ z-index: 1;
+ }
+ &-content {
+ flex-direction: column;
+ justify-content: space-between;
+ position: absolute;
+ left: 30px;
+ top: 30px;
+ width: calc(100% - 60px);
+ z-index: 2;
+ height: calc(100% - 60px);
+ display: flex;
+ &-date {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 8px 12px;
+ background: $main-color;
+ font-size: 14px;
+ line-height: 18px;
+ font-weight: 400;
+ max-width: 145px;
+ color: $text-color-white;
+ margin-bottom: 10px;
+ svg {
+ margin: 0 4px;
+ width: 4px;
+ height: 4px;
+ fill: $text-color-white;
+ }
+ }
+ &-link {
+ color: $text-color-white;
+ font-size: 16px;
+ line-height: 25px;
+ font-weight: 700;
+ display: block;
+ }
+ }
+ }
+}
+.slick-slider {
+ margin: 0 -10px;
+}
+.slick-slide {
+ padding: 5px;
+}
diff --git a/themes/modern2/template/css (old)/components/2-layout/partnerSlider.scss b/themes/modern2/template/css (old)/components/2-layout/partnerSlider.scss
new file mode 100644
index 000000000..fea340603
--- /dev/null
+++ b/themes/modern2/template/css (old)/components/2-layout/partnerSlider.scss
@@ -0,0 +1,45 @@
+.partnerSlider {
+ position: relative;
+
+ &__inner {
+ }
+ &__item {
+ margin-right: 5px;
+ padding: 30px;
+ border-right: 5px;
+ border: 1px solid #e6e6e6;
+ position: relative;
+ img {
+ width: 90%;
+ margin: 0 auto;
+ }
+ }
+ .p1 {
+ cursor: pointer;
+ position: absolute;
+ top: 50%;
+ left: 0;
+ @include transformY;
+ width: 30px;
+ height: 40px;
+ background: rgba($color: #000000, $alpha: 0.5);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 1;
+ }
+ .n1 {
+ cursor: pointer;
+ position: absolute;
+ z-index: 1;
+ top: 50%;
+ right: 5px;
+ @include transformY;
+ width: 30px;
+ height: 40px;
+ background: rgba($color: #000000, $alpha: 0.5);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+}
diff --git a/themes/modern2/template/css (old)/components/2-layout/responsive.scss b/themes/modern2/template/css (old)/components/2-layout/responsive.scss
new file mode 100644
index 000000000..3c342b5a2
--- /dev/null
+++ b/themes/modern2/template/css (old)/components/2-layout/responsive.scss
@@ -0,0 +1,830 @@
+@include xxlg-xxxlg {
+ .auto__container {
+ max-width: 1240px;
+ }
+ .swiper {
+ &-slide {
+ height: 450px;
+ }
+ }
+}
+@include xlg-xxlg {
+ .swiper-slide-content-link {
+ font-size: 18px;
+ line-height: 25px;
+ height: 50px;
+ }
+ .newsSlider {
+ &__item {
+ height: 280px;
+ }
+ }
+ .main__banner {
+ margin-bottom: 40px;
+ }
+ .swiper {
+ &-slide {
+ height: 350px;
+ }
+ }
+ .newsSlider .newsSlider__item {
+ height: 180px;
+ &-content {
+ &-date {
+ max-width: 120px;
+ margin-bottom: 0;
+ }
+ }
+ }
+
+ .header__slogan {
+ font-size: 28px;
+ line-height: 1;
+ }
+ .auto__container {
+ max-width: 1040px;
+ padding: 0 25px;
+ }
+ .banner {
+ margin: 40px 0;
+ }
+ .slider {
+ height: 450px;
+ &__item {
+ height: 450px;
+ }
+ &__nav {
+ a {
+ height: 33.3%;
+ span {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ }
+ }
+ }
+ .event {
+ margin: 40px 0 70px;
+ &__header {
+ margin-bottom: 40px;
+ }
+ &__body {
+ &-row {
+ margin: 0 -10px;
+ }
+ &-image {
+ margin: 0 10px;
+ width: calc(50% - 20px);
+ a.progressive {
+ height: 200px;
+ }
+ }
+ &-card {
+ top: 150px;
+ left: 10px;
+ width: calc(100% - 20px);
+ }
+ &-column {
+ margin: 0 10px;
+ width: calc(50% - 30px);
+ padding: 0 15px;
+ .card {
+ padding: 15px 0;
+ }
+ }
+ }
+ }
+ .main {
+ &__body {
+ &-header {
+ margin-bottom: 40px;
+ }
+ &-column {
+ a.progressive {
+ height: 240px;
+ }
+ }
+ &-card {
+ margin: -50px 15px 0 15px;
+ }
+ }
+ &__sidebar {
+ &-title {
+ margin-bottom: 40px;
+ }
+ a.progressive {
+ margin-bottom: 40px;
+ }
+ &-tag {
+ margin-bottom: 40px;
+ &-link {
+ padding: 4px 6px;
+ font-size: 12px;
+ }
+ }
+ }
+ }
+ .card {
+ padding: 15px;
+ }
+ .partner {
+ &__title {
+ margin-bottom: 40px;
+ }
+ }
+ .heading {
+ &__row {
+ margin-bottom: 40px;
+ }
+ &__title {
+ margin-bottom: 40px;
+ }
+ &__content {
+ padding: 15px 0 15px 15px;
+ width: calc(60% - 15px);
+ &-header {
+ margin-bottom: 15px;
+ }
+ &-body {
+ &-para {
+ height: 90px;
+ }
+ }
+ }
+ a.progressive {
+ height: 250px;
+ }
+ }
+ .form {
+ &__title {
+ margin-bottom: 40px;
+ }
+ &__input {
+ label {
+ height: 60px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ }
+ }
+ .news {
+ &__inner {
+ padding: 40px 0;
+ }
+ &__image {
+ margin: 20px 0;
+ }
+ &__body {
+ &-row {
+ &-image {
+ margin: 0 10px;
+ width: calc(50% - 20px);
+ }
+ }
+ }
+ }
+}
+@include lg-xlg {
+ .newsSlider {
+ &__item {
+ height: 240px;
+ }
+ }
+ .swiper-container {
+ .slick-list {
+ padding: 0 20% 0 0;
+ }
+ }
+ .partner__title {
+ margin-bottom: 20px;
+ }
+ .swiper-slide {
+ &-content {
+ padding: 15px;
+ width: calc(100% - 30px);
+ &-category {
+ font-size: 12px;
+ line-height: 14px;
+ padding: 8px 12px;
+ font-weight: 500;
+ }
+ &-link {
+ font-size: 14px;
+ line-height: 26px;
+ height: 52px;
+ width: 75%;
+ }
+ }
+ }
+ .slider {
+ &__nav {
+ display: none;
+ }
+ &__inner {
+ width: 100%;
+ margin: 0;
+ }
+ }
+ .search {
+ &Modal {
+ display: block;
+ @include transition;
+ position: fixed;
+ z-index: 1000;
+ top: 0;
+ left: 0;
+ transform: translateY(-100%);
+ -webkit-transform: translateY(-100%);
+ -moz-transform: translateY(-100%);
+ -ms-transform: translateY(-100%);
+ -o-transform: translateY(-100%);
+ background: #fff;
+ width: 100%;
+ height: 100%;
+ &__inner {
+ padding: 25px;
+ }
+ &.active {
+ transform: translateY(0);
+ -webkit-transform: translateY(0);
+ -moz-transform: translateY(0);
+ -ms-transform: translateY(0);
+ -o-transform: translateY(0);
+ }
+ }
+ &Input {
+ position: relative;
+ max-width: 450px;
+ margin: 0 auto;
+ input {
+ width: calc(100% - 60px);
+ height: 50px;
+ padding: 0 40px 0 20px;
+ display: flex;
+ align-items: center;
+ font-size: 14px;
+ line-height: 1;
+ font-weight: 500;
+ color: $text-black;
+ border-radius: 5px;
+ border: 1px solid #242424;
+ }
+ &__btn {
+ position: absolute;
+ right: 15px;
+ background: none;
+ top: 50%;
+ transform: translateY(-50%);
+ -webkit-transform: translateY(-50%);
+ -moz-transform: translateY(-50%);
+ -ms-transform: translateY(-50%);
+ -o-transform: translateY(-50%);
+ svg {
+ width: 24px;
+ height: 24px;
+ fill: #242424;
+ }
+ }
+ }
+ &Logo {
+ width: 100%;
+ max-width: 160px;
+ margin: 30px auto;
+ }
+ &Close {
+ width: 24px;
+ height: 24px;
+ fill: #b4b4b4;
+ }
+ }
+ .header {
+ border-bottom: 4px solid #242424;
+ &__slogan {
+ display: none;
+ }
+ .mobileSearch {
+ display: block;
+ svg {
+ width: 22px;
+ height: 22px;
+ fill: #b4b4b4;
+ }
+ }
+ &__search {
+ display: none;
+ }
+ .hamBtn {
+ display: block;
+ width: 35px;
+ background: none;
+ height: 25px;
+ display: flex;
+ flex-direction: column;
+ -ms-flex-direction: column;
+ justify-content: space-between;
+ span {
+ width: 100%;
+ height: 5px;
+ border-radius: 10px;
+ background: $text-light-black;
+ }
+ }
+ }
+ .subheader__inner {
+ position: fixed;
+ top: 0;
+ right: 0;
+ height: 100%;
+ width: 0;
+ overflow: hidden;
+ opacity: 0;
+ background: rgba($color: #000000, $alpha: 0.5);
+ z-index: 1000;
+ @include transition;
+ .close {
+ width: 30px;
+ height: 30px;
+ position: absolute;
+ left: 30px;
+ top: 30px;
+ display: block;
+ img {
+ width: 100%;
+ height: 100%;
+ }
+ }
+ .nav {
+ position: absolute;
+ top: 0;
+ right: 0;
+ width: 50%;
+ height: calc(100% - 50px);
+ overflow-y: scroll;
+ background: $text-light-black;
+ &__inner {
+ flex-direction: column;
+ -ms-flex-direction: column;
+ &-link {
+ display: block;
+ text-align: center;
+ margin-right: 0;
+ padding: 20px;
+ font-size: $h3-size;
+ line-height: $h3-height;
+ font-weight: 700;
+ width: calc(100% - 40px);
+ &::before {
+ display: none;
+ }
+ .dropDown {
+ margin-top: 20px;
+ position: unset;
+ width: unset;
+ background: unset;
+ background: #b4b4b4;
+ &__link {
+ color: $text-color-white;
+ text-align: center;
+ padding: 20px 0;
+ &:hover {
+ background: unset;
+ }
+ }
+ }
+ }
+ }
+ }
+ .language {
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ width: 50%;
+ padding: 15px 0;
+ justify-content: center;
+ background: $color-grey;
+ }
+ &.showMenu {
+ width: 100%;
+ opacity: 1;
+ }
+ }
+ .event {
+ &__body {
+ &-image {
+ width: calc(50% - 20px);
+ }
+ &-column {
+ width: calc(50% - 30px);
+ }
+ }
+ }
+ .main {
+ margin-top: 40px;
+ &__sidebar {
+ display: none;
+ }
+ &__content {
+ width: 100%;
+ margin: 0;
+ }
+ &__body {
+ &-card {
+ margin: -50px 0 0 0;
+ }
+ &-column {
+ a.progressive {
+ height: 300px;
+ }
+ }
+ }
+ }
+ .footer {
+ &__inner {
+ flex-direction: column;
+ -ms-flex-direction: column;
+ justify-content: center;
+ }
+ &__social {
+ margin-top: 20px;
+ }
+ &__copyright {
+ text-align: center;
+ }
+ }
+ .card.other {
+ padding: 15px;
+ }
+ .mr-top-bot {
+ margin: 40px 0;
+ }
+ .about {
+ padding: 40px 0;
+ }
+ .news {
+ &__sidebar {
+ display: none;
+ }
+ &__content {
+ width: 100%;
+ margin-right: 0;
+ }
+ }
+ .terms {
+ padding: 40px 0;
+ &__title {
+ margin-bottom: 20px;
+ }
+ &__para {
+ margin-bottom: 20px;
+ }
+ }
+}
+@include sm-md {
+ .newsSlider__outer {
+ display: none;
+ }
+ .swiper-container {
+ .slick-list {
+ padding: 0 0 0 0;
+ }
+ }
+ .header__logo {
+ width: 80px;
+ img {
+ width: 100%;
+ }
+ }
+ .marquee {
+ display: none;
+ }
+ .slider {
+ height: 350px;
+ &__item {
+ height: 350px;
+ }
+ }
+
+ .event {
+ &__body {
+ &-row {
+ margin: 0;
+ flex-direction: column;
+ -ms-flex-direction: column;
+ border: 1px solid #dcdcdc;
+ }
+ &-image {
+ width: 100%;
+ margin: 15px 0;
+ a.progressive {
+ height: auto;
+ }
+ }
+ &-column {
+ width: calc(100% - 30px);
+ margin: 0;
+ padding: 0 15px;
+ border: none;
+ .card {
+ padding: 15px 0;
+ border-bottom: 1px solid #dcdcdc;
+ &:last-child {
+ border-bottom: none;
+ }
+ }
+ }
+ &-card {
+ position: unset;
+ width: 100%;
+ border: none;
+ border-bottom: 1px solid #dcdcdc;
+ }
+ }
+ }
+ .main {
+ &__body {
+ &-row {
+ display: block;
+ margin: 0;
+ }
+ .banner__mobile {
+ display: block;
+ width: 100%;
+ }
+ &-column {
+ width: 100%;
+ margin: 15px 0;
+ a.progressive {
+ height: auto;
+ }
+ }
+ }
+ &__banner {
+ margin-bottom: 40px;
+ }
+ }
+ .heading {
+ &__row {
+ margin-bottom: 20px;
+ flex-direction: column;
+ -ms-flex-direction: column;
+ }
+ &__image {
+ width: 100%;
+ }
+ &__content {
+ padding: 20px 0;
+ width: 100%;
+ &-body {
+ &-para {
+ height: 120px;
+ }
+ }
+ }
+ a.progressive {
+ height: auto;
+ img {
+ height: unset;
+ width: 100%;
+ object-fit: unset;
+ -o-object-fit: unset;
+ }
+ }
+ }
+ .form {
+ &__row {
+ flex-direction: column;
+ -ms-flex-direction: column;
+ }
+ &__input {
+ margin-bottom: 20px;
+ &:first-child {
+ width: 100%;
+ margin-right: 0;
+ }
+ &:last-child {
+ width: 100%;
+ margin-left: 0;
+ }
+ label {
+ height: unset;
+ }
+ }
+ &__btn {
+ width: 100%;
+ }
+ }
+ .main {
+ &__inner.contact {
+ padding: 0;
+ }
+ }
+ .news {
+ &__body {
+ &-row {
+ margin: 0;
+ flex-direction: column;
+ -ms-flex-direction: column;
+ &-image {
+ margin: 15px 0;
+ width: 100%;
+ }
+ }
+ img {
+ width: 100%;
+ margin: 15px 0;
+ display: block;
+ }
+ }
+ &__footer {
+ flex-direction: column;
+ -ms-flex-direction: column;
+ }
+ img {
+ width: 100%;
+ margin: 15px 0;
+ display: block;
+ }
+ }
+ .newsSlider {
+ .newsSlider__item {
+ img {
+ height: 250px;
+ }
+ &-content {
+ position: unset;
+ padding: 10px;
+ border: 1px solid #dfdfdf;
+ width: calc(100% - 20px);
+ &-link {
+ color: $text-light-black;
+ font-size: 12px;
+ line-height: 16px;
+ height: 48px;
+ }
+ &-date {
+ font-size: 10px;
+ width: 100%;
+ padding: 8px 0;
+ }
+ }
+ }
+ }
+}
+@include xsm-sm {
+ .swiper-slide-content-category {
+ position: absolute;
+ top: 12px;
+ right: 15px;
+ }
+ .auto__container {
+ padding: 0 10px;
+ }
+ .slider {
+ height: 300px;
+ &__item {
+ height: 300px;
+ }
+ }
+ .partnerSlider {
+ overflow: hidden;
+ &__item {
+ margin-right: 0;
+ padding: 5px;
+ height: unset;
+ }
+ }
+ .footer {
+ &__social {
+ flex-wrap: wrap;
+ justify-content: center;
+ &-link {
+ margin: 5px;
+ }
+ }
+ }
+ .subheader {
+ z-index: 12;
+ &__inner {
+ .close {
+ width: 20px;
+ height: 20px;
+ top: 15px;
+ left: 15px;
+ }
+ }
+ .nav {
+ width: calc(100% - 50px);
+ }
+ .language {
+ width: calc(100% - 50px);
+ }
+ }
+ .swiper-slide {
+ height: 300px;
+ }
+ .newsSlider__outer {
+ display: none;
+ }
+ .main {
+ &__body {
+ &-card {
+ margin: 0 0 0 0;
+ }
+ }
+ }
+ .popUp {
+ display: flex;
+ transform: translateY(100%);
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ background: #f7f7f7;
+ z-index: 11;
+ animation: popUp 0.2s linear;
+ border-radius: 20px 20px 0 0;
+ padding: 40px 20px;
+ width: calc(100% - 40px);
+ @include transition;
+ &__inner {
+ width: 100%;
+
+ &-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ &-logo {
+ width: 75px;
+ img {
+ width: 100%;
+ }
+ }
+ &-close {
+ display: flex;
+ align-items: flex-end;
+ justify-content: flex-end;
+ svg {
+ width: 18px;
+ height: 18px;
+ fill: #000;
+ }
+ }
+ }
+ &-body {
+ margin: 15px 0;
+ &-subtitle {
+ font-size: 16px;
+ line-height: 20px;
+ font-weight: 400;
+ color: #000000;
+ text-align: center;
+ }
+ &-title {
+ font-size: 20px;
+ line-height: 24px;
+ font-weight: 700;
+ color: #000000;
+ text-align: center;
+ margin-bottom: 15px;
+ }
+ }
+ &-footer {
+ &-btn {
+ width: 80%;
+ margin: 0 auto;
+ padding: 15px 0;
+ align-items: center;
+ justify-content: center;
+ color: #fff;
+ text-align: center;
+ font-size: 16px;
+ line-height: 20px;
+ border-radius: 15px;
+ background: $main-color;
+ display: flex;
+ }
+ &-close {
+ text-align: center;
+ font-size: 16px;
+ line-height: 20px;
+ font-weight: 400;
+ color: $main-color;
+ margin-top: 15px;
+ }
+ }
+ }
+ &.active {
+ transform: translateY(0%);
+ }
+ }
+ @keyframes popUp {
+ 0% {
+ opacity: 0;
+ transform: translateY(100%);
+ }
+ 100% {
+ opacity: 1;
+ transform: translateY(0%);
+ }
+ }
+}
+
diff --git a/themes/modern2/template/css (old)/components/2-layout/slider.scss b/themes/modern2/template/css (old)/components/2-layout/slider.scss
new file mode 100644
index 000000000..ee8e09184
--- /dev/null
+++ b/themes/modern2/template/css (old)/components/2-layout/slider.scss
@@ -0,0 +1,45 @@
+.animaSlider {
+ height: 560px;
+ &__outer {
+ position: relative;
+
+ }
+ &__item {
+ height: 560px;
+ padding: 5px;
+ &-image {
+ height: 100%;
+ width: 66.6%;
+ -moz-transition: 0.4s linear;
+ transition: 0.4s linear;
+ img {
+ @include fullImage;
+ }
+ }
+ &.slick-slide {
+ width: 66.6%;
+ }
+
+ &-category {
+ position: absolute;
+ left: 30px;
+ bottom: 30px;
+ background: $main-color;
+ color: $text-color-white;
+ font-weight: 400;
+ font-size: $h4-size;
+ line-height: $h4-height;
+ padding: 5px 20px;
+ }
+ &.slick-active {
+ .animaSlider__item-image {
+ width: 100%;
+ img {
+ }
+ }
+ }
+ }
+ .slick-list {
+ padding: 0 33.3% 0 0;
+ }
+}
diff --git a/themes/modern2/template/css (old)/components/2-layout/subheader.scss b/themes/modern2/template/css (old)/components/2-layout/subheader.scss
new file mode 100644
index 000000000..a2dafc134
--- /dev/null
+++ b/themes/modern2/template/css (old)/components/2-layout/subheader.scss
@@ -0,0 +1,78 @@
+.subheader {
+ background: $text-light-black;
+ position: relative;
+ z-index: 2;
+ .close {
+ display: none;
+ }
+ &__inner {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ }
+ .nav {
+ &__inner {
+ display: flex;
+ align-items: center;
+ &-link {
+ font-size: $h5-size;
+ line-height: $h5-height;
+ font-weight: 400;
+ color: $text-color-white;
+ margin-right: 40px;
+ padding: 15px 0;
+ position: relative;
+ z-index: 1;
+ &::before {
+ position: absolute;
+ bottom: 0;
+ width: 0;
+ height: 4px;
+ background: $main-color;
+ content: "";
+ @include transition;
+ }
+ &:hover::before {
+ width: 100%;
+ }
+ &.active::before {
+ width: 100%;
+ }
+ .dropDown {
+ position: absolute;
+ top: 100%;
+ left: 0;
+ width: 200px;
+ max-height: 0;
+ overflow: auto;
+ z-index: 2;
+ background: $text-color-white;
+ &__link {
+ display: block;
+ padding: 15px;
+ font-size: $h5-size;
+ line-height: $h5-height;
+ font-weight: 400;
+ color: $text-light-black;
+ @include transition;
+ &:hover {
+ background: #f7f7f7;
+ }
+ }
+ }
+ &:hover .dropDown {
+ max-height: 2000px;
+ }
+ }
+ }
+ }
+ .language {
+ display: flex;
+ align-items: center;
+ &__link {
+ width: 30px;
+ height: 20px;
+ margin-left: 20px;
+ }
+ }
+}
diff --git a/themes/modern2/template/css (old)/components/2-layout/swiper.scss b/themes/modern2/template/css (old)/components/2-layout/swiper.scss
new file mode 100644
index 000000000..b7e8d92ea
--- /dev/null
+++ b/themes/modern2/template/css (old)/components/2-layout/swiper.scss
@@ -0,0 +1,161 @@
+.swiper-container {
+ width: 100%;
+ height: 100%;
+ position: relative;
+
+ .p3 {
+ cursor: pointer;
+ position: absolute;
+ top: 50%;
+ left: 0;
+ @include transformY;
+ width: 40px;
+ height: 60px;
+ background: rgba($color: #000000, $alpha: 0.5);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 1;
+ }
+ .n3 {
+ cursor: pointer;
+ position: absolute;
+ z-index: 1;
+ top: 50%;
+ right: 0;
+ @include transformY;
+ width: 40px;
+ height: 60px;
+ background: rgba($color: #000000, $alpha: 0.5);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+ .slick-list {
+ padding: 0 33.3% 0 0;
+ }
+}
+
+.swiper-slide {
+ text-align: center;
+ font-size: 18px;
+ height: 520px;
+ /* Center slide t ext vertically */
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: -webkit-flex;
+ display: flex;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ -webkit-justify-content: center;
+ justify-content: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ -webkit-align-items: center;
+ align-items: center;
+ overflow: hidden;
+ @include transition;
+ &-image {
+ width: 100%;
+ height: 100%;
+ transform-origin: 0% 50%;
+ position: relative;
+ picture {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ img {
+ @include fullImage;
+ }
+ }
+ }
+ &-content {
+ position: absolute;
+ left: 0;
+ bottom: 0;
+ display: none;
+ width: 100%;
+ background: rgb(0, 0, 0);
+ background: linear-gradient(
+ 0deg,
+ rgba(0, 0, 0, 1) 0%,
+ rgba(0, 0, 0, 0.022846638655462215) 100%
+ );
+ padding: 50px 40px;
+
+ &-date {
+ display: flex;
+ align-items: center;
+ justify-content: flex-start;
+ font-size: 14px;
+ line-height: 18px;
+ font-weight: 400;
+ color: $text-color-white;
+ margin-bottom: 10px;
+ svg {
+ margin: 0 4px;
+ width: 4px;
+ height: 4px;
+ fill: $text-color-white;
+ }
+ }
+ &-footer {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ }
+ &-link {
+ color: $text-color-white;
+ font-size: 20px;
+ line-height: 30px;
+ height: 60px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ font-weight: 700;
+ display: block;
+ text-align: left;
+ width: 75%;
+ }
+ &-category {
+ font-size: 14px;
+ line-height: 18px;
+ font-weight: 700;
+ color: $text-color-white;
+ padding: 8px 16px;
+ background: $main-color;
+ }
+ }
+ &.slick-active .swiper-slide-content {
+ display: block;
+ animation: myAnim 1s ease 0s 1 normal forwards;
+ animation-delay: 0.5s;
+ }
+}
+.copy {
+ position: absolute;
+ bottom: 15px;
+ left: 0;
+ right: 0;
+ text-align: center;
+ color: white;
+ letter-spacing: 0.06em;
+}
+.swiper-slide img {
+ display: block;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+@keyframes myAnim {
+ 0% {
+ opacity: 0;
+ transform: translateY(250px);
+ }
+
+ 100% {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
diff --git a/themes/modern2/template/css (old)/components/3-page/about.scss b/themes/modern2/template/css (old)/components/3-page/about.scss
new file mode 100644
index 000000000..f92ece3de
--- /dev/null
+++ b/themes/modern2/template/css (old)/components/3-page/about.scss
@@ -0,0 +1,16 @@
+.about {
+ padding: 80px 0;
+ &__title {
+ font-size: $h2-size;
+ line-height: $h2-height;
+ font-weight: 700;
+ color: $text-light-black;
+ }
+ &__para {
+ font-size: $h3-size;
+ line-height: $h3-height + 14px;
+ font-weight: 400;
+ color: $text-light-black;
+ margin-top: 20px;
+ }
+}
diff --git a/themes/modern2/template/css (old)/components/3-page/contact.scss b/themes/modern2/template/css (old)/components/3-page/contact.scss
new file mode 100644
index 000000000..c36b71a4e
--- /dev/null
+++ b/themes/modern2/template/css (old)/components/3-page/contact.scss
@@ -0,0 +1,102 @@
+.form {
+ &__title {
+ font-weight: 700;
+ color: $text-light-black;
+ font-size: $h3-size;
+ line-height: $h3-height;
+ margin-bottom: 80px;
+ }
+ &__row {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 30px;
+ }
+ &__input {
+ display: flex;
+ flex-direction: column;
+ -ms-flex-direction: column;
+ label {
+ display: block;
+ font-size: $h4-size;
+ line-height: $h4-height;
+ font-weight: 700;
+ color: $text-light-black;
+ margin-bottom: 20px;
+ }
+ input {
+ width: calc(100% - 40px);
+ padding: 0 20px;
+ height: 60px;
+ border-radius: 5px;
+ border: 1px solid #c9c9c9;
+ font-size: $h4-size;
+ line-height: $h4-size;
+ color: $text-light-black;
+ }
+ &:last-child {
+ width: calc(50% - 20px);
+ margin-left: 20px;
+ }
+ &:first-child {
+ width: calc(50% - 20px);
+ margin-right: 20px;
+ }
+ }
+ &__input-bg {
+ width: 100%;
+ label {
+ display: block;
+ font-size: $h4-size;
+ line-height: $h4-height;
+ font-weight: 700;
+ color: $text-light-black;
+ margin-bottom: 20px;
+ }
+ input {
+ width: calc(100% - 40px);
+ padding: 0 20px;
+ height: 60px;
+ border-radius: 5px;
+ border: 1px solid #c9c9c9;
+ font-size: $h4-size;
+ line-height: $h4-size;
+ color: $text-light-black;
+ }
+ }
+ &__textarea {
+ width: 100%;
+ margin-top: 30px;
+ label {
+ display: block;
+ font-size: $h4-size;
+ line-height: $h4-height;
+ font-weight: 700;
+ color: $text-light-black;
+ margin-bottom: 20px;
+ }
+ textarea {
+ width: calc(100% - 40px);
+ padding: 20px;
+ border-radius: 5px;
+ border: 1px solid #c9c9c9;
+ }
+ }
+ &__btn {
+ width: 250px;
+ background: $main-color;
+ text-align: center;
+ color: $text-color-white;
+ font-weight: 700;
+ padding: 14px;
+ border-radius: 5px;
+ font-size: $h4-size;
+ line-height: $h4-height;
+ margin-top: 30px;
+ }
+}
+.main {
+ &__inner.contact {
+ padding: 80px 0 160px 0;
+ }
+}
diff --git a/themes/modern2/template/css (old)/components/3-page/heading.scss b/themes/modern2/template/css (old)/components/3-page/heading.scss
new file mode 100644
index 000000000..644e96406
--- /dev/null
+++ b/themes/modern2/template/css (old)/components/3-page/heading.scss
@@ -0,0 +1,154 @@
+.heading {
+ &__title {
+ font-weight: 700;
+ color: $text-light-black;
+ font-size: $h3-size;
+ line-height: $h3-height;
+ margin-bottom: 80px;
+ }
+ &__row {
+ display: flex;
+ align-items: center;
+ margin-bottom: 40px;
+ }
+ &__image {
+ width: 40%;
+ }
+ a.progressive {
+ position: relative;
+ display: block;
+ overflow: hidden;
+ outline: none;
+ height: 320px;
+ &:not(.replace) {
+ cursor: default;
+ }
+ & img {
+ @include fullImage;
+ }
+ & img.preview {
+ filter: blur(2vw);
+ transform: scale(1.05);
+ }
+ & img.reveal {
+ position: absolute;
+ left: 0;
+ top: 0;
+ will-change: transform, opacity;
+ animation: reveal 1s ease-out;
+ }
+ }
+ &__content {
+ width: calc(60% - 30px);
+ height: calc(100% - 60px);
+ padding: 30px 0 30px 30px;
+ &-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 20px;
+ &-view {
+ display: flex;
+ align-items: center;
+ color: $text-color-grey;
+ font-weight: 400;
+ font-size: $h5-size;
+ line-height: $h5-height - 5px;
+ svg {
+ margin-right: 5px;
+ stroke: $text-color-grey;
+ width: 21px;
+ }
+ }
+ &-date {
+ display: flex;
+ align-items: center;
+ font-size: $h5-size;
+ line-height: $h5-height;
+ color: $text-color-white;
+ background: $text-light-black;
+ font-weight: 400;
+ padding: 5px 15px;
+ svg {
+ margin: 0 5px;
+ }
+ }
+ }
+ &-body {
+ &-link {
+ color: $text-black;
+ font-weight: 700;
+ font-size: $h4-size;
+ line-height: $h4-height;
+ margin: 10px 0 0 0;
+ display: block;
+ height: 40px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ margin-bottom: 15px;
+ }
+ &-para {
+ font-size: $h4-size;
+ line-height: $h4-height;
+ font-weight: 400;
+ color: $text-light-black;
+ height: 100px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ }
+ }
+ &__footer {
+ display: flex;
+ align-items: center;
+ &-page {
+ width: 40px;
+ height: 40px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: $text-light-black;
+ svg {
+ width: 12px;
+ height: 12px;
+ fill: $text-color-white;
+ }
+ }
+ &-input {
+ width: 80px;
+ height: 40px;
+ margin: 0 10px;
+
+ input {
+ text-align: center;
+ font-size: $h3-size;
+ line-height: $h3-height;
+ height: 100%;
+ width: 100%;
+ border-radius: 5px;
+ background: #e6e6e6;
+ font-weight: 400;
+ color: $text-light-black;
+ }
+ }
+ span {
+ font-size: $h3-size;
+ line-height: $h3-height;
+ color: $text-light-black;
+ font-weight: 400;
+ margin-left: 10px;
+ }
+ }
+}
+.address {
+ &__inner {
+ font-size: $h3-size;
+ line-height: $h3-height;
+ color: $text-light-black;
+ font-weight: 400;
+ margin-bottom: 25px;
+ span {
+ font-weight: 700;
+ }
+ }
+}
diff --git a/themes/modern2/template/css (old)/components/3-page/home.scss b/themes/modern2/template/css (old)/components/3-page/home.scss
new file mode 100644
index 000000000..b1f3de9ea
--- /dev/null
+++ b/themes/modern2/template/css (old)/components/3-page/home.scss
@@ -0,0 +1,394 @@
+.marquee {
+ &__outer {
+ position: relative;
+ }
+ width: 100%;
+ margin: 10px 0;
+ overflow: hidden;
+ position: relative;
+ height: 50px;
+ background: #00822c;
+ &__item {
+ &.slick-slide {
+ padding: 0;
+ }
+ margin: 0 50px;
+ a {
+ display: flex;
+ align-items: center;
+ height: 50px;
+ color: #fff;
+ font-size: 16px;
+ line-height: 20px;
+ font-weight: 400;
+ }
+ }
+ &__link {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 120px;
+ height: 100%;
+ background: #ee4037;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 1;
+ font-size: 14px;
+ color: $text-color-white;
+ line-height: 16px;
+ font-weight: 700;
+ text-transform: uppercase;
+ &::before {
+ clip-path: polygon(100% 46%, 0 0, 0 100%);
+ background: #ee4037;
+ position: absolute;
+ top: 0;
+ left: 100%;
+ height: 100%;
+ width: 25px;
+ content: "";
+ }
+ }
+}
+.hero {
+ &__inner {
+ overflow: hidden;
+ }
+}
+
+@keyframes marquee {
+ 0% {
+ left: 0;
+ }
+ 100% {
+ left: -100%;
+ }
+}
+
+/* Make it move */
+@keyframes marquee {
+ 0% {
+ transform: translate(0, 0);
+ }
+ 100% {
+ transform: translate(-100%, 0);
+ }
+}
+// banner start
+.banner {
+ margin: 80px 0;
+ &__inner {
+ width: 100%;
+ height: auto;
+ img {
+ width: 100%;
+ }
+ }
+}
+// banner end
+.rek__item {
+ display: block;
+ img {
+ width: 100%;
+ }
+}
+// main start
+.main {
+ margin-top: 30px;
+ &__inner {
+ display: flex;
+ align-items: stretch;
+ }
+ &__content {
+ width: calc(70% - 25px);
+ margin-right: 25px;
+ }
+ &__body {
+ &-row {
+ margin: 0 -20px 50px -20px;
+ display: flex;
+ align-items: stretch;
+ flex-wrap: wrap;
+ }
+ &-column {
+ width: calc(50% - 42px);
+ margin: 0 20px;
+ a.progressive {
+ position: relative;
+ display: block;
+ overflow: hidden;
+ outline: none;
+ height: 300px;
+ }
+ a.progressive:not(.replace) {
+ cursor: default;
+ }
+ a.progressive img {
+ @include fullImage;
+ }
+ a.progressive img.preview {
+ filter: blur(2vw);
+ transform: scale(1.05);
+ }
+ a.progressive img.reveal {
+ position: absolute;
+ left: 0;
+ top: 0;
+ will-change: transform, opacity;
+ animation: reveal 1s ease-out;
+ }
+ &.border {
+ border: 1px solid #dcdcdc;
+ }
+ }
+ &-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 40px;
+ position: relative;
+ &::before {
+ position: absolute;
+ content: "";
+ top: 50%;
+ left: 50%;
+ width: 80%;
+ height: 1px;
+ background: #e6e6e6;
+ @include transform;
+ z-index: -1;
+ }
+ &-title {
+ font-size: $h3-size;
+ line-height: $h3-height;
+ font-weight: 700;
+ color: $text-light-black;
+ background: $text-color-white;
+ }
+ &-link {
+ font-size: $h5-size;
+ line-height: $h5-height;
+ font-weight: 400;
+ color: $text-color-grey;
+ background: $text-color-white;
+ display: block;
+ }
+ }
+ &-card {
+ margin: -100px 30px 0 30px;
+ border: 1px solid #dcdcdc;
+ .card {
+ border-bottom: 1px solid #dcdcdc;
+ &:last-child {
+ border-bottom: none;
+ }
+ }
+ }
+ &-title {
+ font-size: $h3-size;
+ line-height: $h3-height;
+ font-weight: 700;
+ color: $text-light-black;
+ margin-bottom: 20px;
+ }
+ }
+ &__banner {
+ width: 100%;
+ height: auto;
+ margin-bottom: 40px;
+ img {
+ width: 100%;
+ }
+ }
+ &__sidebar {
+ margin-left: 25px;
+ width: calc(30% - 25px);
+ &-adv {
+ margin-bottom: 40px;
+ }
+ &-title {
+ font-size: $h4-size;
+ line-height: $h4-height;
+ font-weight: 700;
+ text-transform: uppercase;
+ margin-bottom: 80px;
+ color: $text-light-black;
+ }
+ .card {
+ &.other {
+ padding: 0 0 30px 0;
+ }
+ &__link {
+ height: unset;
+ text-overflow: unset;
+ }
+ }
+ a.progressive {
+ position: relative;
+ display: block;
+ overflow: hidden;
+ outline: none;
+ margin-bottom: 80px;
+ &:not(.replace) {
+ cursor: default;
+ }
+ & img {
+ width: 100%;
+ height: auto;
+ }
+ & img.preview {
+ filter: blur(2vw);
+ transform: scale(1.05);
+ }
+ & img.reveal {
+ position: absolute;
+ left: 0;
+ top: 0;
+ will-change: transform, opacity;
+ animation: reveal 1s ease-out;
+ }
+ }
+ &-tag {
+ display: flex;
+ align-items: center;
+ flex-wrap: wrap;
+ margin: -30px -5px 80px -5px;
+ &-link {
+ padding: 8px 9px;
+ border-right: 5px;
+ background: #f7f7f6;
+ font-size: 16px;
+ line-height: 16px;
+ color: $text-light-black;
+ margin: 5px;
+ }
+ }
+ }
+}
+// main end
+.banner__mobile {
+ display: none;
+}
+// event start
+.event {
+ margin: 50px 0 80px;
+ &__header {
+ margin-bottom: 40px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ position: relative;
+ &-title {
+ font-size: $h3-size;
+ line-height: $h3-height;
+ font-weight: 700;
+ color: $text-light-black;
+ background: $text-color-white;
+ }
+ &-link {
+ font-size: $h5-size;
+ line-height: $h5-height;
+ font-weight: 400;
+ color: $text-color-grey;
+ background: $text-color-white;
+ }
+ &::before {
+ position: absolute;
+ content: "";
+ top: 50%;
+ left: 50%;
+ width: 80%;
+ height: 1px;
+ background: #e6e6e6;
+ @include transform;
+ z-index: -1;
+ }
+ }
+ &__body {
+ &-row {
+ display: flex;
+ align-items: stretch;
+ margin: 0 -20px;
+ }
+ &-image {
+ width: calc(50% - 40px);
+ margin: 0 20px;
+ position: relative;
+ cursor: pointer;
+ a.progressive {
+ position: relative;
+ display: block;
+ overflow: hidden;
+ outline: none;
+ height: 330px;
+ }
+ a.progressive:not(.replace) {
+ cursor: default;
+ }
+ a.progressive img {
+ @include fullImage;
+ }
+ a.progressive img.preview {
+ filter: blur(2vw);
+ transform: scale(1.05);
+ }
+ a.progressive img.reveal {
+ position: absolute;
+ left: 0;
+ top: 0;
+ will-change: transform, opacity;
+ animation: reveal 1s ease-out;
+ }
+ }
+ &-card {
+ position: absolute;
+ top: 210px;
+ left: 30px;
+ width: calc(100% - 60px);
+ border: 1px solid #dcdcdc;
+ }
+ &-column {
+ width: calc(50% - 100px);
+ margin: 0 20px;
+ padding: 15px 30px;
+ border: 1px solid #dcdcdc;
+ .card {
+ padding: 30px 0;
+ border-bottom: 1px solid #dcdcdc;
+ &:nth-last-child(1) {
+ border-bottom: none;
+ }
+ }
+ }
+ }
+}
+
+// event end
+// partner start
+.partner {
+ margin-bottom: 80px;
+ &__title {
+ font-size: $h3-size;
+ line-height: $h3-height;
+ font-weight: 700;
+ color: $text-light-black;
+ margin-bottom: 80px;
+ }
+}
+// partner end
+.popUp {
+ display: none;
+}
+/* progressive image CSS */
+
+@keyframes reveal {
+ 0% {
+ transform: scale(1.05);
+ opacity: 0;
+ }
+ 100% {
+ transform: scale(1);
+ opacity: 1;
+ }
+}
diff --git a/themes/modern2/template/css (old)/components/3-page/news.scss b/themes/modern2/template/css (old)/components/3-page/news.scss
new file mode 100644
index 000000000..f45172ff3
--- /dev/null
+++ b/themes/modern2/template/css (old)/components/3-page/news.scss
@@ -0,0 +1,112 @@
+.news {
+ &__inner {
+ display: flex;
+ align-items: stretch;
+ padding: 80px 0;
+ }
+ &__sidebar {
+ margin-left: 25px;
+ width: calc(30% - 25px);
+ &-title {
+ font-size: $h4-size;
+ line-height: $h4-height;
+ font-weight: 700;
+ text-transform: uppercase;
+ margin-bottom: 20px;
+ color: $text-light-black;
+ }
+ .card {
+ padding: 30px 0;
+ border-bottom: 1px solid #dcdcdc;
+ &__link {
+ height: unset;
+ text-overflow: unset;
+ }
+ }
+ }
+ &__content {
+ width: calc(70% - 25px);
+ margin-right: 25px;
+ &-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ }
+ }
+ &__title {
+ color: $text-black;
+ font-weight: 700;
+ font-size: $h2-size;
+ line-height: $h2-height;
+ }
+ &__date {
+ display: flex;
+ align-items: center;
+ font-size: $h3-size;
+ line-height: $h3-height;
+ color: $text-color-grey;
+ font-weight: 400;
+ margin-bottom: 20px;
+ svg {
+ margin: 0 5px;
+ }
+ }
+ &__image {
+ width: 100%;
+ margin: 25px 0;
+ display: block;
+ img {
+ width: 100%;
+ height: auto;
+ }
+ }
+ &__body {
+ p {
+ font-size: $p-size;
+ line-height: $p-height;
+ margin-bottom: 20px;
+ img {
+ width: 90%;
+ margin: 30px auto;
+ display: block;
+ height: auto;
+ }
+ strong {
+ a {
+ color: #4285f4;
+ }
+ }
+ }
+ img {
+ width: 90%;
+ margin: 30px auto;
+ display: block;
+ height: auto;
+ }
+ }
+ &__footer {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ &-social {
+ display: flex;
+ align-items: center;
+ &-link {
+ margin-right: 20px;
+ fill: $main-color;
+ svg {
+ color: $main-color;
+ }
+ }
+ .footer__social-link {
+ fill: $main-color;
+ }
+ }
+ &-name {
+ font-size: $h2-size;
+ line-height: $h2-height;
+ font-weight: 700;
+ color: $text-light-black;
+ }
+ }
+}
diff --git a/themes/modern2/template/css (old)/components/3-page/terms.scss b/themes/modern2/template/css (old)/components/3-page/terms.scss
new file mode 100644
index 000000000..1619a0ebf
--- /dev/null
+++ b/themes/modern2/template/css (old)/components/3-page/terms.scss
@@ -0,0 +1,17 @@
+.terms {
+ padding: 80px 0;
+ &__title {
+ font-size: $h3-size;
+ line-height: $h3-height;
+ font-weight: 700;
+ color: $text-black;
+ margin-bottom: 40px;
+ }
+ &__para {
+ font-size: $p-size;
+ line-height: $p-height;
+ font-weight: 400;
+ color: $text-black;
+ margin-bottom: 40px;
+ }
+}
diff --git a/themes/modern2/template/css (old)/main.css b/themes/modern2/template/css (old)/main.css
new file mode 100644
index 000000000..b2fe4a49e
--- /dev/null
+++ b/themes/modern2/template/css (old)/main.css
@@ -0,0 +1,2820 @@
+@charset "UTF-8";
+/***
+
+====================================================================
+ Reset
+====================================================================
+
+***/
+* {
+ margin: 0px;
+ padding: 0px;
+ border: none;
+ outline: none;
+}
+
+button {
+ outline: none;
+}
+
+button:focus {
+ outline: none;
+}
+
+button:focus {
+ outline: none;
+}
+
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+/***
+ ====================================================================
+ Global Settings
+ ====================================================================
+ ***/
+body {
+ font-family: "Roboto", sans-serif;
+ font-size: 14px;
+ color: #000;
+ line-height: 1.7em;
+ font-weight: 400;
+ background: #fff;
+ -webkit-font-smoothing: antialiased;
+ -moz-font-smoothing: antialiased;
+}
+
+a {
+ text-decoration: none;
+ cursor: pointer;
+ color: #000;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ position: relative;
+ font-weight: normal;
+ margin: 0px;
+ background: none;
+ line-height: 1.6em;
+}
+
+/* Typography */
+h1 {
+ font-size: 4em;
+}
+
+h2 {
+ font-size: 40px;
+}
+
+h3 {
+ font-size: 34px;
+}
+
+h4 {
+ font-size: 22px;
+}
+
+h5 {
+ font-size: 20px;
+}
+
+h6 {
+ font-size: 18px;
+}
+
+p {
+ position: relative;
+ line-height: 1.8em;
+}
+
+.auto__container {
+ position: relative;
+ max-width: 1440px;
+ padding: 0px;
+ margin: 0 auto;
+}
+
+ul,
+li {
+ list-style: none;
+ padding: 0px;
+ margin: 0px;
+}
+
+.mr-top-bot {
+ margin: 80px 0;
+}
+
+.header {
+ position: relative;
+}
+.header .mobileSearch {
+ display: none;
+}
+.header::before {
+ position: absolute;
+ content: "";
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 4px;
+ background: #00822c;
+}
+.header__inner {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 20px 0;
+}
+.header__logo {
+ width: 120px;
+}
+.header__search {
+ display: flex;
+ align-items: center;
+}
+.header__search-input {
+ width: 350px;
+ position: relative;
+}
+.header__search-input input {
+ width: calc(100% - 60px);
+ font-family: "roboto";
+ padding: 14px 40px 14px 20px;
+ font-size: 16px;
+ line-height: 16px;
+ color: rgba(36, 36, 36, 0.3);
+ border-radius: 5px;
+ border: 1px solid #c9c9c9;
+}
+.header__search-input input::placeholder {
+ font-family: "roboto";
+ font-size: 16px;
+ line-height: 16px;
+ color: rgba(36, 36, 36, 0.3);
+}
+.header__search-btn {
+ position: absolute;
+ top: 50%;
+ right: 20px;
+ transform: translateY(-50%);
+ -moz-ransform: translateY(-50%);
+ -o-transform: translateY(-50%);
+ -ms-transform: translateY(-50%);
+ -webkit-transform: translateY(-50%);
+}
+.header__search-btn svg {
+ width: 18px;
+ height: 18px;
+ fill: #242424;
+}
+.header__slogan {
+ font-family: "Oswald", sans-serif;
+ color: #fd4c24;
+ font-weight: 700;
+ font-size: 40px;
+ line-height: 40px;
+ margin-right: 20px;
+ letter-spacing: -1.5px;
+}
+.header .hamBtn {
+ display: none;
+}
+
+.searchModal {
+ display: none;
+}
+
+.footer {
+ background: #242424;
+ padding: 30px 0;
+}
+.footer__inner {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+.footer__copyright {
+ font-size: 14px;
+ line-height: 20px;
+ font-weight: 400;
+ color: #ffffff;
+}
+.footer__copyright a {
+ color: #ffffff;
+ margin-left: 10px;
+}
+.footer__social {
+ display: flex;
+ align-items: center;
+}
+.footer__social-link {
+ fill: #ffffff;
+ margin: 0 10px;
+ transition: all 0.2s ease-in-out 0s;
+ -moz-transition: all 0.2s ease-in-out 0s;
+}
+.footer__social-link:hover {
+ fill: #fd4c24;
+}
+
+.subheader {
+ background: #242424;
+ position: relative;
+ z-index: 2;
+}
+.subheader .close {
+ display: none;
+}
+.subheader__inner {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+.subheader .nav__inner {
+ display: flex;
+ align-items: center;
+}
+.subheader .nav__inner-link {
+ font-size: 14px;
+ line-height: 20px;
+ font-weight: 400;
+ color: #ffffff;
+ margin-right: 40px;
+ padding: 15px 0;
+ position: relative;
+ z-index: 1;
+}
+.subheader .nav__inner-link::before {
+ position: absolute;
+ bottom: 0;
+ width: 0;
+ height: 4px;
+ background: #fd4c24;
+ content: "";
+ transition: all 0.2s ease-in-out 0s;
+ -moz-transition: all 0.2s ease-in-out 0s;
+}
+.subheader .nav__inner-link:hover::before {
+ width: 100%;
+}
+.subheader .nav__inner-link.active::before {
+ width: 100%;
+}
+.subheader .nav__inner-link .dropDown {
+ position: absolute;
+ top: 100%;
+ left: 0;
+ width: 200px;
+ max-height: 0;
+ overflow: auto;
+ z-index: 2;
+ background: #ffffff;
+}
+.subheader .nav__inner-link .dropDown__link {
+ display: block;
+ padding: 15px;
+ font-size: 14px;
+ line-height: 20px;
+ font-weight: 400;
+ color: #242424;
+ transition: all 0.2s ease-in-out 0s;
+ -moz-transition: all 0.2s ease-in-out 0s;
+}
+.subheader .nav__inner-link .dropDown__link:hover {
+ background: #f7f7f7;
+}
+.subheader .nav__inner-link:hover .dropDown {
+ max-height: 2000px;
+}
+.subheader .language {
+ display: flex;
+ align-items: center;
+}
+.subheader .language__link {
+ width: 30px;
+ height: 20px;
+ margin-left: 20px;
+}
+
+/* Slider */
+.slick-slider {
+ position: relative;
+ display: block;
+ box-sizing: border-box;
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ user-select: none;
+ touch-action: pan-y;
+ -webkit-tap-highlight-color: transparent;
+}
+
+.slick-list {
+ position: relative;
+ overflow: hidden;
+ display: block;
+ margin: 0;
+ padding: 0;
+}
+.slick-list:focus {
+ outline: none;
+}
+.slick-list.dragging {
+ cursor: pointer;
+ cursor: hand;
+}
+
+.slick-slider .slick-track,
+.slick-slider .slick-list {
+ transform: translate3d(0, 0, 0);
+}
+
+.slick-track {
+ position: relative;
+ left: 0;
+ top: 0;
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+}
+.slick-track:before, .slick-track:after {
+ content: "";
+ display: table;
+}
+.slick-track:after {
+ clear: both;
+}
+.slick-loading .slick-track {
+ visibility: hidden;
+}
+
+.slick-slide {
+ float: left;
+ height: 100%;
+ min-height: 1px;
+ display: none;
+}
+[dir=rtl] .slick-slide {
+ float: right;
+}
+.slick-slide img {
+ display: block;
+}
+.slick-slide.slick-loading img {
+ display: none;
+}
+.slick-slide.dragging img {
+ pointer-events: none;
+}
+.slick-initialized .slick-slide {
+ display: block;
+}
+.slick-loading .slick-slide {
+ visibility: hidden;
+}
+.slick-vertical .slick-slide {
+ display: block;
+ height: auto;
+ border: 1px solid transparent;
+}
+
+.slick-arrow.slick-hidden {
+ display: none;
+}
+
+/* Slider */
+.slick-loading .slick-list {
+ background: #fff url("./ajax-loader.gif") center center no-repeat;
+}
+
+/* Icons */
+/* Arrows */
+.slick-prev,
+.slick-next {
+ position: absolute;
+ display: block;
+ height: 20px;
+ width: 20px;
+ line-height: 0px;
+ font-size: 0px;
+ cursor: pointer;
+ background: transparent;
+ color: transparent;
+ top: 50%;
+ transform: translate(0, -50%);
+ padding: 0;
+ border: none;
+ outline: none;
+}
+.slick-prev:hover, .slick-prev:focus,
+.slick-next:hover,
+.slick-next:focus {
+ outline: none;
+ background: transparent;
+ color: transparent;
+}
+.slick-prev:hover:before, .slick-prev:focus:before,
+.slick-next:hover:before,
+.slick-next:focus:before {
+ opacity: 1;
+}
+.slick-prev.slick-disabled:before,
+.slick-next.slick-disabled:before {
+ opacity: 0.25;
+}
+.slick-prev:before,
+.slick-next:before {
+ font-family: "slick";
+ font-size: 20px;
+ line-height: 1;
+ color: white;
+ opacity: 0.75;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+.slick-prev {
+ left: -25px;
+}
+[dir=rtl] .slick-prev {
+ left: auto;
+ right: -25px;
+}
+.slick-prev:before {
+ content: "←";
+}
+[dir=rtl] .slick-prev:before {
+ content: "→";
+}
+
+.slick-next {
+ right: -25px;
+}
+[dir=rtl] .slick-next {
+ left: -25px;
+ right: auto;
+}
+.slick-next:before {
+ content: "→";
+}
+[dir=rtl] .slick-next:before {
+ content: "←";
+}
+
+/* Dots */
+.slick-dotted.slick-slider {
+ margin-bottom: 30px;
+}
+
+.slick-dots {
+ position: absolute;
+ bottom: -25px;
+ list-style: none;
+ display: block;
+ text-align: center;
+ padding: 0;
+ margin: 0;
+ width: 100%;
+}
+.slick-dots li {
+ position: relative;
+ display: inline-block;
+ height: 20px;
+ width: 20px;
+ margin: 0 5px;
+ padding: 0;
+ cursor: pointer;
+}
+.slick-dots li button {
+ border: 0;
+ background: transparent;
+ display: block;
+ height: 20px;
+ width: 20px;
+ outline: none;
+ line-height: 0px;
+ font-size: 0px;
+ color: transparent;
+ padding: 5px;
+ cursor: pointer;
+}
+.slick-dots li button:hover, .slick-dots li button:focus {
+ outline: none;
+}
+.slick-dots li button:hover:before, .slick-dots li button:focus:before {
+ opacity: 1;
+}
+.slick-dots li button:before {
+ position: absolute;
+ top: 0;
+ left: 0;
+ content: "•";
+ width: 20px;
+ height: 20px;
+ font-family: "slick";
+ font-size: 6px;
+ line-height: 20px;
+ text-align: center;
+ color: black;
+ opacity: 0.25;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+.slick-dots li.slick-active button:before {
+ color: black;
+ opacity: 0.75;
+}
+
+.partnerSlider {
+ position: relative;
+}
+.partnerSlider__item {
+ margin-right: 5px;
+ padding: 30px;
+ border-right: 5px;
+ border: 1px solid #e6e6e6;
+ position: relative;
+}
+.partnerSlider__item img {
+ width: 90%;
+ margin: 0 auto;
+}
+.partnerSlider .p1 {
+ cursor: pointer;
+ position: absolute;
+ top: 50%;
+ left: 0;
+ transform: translateY(-50%);
+ -moz-ransform: translateY(-50%);
+ -o-transform: translateY(-50%);
+ -ms-transform: translateY(-50%);
+ -webkit-transform: translateY(-50%);
+ width: 30px;
+ height: 40px;
+ background: rgba(0, 0, 0, 0.5);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 1;
+}
+.partnerSlider .n1 {
+ cursor: pointer;
+ position: absolute;
+ z-index: 1;
+ top: 50%;
+ right: 5px;
+ transform: translateY(-50%);
+ -moz-ransform: translateY(-50%);
+ -o-transform: translateY(-50%);
+ -ms-transform: translateY(-50%);
+ -webkit-transform: translateY(-50%);
+ width: 30px;
+ height: 40px;
+ background: rgba(0, 0, 0, 0.5);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.card {
+ position: relative;
+ padding: 25px;
+ background: #ffffff;
+}
+.card__header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ position: relative;
+}
+.card__header-category {
+ padding: 5px 10px;
+ background: #fd4c24;
+ font-size: 14px;
+ line-height: 20px;
+ color: #ffffff;
+ font-weight: 700;
+ max-width: 115px;
+ text-align: center;
+ margin-bottom: 10px;
+}
+.card__header-view {
+ display: flex;
+ align-items: center;
+ color: #a2a2a2;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 15px;
+}
+.card__header-view svg {
+ margin-right: 5px;
+ stroke: #a2a2a2;
+ width: 21px;
+ height: 14px;
+}
+.card__header-date {
+ display: flex;
+ align-items: center;
+ font-size: 12px;
+ line-height: 20px;
+ color: #a2a2a2;
+ font-weight: 400;
+}
+.card__header-date svg {
+ margin: 0 5px;
+ width: 4px;
+ height: 4px;
+}
+.card__link {
+ color: #000;
+ font-weight: 500;
+ font-size: 15px;
+ line-height: 20px;
+ margin: 10px 0 0 0;
+ display: block;
+ height: 60px;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ -webkit-line-clamp: 3;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+.card__box {
+ padding: 30px 0;
+}
+.card__box:last-child {
+ border-top: 1px solid #a2a2a2;
+ padding: 30px 0 0 0;
+}
+.card__box:nth-child(2) {
+ padding: 0 0 30px 0;
+}
+.card.other {
+ padding: 30px;
+ border-bottom: 1px solid #e6e6e6;
+}
+.card.other .card__header-category {
+ background: #242424;
+ color: #ffffff;
+}
+.card.other:last-child {
+ border-bottom: none;
+}
+
+.calendar__outer {
+ width: 100%;
+}
+.calendar__outer input {
+ width: 100%;
+ display: none;
+}
+
+.lightpick {
+ position: absolute;
+ z-index: 99999;
+ border-radius: 4px;
+ color: #000;
+ font-family: system-ui, Roboto, Helvetica, Arial, sans-serif;
+ line-height: 1.125em;
+ width: 100%;
+ margin-bottom: 80px;
+}
+.lightpick--inlined {
+ position: relative;
+ display: inline-block;
+}
+.lightpick, .lightpick *, .lightpick::after, .lightpick::before {
+ box-sizing: border-box;
+}
+.lightpick.is-hidden {
+ display: none;
+}
+.lightpick__months {
+ display: grid;
+ background-color: #eee;
+ grid-template-columns: auto;
+ grid-gap: 1px;
+}
+.lightpick--2-columns .lightpick__months {
+ grid-template-columns: auto auto;
+}
+
+.lightpick--3-columns .lightpick__months {
+ grid-template-columns: auto auto auto;
+}
+
+.lightpick--4-columns .lightpick__months {
+ grid-template-columns: auto auto auto auto;
+}
+
+.lightpick--5-columns .lightpick__months {
+ grid-template-columns: auto auto auto auto auto;
+}
+
+.lightpick__month {
+ width: 100%;
+ background-color: #fff;
+}
+.lightpick__month-title-bar {
+ display: flex;
+ margin-bottom: 4px;
+ justify-content: space-between;
+ text-align: center;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border: 1px solid #242424;
+ position: relative;
+ padding: 10px 0;
+}
+.lightpick__month-title {
+ margin-top: 4px;
+ margin-bottom: 4px;
+ margin-left: 4px;
+ font-size: 16px;
+ font-weight: 700;
+ line-height: 24px;
+ cursor: default;
+ padding: 0 4px;
+ border-radius: 4px;
+}
+.lightpick__month-title > .lightpick__select {
+ border: none;
+ background-color: transparent;
+ outline: none;
+ -webkit-appearance: none;
+ appearance: none;
+}
+.lightpick__month-title > .lightpick__select:disabled {
+ color: #333;
+}
+.lightpick__month-title > .lightpick__select-months {
+ font-weight: bold;
+ font-size: 1em;
+ margin-right: 0;
+ direction: ltr;
+}
+.lightpick__toolbar {
+ display: flex;
+ justify-content: space-between;
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ -webkit-transform: translateY(-50%);
+ -moz-transform: translateY(-50%);
+ -ms-transform: translateY(-50%);
+ -o-transform: translateY(-50%);
+ left: 0;
+ width: 100%;
+}
+.lightpick__previous-action, .lightpick__next-action, .lightpick__close-action {
+ display: flex;
+ width: 32px;
+ height: 32px;
+ outline: none;
+ border: none;
+ background: none;
+ justify-content: center;
+ align-items: center;
+}
+.lightpick__previous-action:active, .lightpick__next-action:active, .lightpick__close-action:active {
+ color: inherit;
+}
+.lightpick__previous-action, .lightpick__next-action {
+ font-size: 20px;
+ margin: 0 5px;
+}
+.lightpick__close-action {
+ font-size: 18px;
+}
+.lightpick__days-of-the-week {
+ display: grid;
+ grid-template-columns: repeat(7, 1fr);
+}
+.lightpick__day-of-the-week {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 20px;
+ line-height: 24px;
+ font-weight: 700;
+ padding: 10px 0;
+}
+.lightpick__days {
+ display: grid;
+ grid-template-columns: repeat(7, 1fr);
+}
+.lightpick__day {
+ display: flex;
+ height: 40px;
+ padding: 10px 0;
+ background-position: center center;
+ background-size: contain;
+ background-repeat: no-repeat;
+ font-size: 17px;
+ line-height: 21px;
+ justify-content: center;
+ align-items: center;
+ cursor: default;
+}
+.lightpick__day.is-today {
+ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle fill='rgba(220, 50, 47, 0.5)' cx='16' cy='16' r='16'/%3E%3C/svg%3E");
+ background-size: 18.8% auto;
+ background-position: center bottom;
+ color: #dc322f;
+}
+.lightpick__day:not(.is-disabled):hover {
+ background-size: contain;
+ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle fill='%23e0e0e0' cx='16' cy='16' r='16'/%3E%3C/svg%3E");
+}
+.lightpick__day.is-disabled {
+ opacity: 0.38;
+ pointer-events: none;
+}
+.lightpick__day.is-disabled.is-forward-selected {
+ opacity: 1;
+}
+.lightpick__day.is-disabled.is-forward-selected:not(.is-start-date) {
+ background-color: rgba(253, 76, 36, 0.1);
+ background-image: none;
+}
+.lightpick__day.disabled-tooltip {
+ pointer-events: auto;
+}
+.lightpick__day.is-previous-month, .lightpick__day.is-next-month {
+ opacity: 0.38;
+}
+.lightpick__day.lightpick__day.is-in-range:not(.is-disabled) {
+ opacity: 1;
+}
+.lightpick__day.is-in-range {
+ border-radius: 0;
+ background-color: rgba(253, 76, 36, 0.1);
+ background-image: none;
+}
+.lightpick__day.is-in-range:hover {
+ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle fill='rgba(38, 139, 210, 0.5)' cx='16' cy='16' r='16'/%3E%3C/svg%3E");
+}
+.lightpick__day.is-start-date.is-in-range, .lightpick__day.is-end-date.is-in-range.is-flipped {
+ border-top-left-radius: 50%;
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ border-bottom-left-radius: 50%;
+ background-color: #fd4c24;
+ background-image: none;
+}
+.lightpick__day.is-end-date.is-in-range, .lightpick__day.is-start-date.is-in-range.is-flipped {
+ border-top-left-radius: 0;
+ border-top-right-radius: 50%;
+ border-bottom-right-radius: 50%;
+ border-bottom-left-radius: 0;
+ background-color: #fd4c24;
+ background-image: none;
+}
+.lightpick__day.is-start-date.is-end-date {
+ background-color: transparent;
+ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle fill='%23fd4c24' cx='16' cy='16' r='16'/%3E%3C/svg%3E");
+}
+.lightpick__day.is-start-date, .lightpick__day.is-end-date, .lightpick__day.is-start-date:hover, .lightpick__day.is-end-date:hover {
+ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle fill='%23fd4c24' cx='16' cy='16' r='16'/%3E%3C/svg%3E");
+ background-size: auto;
+ background-position: center;
+ color: #fff;
+ font-weight: bold;
+}
+.lightpick__tooltip {
+ position: absolute;
+ margin-top: -4px;
+ padding: 4px 8px;
+ border-radius: 4px;
+ background-color: #fff;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
+ white-space: nowrap;
+ font-size: 11px;
+ pointer-events: none;
+}
+.lightpick__tooltip::before {
+ position: absolute;
+ bottom: -5px;
+ left: calc(50% - 5px);
+ border-top: 5px solid rgba(0, 0, 0, 0.12);
+ border-right: 5px solid transparent;
+ border-left: 5px solid transparent;
+ content: "";
+}
+.lightpick__tooltip::after {
+ position: absolute;
+ bottom: -4px;
+ left: calc(50% - 4px);
+ border-top: 4px solid #fff;
+ border-right: 4px solid transparent;
+ border-left: 4px solid transparent;
+ content: "";
+}
+.lightpick__footer {
+ display: flex;
+ justify-content: space-between;
+}
+.lightpick__reset-action, .lightpick__apply-action {
+ border-radius: 5px;
+ font-size: 12px;
+ border: none;
+}
+.lightpick__reset-action {
+ color: #fff;
+ background-color: #aeacad;
+}
+.lightpick__apply-action {
+ color: #fff;
+ background-color: #2495f3;
+}
+
+.newsSlider__outer {
+ position: relative;
+ overflow: hidden;
+}
+.newsSlider__outer .p2 {
+ cursor: pointer;
+ position: absolute;
+ top: 50%;
+ left: 0;
+ transform: translateY(-50%);
+ -moz-ransform: translateY(-50%);
+ -o-transform: translateY(-50%);
+ -ms-transform: translateY(-50%);
+ -webkit-transform: translateY(-50%);
+ width: 30px;
+ height: 40px;
+ background: rgba(0, 0, 0, 0.5);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 1;
+}
+.newsSlider__outer .n2 {
+ cursor: pointer;
+ position: absolute;
+ z-index: 1;
+ top: 50%;
+ right: 0;
+ transform: translateY(-50%);
+ -moz-ransform: translateY(-50%);
+ -o-transform: translateY(-50%);
+ -ms-transform: translateY(-50%);
+ -webkit-transform: translateY(-50%);
+ width: 30px;
+ height: 40px;
+ background: rgba(0, 0, 0, 0.5);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+.newsSlider .newsSlider__item {
+ position: relative;
+ height: 320px;
+}
+.newsSlider .newsSlider__item img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ -o-object-fit: cover;
+}
+.newsSlider .newsSlider__item::before {
+ position: absolute;
+ content: "";
+ top: 5px;
+ left: 5px;
+ width: calc(100% - 10px);
+ height: calc(100% - 10px);
+ background: black;
+ background: linear-gradient(0deg, black 0%, rgba(0, 0, 0, 0) 100%);
+ z-index: 1;
+}
+.newsSlider .newsSlider__item-content {
+ flex-direction: column;
+ justify-content: space-between;
+ position: absolute;
+ left: 30px;
+ top: 30px;
+ width: calc(100% - 60px);
+ z-index: 2;
+ height: calc(100% - 60px);
+ display: flex;
+}
+.newsSlider .newsSlider__item-content-date {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 8px 12px;
+ background: #fd4c24;
+ font-size: 14px;
+ line-height: 18px;
+ font-weight: 400;
+ max-width: 145px;
+ color: #ffffff;
+ margin-bottom: 10px;
+}
+.newsSlider .newsSlider__item-content-date svg {
+ margin: 0 4px;
+ width: 4px;
+ height: 4px;
+ fill: #ffffff;
+}
+.newsSlider .newsSlider__item-content-link {
+ color: #ffffff;
+ font-size: 16px;
+ line-height: 25px;
+ font-weight: 700;
+ display: block;
+}
+
+.slick-slider {
+ margin: 0 -10px;
+}
+
+.slick-slide {
+ padding: 5px;
+}
+
+.swiper-container {
+ width: 100%;
+ height: 100%;
+ position: relative;
+}
+.swiper-container .p3 {
+ cursor: pointer;
+ position: absolute;
+ top: 50%;
+ left: 0;
+ transform: translateY(-50%);
+ -moz-ransform: translateY(-50%);
+ -o-transform: translateY(-50%);
+ -ms-transform: translateY(-50%);
+ -webkit-transform: translateY(-50%);
+ width: 40px;
+ height: 60px;
+ background: rgba(0, 0, 0, 0.5);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 1;
+}
+.swiper-container .n3 {
+ cursor: pointer;
+ position: absolute;
+ z-index: 1;
+ top: 50%;
+ right: 0;
+ transform: translateY(-50%);
+ -moz-ransform: translateY(-50%);
+ -o-transform: translateY(-50%);
+ -ms-transform: translateY(-50%);
+ -webkit-transform: translateY(-50%);
+ width: 40px;
+ height: 60px;
+ background: rgba(0, 0, 0, 0.5);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+.swiper-container .slick-list {
+ padding: 0 33.3% 0 0;
+}
+
+.swiper-slide {
+ text-align: center;
+ font-size: 18px;
+ height: 520px;
+ /* Center slide t ext vertically */
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ overflow: hidden;
+ transition: all 0.2s ease-in-out 0s;
+ -moz-transition: all 0.2s ease-in-out 0s;
+}
+.swiper-slide-image {
+ width: 100%;
+ height: 100%;
+ transform-origin: 0% 50%;
+ position: relative;
+}
+.swiper-slide-image picture {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+}
+.swiper-slide-image picture img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ -o-object-fit: cover;
+}
+.swiper-slide-content {
+ position: absolute;
+ left: 0;
+ bottom: 0;
+ display: none;
+ width: 100%;
+ background: black;
+ background: linear-gradient(0deg, black 0%, rgba(0, 0, 0, 0.0228466387) 100%);
+ padding: 50px 40px;
+}
+.swiper-slide-content-date {
+ display: flex;
+ align-items: center;
+ justify-content: flex-start;
+ font-size: 14px;
+ line-height: 18px;
+ font-weight: 400;
+ color: #ffffff;
+ margin-bottom: 10px;
+}
+.swiper-slide-content-date svg {
+ margin: 0 4px;
+ width: 4px;
+ height: 4px;
+ fill: #ffffff;
+}
+.swiper-slide-content-footer {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+.swiper-slide-content-link {
+ color: #ffffff;
+ font-size: 20px;
+ line-height: 30px;
+ height: 60px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ font-weight: 700;
+ display: block;
+ text-align: left;
+ width: 75%;
+}
+.swiper-slide-content-category {
+ font-size: 14px;
+ line-height: 18px;
+ font-weight: 700;
+ color: #ffffff;
+ padding: 8px 16px;
+ background: #fd4c24;
+}
+.swiper-slide.slick-active .swiper-slide-content {
+ display: block;
+ animation: myAnim 1s ease 0s 1 normal forwards;
+ animation-delay: 0.5s;
+}
+
+.copy {
+ position: absolute;
+ bottom: 15px;
+ left: 0;
+ right: 0;
+ text-align: center;
+ color: white;
+ letter-spacing: 0.06em;
+}
+
+.swiper-slide img {
+ display: block;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+
+@keyframes myAnim {
+ 0% {
+ opacity: 0;
+ transform: translateY(250px);
+ }
+ 100% {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+.marquee {
+ width: 100%;
+ margin: 10px 0;
+ overflow: hidden;
+ position: relative;
+ height: 50px;
+ background: #00822c;
+}
+.marquee__outer {
+ position: relative;
+}
+.marquee__item {
+ margin: 0 50px;
+}
+.marquee__item.slick-slide {
+ padding: 0;
+}
+.marquee__item a {
+ display: flex;
+ align-items: center;
+ height: 50px;
+ color: #fff;
+ font-size: 16px;
+ line-height: 20px;
+ font-weight: 400;
+}
+.marquee__link {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 120px;
+ height: 100%;
+ background: #ee4037;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 1;
+ font-size: 14px;
+ color: #ffffff;
+ line-height: 16px;
+ font-weight: 700;
+ text-transform: uppercase;
+}
+.marquee__link::before {
+ -webkit-clip-path: polygon(100% 46%, 0 0, 0 100%);
+ clip-path: polygon(100% 46%, 0 0, 0 100%);
+ background: #ee4037;
+ position: absolute;
+ top: 0;
+ left: 100%;
+ height: 100%;
+ width: 25px;
+ content: "";
+}
+
+.hero__inner {
+ overflow: hidden;
+}
+
+@keyframes marquee {
+ 0% {
+ left: 0;
+ }
+ 100% {
+ left: -100%;
+ }
+}
+/* Make it move */
+@keyframes marquee {
+ 0% {
+ transform: translate(0, 0);
+ }
+ 100% {
+ transform: translate(-100%, 0);
+ }
+}
+.banner {
+ margin: 80px 0;
+}
+.banner__inner {
+ width: 100%;
+ height: auto;
+}
+.banner__inner img {
+ width: 100%;
+}
+
+.rek__item {
+ display: block;
+}
+.rek__item img {
+ width: 100%;
+}
+
+.main {
+ margin-top: 30px;
+}
+.main__inner {
+ display: flex;
+ align-items: stretch;
+}
+.main__content {
+ width: calc(70% - 25px);
+ margin-right: 25px;
+}
+.main__body-row {
+ margin: 0 -20px 50px -20px;
+ display: flex;
+ align-items: stretch;
+ flex-wrap: wrap;
+}
+.main__body-column {
+ width: calc(50% - 42px);
+ margin: 0 20px;
+}
+.main__body-column a.progressive {
+ position: relative;
+ display: block;
+ overflow: hidden;
+ outline: none;
+ height: 300px;
+}
+.main__body-column a.progressive:not(.replace) {
+ cursor: default;
+}
+.main__body-column a.progressive img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ -o-object-fit: cover;
+}
+.main__body-column a.progressive img.preview {
+ filter: blur(2vw);
+ transform: scale(1.05);
+}
+.main__body-column a.progressive img.reveal {
+ position: absolute;
+ left: 0;
+ top: 0;
+ will-change: transform, opacity;
+ animation: reveal 1s ease-out;
+}
+.main__body-column.border {
+ border: 1px solid #dcdcdc;
+}
+.main__body-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 40px;
+ position: relative;
+}
+.main__body-header::before {
+ position: absolute;
+ content: "";
+ top: 50%;
+ left: 50%;
+ width: 80%;
+ height: 1px;
+ background: #e6e6e6;
+ transform: translate(-50%, -50%);
+ -moz-ransform: translate(-50%, -50%);
+ -o-transform: translate(-50%, -50%);
+ -ms-transform: translate(-50%, -50%);
+ -webkit-transform: translate(-50%, -50%);
+ z-index: -1;
+}
+.main__body-header-title {
+ font-size: 20px;
+ line-height: 24px;
+ font-weight: 700;
+ color: #242424;
+ background: #ffffff;
+}
+.main__body-header-link {
+ font-size: 14px;
+ line-height: 20px;
+ font-weight: 400;
+ color: #a2a2a2;
+ background: #ffffff;
+ display: block;
+}
+.main__body-card {
+ margin: -100px 30px 0 30px;
+ border: 1px solid #dcdcdc;
+}
+.main__body-card .card {
+ border-bottom: 1px solid #dcdcdc;
+}
+.main__body-card .card:last-child {
+ border-bottom: none;
+}
+.main__body-title {
+ font-size: 20px;
+ line-height: 24px;
+ font-weight: 700;
+ color: #242424;
+ margin-bottom: 20px;
+}
+.main__banner {
+ width: 100%;
+ height: auto;
+ margin-bottom: 40px;
+}
+.main__banner img {
+ width: 100%;
+}
+.main__sidebar {
+ margin-left: 25px;
+ width: calc(30% - 25px);
+}
+.main__sidebar-adv {
+ margin-bottom: 40px;
+}
+.main__sidebar-title {
+ font-size: 16px;
+ line-height: 20px;
+ font-weight: 700;
+ text-transform: uppercase;
+ margin-bottom: 80px;
+ color: #242424;
+}
+.main__sidebar .card.other {
+ padding: 0 0 30px 0;
+}
+.main__sidebar .card__link {
+ height: unset;
+ text-overflow: unset;
+}
+.main__sidebar a.progressive {
+ position: relative;
+ display: block;
+ overflow: hidden;
+ outline: none;
+ margin-bottom: 80px;
+}
+.main__sidebar a.progressive:not(.replace) {
+ cursor: default;
+}
+.main__sidebar a.progressive img {
+ width: 100%;
+ height: auto;
+}
+.main__sidebar a.progressive img.preview {
+ filter: blur(2vw);
+ transform: scale(1.05);
+}
+.main__sidebar a.progressive img.reveal {
+ position: absolute;
+ left: 0;
+ top: 0;
+ will-change: transform, opacity;
+ animation: reveal 1s ease-out;
+}
+.main__sidebar-tag {
+ display: flex;
+ align-items: center;
+ flex-wrap: wrap;
+ margin: -30px -5px 80px -5px;
+}
+.main__sidebar-tag-link {
+ padding: 8px 9px;
+ border-right: 5px;
+ background: #f7f7f6;
+ font-size: 16px;
+ line-height: 16px;
+ color: #242424;
+ margin: 5px;
+}
+
+.banner__mobile {
+ display: none;
+}
+
+.event {
+ margin: 50px 0 80px;
+}
+.event__header {
+ margin-bottom: 40px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ position: relative;
+}
+.event__header-title {
+ font-size: 20px;
+ line-height: 24px;
+ font-weight: 700;
+ color: #242424;
+ background: #ffffff;
+}
+.event__header-link {
+ font-size: 14px;
+ line-height: 20px;
+ font-weight: 400;
+ color: #a2a2a2;
+ background: #ffffff;
+}
+.event__header::before {
+ position: absolute;
+ content: "";
+ top: 50%;
+ left: 50%;
+ width: 80%;
+ height: 1px;
+ background: #e6e6e6;
+ transform: translate(-50%, -50%);
+ -moz-ransform: translate(-50%, -50%);
+ -o-transform: translate(-50%, -50%);
+ -ms-transform: translate(-50%, -50%);
+ -webkit-transform: translate(-50%, -50%);
+ z-index: -1;
+}
+.event__body-row {
+ display: flex;
+ align-items: stretch;
+ margin: 0 -20px;
+}
+.event__body-image {
+ width: calc(50% - 40px);
+ margin: 0 20px;
+ position: relative;
+ cursor: pointer;
+}
+.event__body-image a.progressive {
+ position: relative;
+ display: block;
+ overflow: hidden;
+ outline: none;
+ height: 330px;
+}
+.event__body-image a.progressive:not(.replace) {
+ cursor: default;
+}
+.event__body-image a.progressive img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ -o-object-fit: cover;
+}
+.event__body-image a.progressive img.preview {
+ filter: blur(2vw);
+ transform: scale(1.05);
+}
+.event__body-image a.progressive img.reveal {
+ position: absolute;
+ left: 0;
+ top: 0;
+ will-change: transform, opacity;
+ animation: reveal 1s ease-out;
+}
+.event__body-card {
+ position: absolute;
+ top: 210px;
+ left: 30px;
+ width: calc(100% - 60px);
+ border: 1px solid #dcdcdc;
+}
+.event__body-column {
+ width: calc(50% - 100px);
+ margin: 0 20px;
+ padding: 15px 30px;
+ border: 1px solid #dcdcdc;
+}
+.event__body-column .card {
+ padding: 30px 0;
+ border-bottom: 1px solid #dcdcdc;
+}
+.event__body-column .card:nth-last-child(1) {
+ border-bottom: none;
+}
+
+.partner {
+ margin-bottom: 80px;
+}
+.partner__title {
+ font-size: 20px;
+ line-height: 24px;
+ font-weight: 700;
+ color: #242424;
+ margin-bottom: 80px;
+}
+
+.popUp {
+ display: none;
+}
+
+/* progressive image CSS */
+@keyframes reveal {
+ 0% {
+ transform: scale(1.05);
+ opacity: 0;
+ }
+ 100% {
+ transform: scale(1);
+ opacity: 1;
+ }
+}
+.heading__title {
+ font-weight: 700;
+ color: #242424;
+ font-size: 20px;
+ line-height: 24px;
+ margin-bottom: 80px;
+}
+.heading__row {
+ display: flex;
+ align-items: center;
+ margin-bottom: 40px;
+}
+.heading__image {
+ width: 40%;
+}
+.heading a.progressive {
+ position: relative;
+ display: block;
+ overflow: hidden;
+ outline: none;
+ height: 320px;
+}
+.heading a.progressive:not(.replace) {
+ cursor: default;
+}
+.heading a.progressive img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ -o-object-fit: cover;
+}
+.heading a.progressive img.preview {
+ filter: blur(2vw);
+ transform: scale(1.05);
+}
+.heading a.progressive img.reveal {
+ position: absolute;
+ left: 0;
+ top: 0;
+ will-change: transform, opacity;
+ animation: reveal 1s ease-out;
+}
+.heading__content {
+ width: calc(60% - 30px);
+ height: calc(100% - 60px);
+ padding: 30px 0 30px 30px;
+}
+.heading__content-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 20px;
+}
+.heading__content-header-view {
+ display: flex;
+ align-items: center;
+ color: #a2a2a2;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 15px;
+}
+.heading__content-header-view svg {
+ margin-right: 5px;
+ stroke: #a2a2a2;
+ width: 21px;
+}
+.heading__content-header-date {
+ display: flex;
+ align-items: center;
+ font-size: 14px;
+ line-height: 20px;
+ color: #ffffff;
+ background: #242424;
+ font-weight: 400;
+ padding: 5px 15px;
+}
+.heading__content-header-date svg {
+ margin: 0 5px;
+}
+.heading__content-body-link {
+ color: #000;
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 20px;
+ margin: 10px 0 0 0;
+ display: block;
+ height: 40px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ margin-bottom: 15px;
+}
+.heading__content-body-para {
+ font-size: 16px;
+ line-height: 20px;
+ font-weight: 400;
+ color: #242424;
+ height: 100px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+.heading__footer {
+ display: flex;
+ align-items: center;
+}
+.heading__footer-page {
+ width: 40px;
+ height: 40px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: #242424;
+}
+.heading__footer-page svg {
+ width: 12px;
+ height: 12px;
+ fill: #ffffff;
+}
+.heading__footer-input {
+ width: 80px;
+ height: 40px;
+ margin: 0 10px;
+}
+.heading__footer-input input {
+ text-align: center;
+ font-size: 20px;
+ line-height: 24px;
+ height: 100%;
+ width: 100%;
+ border-radius: 5px;
+ background: #e6e6e6;
+ font-weight: 400;
+ color: #242424;
+}
+.heading__footer span {
+ font-size: 20px;
+ line-height: 24px;
+ color: #242424;
+ font-weight: 400;
+ margin-left: 10px;
+}
+
+.address__inner {
+ font-size: 20px;
+ line-height: 24px;
+ color: #242424;
+ font-weight: 400;
+ margin-bottom: 25px;
+}
+.address__inner span {
+ font-weight: 700;
+}
+
+.about {
+ padding: 80px 0;
+}
+.about__title {
+ font-size: 22px;
+ line-height: 28px;
+ font-weight: 700;
+ color: #242424;
+}
+.about__para {
+ font-size: 20px;
+ line-height: 38px;
+ font-weight: 400;
+ color: #242424;
+ margin-top: 20px;
+}
+
+.form__title {
+ font-weight: 700;
+ color: #242424;
+ font-size: 20px;
+ line-height: 24px;
+ margin-bottom: 80px;
+}
+.form__row {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 30px;
+}
+.form__input {
+ display: flex;
+ flex-direction: column;
+}
+.form__input label {
+ display: block;
+ font-size: 16px;
+ line-height: 20px;
+ font-weight: 700;
+ color: #242424;
+ margin-bottom: 20px;
+}
+.form__input input {
+ width: calc(100% - 40px);
+ padding: 0 20px;
+ height: 60px;
+ border-radius: 5px;
+ border: 1px solid #c9c9c9;
+ font-size: 16px;
+ line-height: 16px;
+ color: #242424;
+}
+.form__input:last-child {
+ width: calc(50% - 20px);
+ margin-left: 20px;
+}
+.form__input:first-child {
+ width: calc(50% - 20px);
+ margin-right: 20px;
+}
+.form__input-bg {
+ width: 100%;
+}
+.form__input-bg label {
+ display: block;
+ font-size: 16px;
+ line-height: 20px;
+ font-weight: 700;
+ color: #242424;
+ margin-bottom: 20px;
+}
+.form__input-bg input {
+ width: calc(100% - 40px);
+ padding: 0 20px;
+ height: 60px;
+ border-radius: 5px;
+ border: 1px solid #c9c9c9;
+ font-size: 16px;
+ line-height: 16px;
+ color: #242424;
+}
+.form__textarea {
+ width: 100%;
+ margin-top: 30px;
+}
+.form__textarea label {
+ display: block;
+ font-size: 16px;
+ line-height: 20px;
+ font-weight: 700;
+ color: #242424;
+ margin-bottom: 20px;
+}
+.form__textarea textarea {
+ width: calc(100% - 40px);
+ padding: 20px;
+ border-radius: 5px;
+ border: 1px solid #c9c9c9;
+}
+.form__btn {
+ width: 250px;
+ background: #fd4c24;
+ text-align: center;
+ color: #ffffff;
+ font-weight: 700;
+ padding: 14px;
+ border-radius: 5px;
+ font-size: 16px;
+ line-height: 20px;
+ margin-top: 30px;
+}
+
+.main__inner.contact {
+ padding: 80px 0 160px 0;
+}
+
+.news__inner {
+ display: flex;
+ align-items: stretch;
+ padding: 80px 0;
+}
+.news__sidebar {
+ margin-left: 25px;
+ width: calc(30% - 25px);
+}
+.news__sidebar-title {
+ font-size: 16px;
+ line-height: 20px;
+ font-weight: 700;
+ text-transform: uppercase;
+ margin-bottom: 20px;
+ color: #242424;
+}
+.news__sidebar .card {
+ padding: 30px 0;
+ border-bottom: 1px solid #dcdcdc;
+}
+.news__sidebar .card__link {
+ height: unset;
+ text-overflow: unset;
+}
+.news__content {
+ width: calc(70% - 25px);
+ margin-right: 25px;
+}
+.news__content-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+.news__title {
+ color: #000;
+ font-weight: 700;
+ font-size: 22px;
+ line-height: 28px;
+}
+.news__date {
+ display: flex;
+ align-items: center;
+ font-size: 20px;
+ line-height: 24px;
+ color: #a2a2a2;
+ font-weight: 400;
+ margin-bottom: 20px;
+}
+.news__date svg {
+ margin: 0 5px;
+}
+.news__image {
+ width: 100%;
+ margin: 25px 0;
+ display: block;
+}
+.news__image img {
+ width: 100%;
+ height: auto;
+}
+.news__body p {
+ font-size: 16px;
+ line-height: 26px;
+ margin-bottom: 20px;
+}
+.news__body p img {
+ width: 90%;
+ margin: 30px auto;
+ display: block;
+ height: auto;
+}
+.news__body p strong a {
+ color: #4285f4;
+}
+.news__body img {
+ width: 90%;
+ margin: 30px auto;
+ display: block;
+ height: auto;
+}
+.news__footer {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+.news__footer-social {
+ display: flex;
+ align-items: center;
+}
+.news__footer-social-link {
+ margin-right: 20px;
+ fill: #fd4c24;
+}
+.news__footer-social-link svg {
+ color: #fd4c24;
+}
+.news__footer-social .footer__social-link {
+ fill: #fd4c24;
+}
+.news__footer-name {
+ font-size: 22px;
+ line-height: 28px;
+ font-weight: 700;
+ color: #242424;
+}
+
+.terms {
+ padding: 80px 0;
+}
+.terms__title {
+ font-size: 20px;
+ line-height: 24px;
+ font-weight: 700;
+ color: #000;
+ margin-bottom: 40px;
+}
+.terms__para {
+ font-size: 16px;
+ line-height: 26px;
+ font-weight: 400;
+ color: #000;
+ margin-bottom: 40px;
+}
+
+.animaSlider {
+ height: 560px;
+}
+.animaSlider__outer {
+ position: relative;
+}
+.animaSlider__item {
+ height: 560px;
+ padding: 5px;
+}
+.animaSlider__item-image {
+ height: 100%;
+ width: 66.6%;
+ transition: 0.4s linear;
+}
+.animaSlider__item-image img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ -o-object-fit: cover;
+}
+.animaSlider__item.slick-slide {
+ width: 66.6%;
+}
+.animaSlider__item-category {
+ position: absolute;
+ left: 30px;
+ bottom: 30px;
+ background: #fd4c24;
+ color: #ffffff;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 20px;
+ padding: 5px 20px;
+}
+.animaSlider__item.slick-active .animaSlider__item-image {
+ width: 100%;
+}
+.animaSlider .slick-list {
+ padding: 0 33.3% 0 0;
+}
+
+@media (max-width: 1640px) {
+ .auto__container {
+ max-width: 1240px;
+ }
+
+ .swiper-slide {
+ height: 450px;
+ }
+}
+@media (max-width: 1400px) {
+ .swiper-slide-content-link {
+ font-size: 18px;
+ line-height: 25px;
+ height: 50px;
+ }
+
+ .newsSlider__item {
+ height: 280px;
+ }
+
+ .main__banner {
+ margin-bottom: 40px;
+ }
+
+ .swiper-slide {
+ height: 350px;
+ }
+
+ .newsSlider .newsSlider__item {
+ height: 180px;
+ }
+ .newsSlider .newsSlider__item-content-date {
+ max-width: 120px;
+ margin-bottom: 0;
+ }
+
+ .header__slogan {
+ font-size: 28px;
+ line-height: 1;
+ }
+
+ .auto__container {
+ max-width: 1040px;
+ padding: 0 25px;
+ }
+
+ .banner {
+ margin: 40px 0;
+ }
+
+ .slider {
+ height: 450px;
+ }
+ .slider__item {
+ height: 450px;
+ }
+ .slider__nav a {
+ height: 33.3%;
+ }
+ .slider__nav a span {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ .event {
+ margin: 40px 0 70px;
+ }
+ .event__header {
+ margin-bottom: 40px;
+ }
+ .event__body-row {
+ margin: 0 -10px;
+ }
+ .event__body-image {
+ margin: 0 10px;
+ width: calc(50% - 20px);
+ }
+ .event__body-image a.progressive {
+ height: 200px;
+ }
+ .event__body-card {
+ top: 150px;
+ left: 10px;
+ width: calc(100% - 20px);
+ }
+ .event__body-column {
+ margin: 0 10px;
+ width: calc(50% - 30px);
+ padding: 0 15px;
+ }
+ .event__body-column .card {
+ padding: 15px 0;
+ }
+
+ .main__body-header {
+ margin-bottom: 40px;
+ }
+ .main__body-column a.progressive {
+ height: 240px;
+ }
+ .main__body-card {
+ margin: -50px 15px 0 15px;
+ }
+ .main__sidebar-title {
+ margin-bottom: 40px;
+ }
+ .main__sidebar a.progressive {
+ margin-bottom: 40px;
+ }
+ .main__sidebar-tag {
+ margin-bottom: 40px;
+ }
+ .main__sidebar-tag-link {
+ padding: 4px 6px;
+ font-size: 12px;
+ }
+
+ .card {
+ padding: 15px;
+ }
+
+ .partner__title {
+ margin-bottom: 40px;
+ }
+
+ .heading__row {
+ margin-bottom: 40px;
+ }
+ .heading__title {
+ margin-bottom: 40px;
+ }
+ .heading__content {
+ padding: 15px 0 15px 15px;
+ width: calc(60% - 15px);
+ }
+ .heading__content-header {
+ margin-bottom: 15px;
+ }
+ .heading__content-body-para {
+ height: 90px;
+ }
+ .heading a.progressive {
+ height: 250px;
+ }
+
+ .form__title {
+ margin-bottom: 40px;
+ }
+ .form__input label {
+ height: 60px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ .news__inner {
+ padding: 40px 0;
+ }
+ .news__image {
+ margin: 20px 0;
+ }
+ .news__body-row-image {
+ margin: 0 10px;
+ width: calc(50% - 20px);
+ }
+}
+@media (max-width: 1024px) {
+ .newsSlider__item {
+ height: 240px;
+ }
+
+ .swiper-container .slick-list {
+ padding: 0 20% 0 0;
+ }
+
+ .partner__title {
+ margin-bottom: 20px;
+ }
+
+ .swiper-slide-content {
+ padding: 15px;
+ width: calc(100% - 30px);
+ }
+ .swiper-slide-content-category {
+ font-size: 12px;
+ line-height: 14px;
+ padding: 8px 12px;
+ font-weight: 500;
+ }
+ .swiper-slide-content-link {
+ font-size: 14px;
+ line-height: 26px;
+ height: 52px;
+ width: 75%;
+ }
+
+ .slider__nav {
+ display: none;
+ }
+ .slider__inner {
+ width: 100%;
+ margin: 0;
+ }
+
+ .searchModal {
+ display: block;
+ transition: all 0.2s ease-in-out 0s;
+ -moz-transition: all 0.2s ease-in-out 0s;
+ position: fixed;
+ z-index: 1000;
+ top: 0;
+ left: 0;
+ transform: translateY(-100%);
+ -webkit-transform: translateY(-100%);
+ -moz-transform: translateY(-100%);
+ -ms-transform: translateY(-100%);
+ -o-transform: translateY(-100%);
+ background: #fff;
+ width: 100%;
+ height: 100%;
+ }
+ .searchModal__inner {
+ padding: 25px;
+ }
+ .searchModal.active {
+ transform: translateY(0);
+ -webkit-transform: translateY(0);
+ -moz-transform: translateY(0);
+ -ms-transform: translateY(0);
+ -o-transform: translateY(0);
+ }
+ .searchInput {
+ position: relative;
+ max-width: 450px;
+ margin: 0 auto;
+ }
+ .searchInput input {
+ width: calc(100% - 60px);
+ height: 50px;
+ padding: 0 40px 0 20px;
+ display: flex;
+ align-items: center;
+ font-size: 14px;
+ line-height: 1;
+ font-weight: 500;
+ color: #000;
+ border-radius: 5px;
+ border: 1px solid #242424;
+ }
+ .searchInput__btn {
+ position: absolute;
+ right: 15px;
+ background: none;
+ top: 50%;
+ transform: translateY(-50%);
+ -webkit-transform: translateY(-50%);
+ -moz-transform: translateY(-50%);
+ -ms-transform: translateY(-50%);
+ -o-transform: translateY(-50%);
+ }
+ .searchInput__btn svg {
+ width: 24px;
+ height: 24px;
+ fill: #242424;
+ }
+ .searchLogo {
+ width: 100%;
+ max-width: 160px;
+ margin: 30px auto;
+ }
+ .searchClose {
+ width: 24px;
+ height: 24px;
+ fill: #b4b4b4;
+ }
+
+ .header {
+ border-bottom: 4px solid #242424;
+ }
+ .header__slogan {
+ display: none;
+ }
+ .header .mobileSearch {
+ display: block;
+ }
+ .header .mobileSearch svg {
+ width: 22px;
+ height: 22px;
+ fill: #b4b4b4;
+ }
+ .header__search {
+ display: none;
+ }
+ .header .hamBtn {
+ display: block;
+ width: 35px;
+ background: none;
+ height: 25px;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ }
+ .header .hamBtn span {
+ width: 100%;
+ height: 5px;
+ border-radius: 10px;
+ background: #242424;
+ }
+
+ .subheader__inner {
+ position: fixed;
+ top: 0;
+ right: 0;
+ height: 100%;
+ width: 0;
+ overflow: hidden;
+ opacity: 0;
+ background: rgba(0, 0, 0, 0.5);
+ z-index: 1000;
+ transition: all 0.2s ease-in-out 0s;
+ -moz-transition: all 0.2s ease-in-out 0s;
+ }
+ .subheader__inner .close {
+ width: 30px;
+ height: 30px;
+ position: absolute;
+ left: 30px;
+ top: 30px;
+ display: block;
+ }
+ .subheader__inner .close img {
+ width: 100%;
+ height: 100%;
+ }
+ .subheader__inner .nav {
+ position: absolute;
+ top: 0;
+ right: 0;
+ width: 50%;
+ height: calc(100% - 50px);
+ overflow-y: scroll;
+ background: #242424;
+ }
+ .subheader__inner .nav__inner {
+ flex-direction: column;
+ }
+ .subheader__inner .nav__inner-link {
+ display: block;
+ text-align: center;
+ margin-right: 0;
+ padding: 20px;
+ font-size: 20px;
+ line-height: 24px;
+ font-weight: 700;
+ width: calc(100% - 40px);
+ }
+ .subheader__inner .nav__inner-link::before {
+ display: none;
+ }
+ .subheader__inner .nav__inner-link .dropDown {
+ margin-top: 20px;
+ position: unset;
+ width: unset;
+ background: unset;
+ background: #b4b4b4;
+ }
+ .subheader__inner .nav__inner-link .dropDown__link {
+ color: #ffffff;
+ text-align: center;
+ padding: 20px 0;
+ }
+ .subheader__inner .nav__inner-link .dropDown__link:hover {
+ background: unset;
+ }
+ .subheader__inner .language {
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ width: 50%;
+ padding: 15px 0;
+ justify-content: center;
+ background: #b4b4b4;
+ }
+ .subheader__inner.showMenu {
+ width: 100%;
+ opacity: 1;
+ }
+
+ .event__body-image {
+ width: calc(50% - 20px);
+ }
+ .event__body-column {
+ width: calc(50% - 30px);
+ }
+
+ .main {
+ margin-top: 40px;
+ }
+ .main__sidebar {
+ display: none;
+ }
+ .main__content {
+ width: 100%;
+ margin: 0;
+ }
+ .main__body-card {
+ margin: -50px 0 0 0;
+ }
+ .main__body-column a.progressive {
+ height: 300px;
+ }
+
+ .footer__inner {
+ flex-direction: column;
+ justify-content: center;
+ }
+ .footer__social {
+ margin-top: 20px;
+ }
+ .footer__copyright {
+ text-align: center;
+ }
+
+ .card.other {
+ padding: 15px;
+ }
+
+ .mr-top-bot {
+ margin: 40px 0;
+ }
+
+ .about {
+ padding: 40px 0;
+ }
+
+ .news__sidebar {
+ display: none;
+ }
+ .news__content {
+ width: 100%;
+ margin-right: 0;
+ }
+
+ .terms {
+ padding: 40px 0;
+ }
+ .terms__title {
+ margin-bottom: 20px;
+ }
+ .terms__para {
+ margin-bottom: 20px;
+ }
+}
+@media (max-width: 700px) {
+ .newsSlider__outer {
+ display: none;
+ }
+
+ .swiper-container .slick-list {
+ padding: 0 0 0 0;
+ }
+
+ .header__logo {
+ width: 80px;
+ }
+ .header__logo img {
+ width: 100%;
+ }
+
+ .marquee {
+ display: none;
+ }
+
+ .slider {
+ height: 350px;
+ }
+ .slider__item {
+ height: 350px;
+ }
+
+ .event__body-row {
+ margin: 0;
+ flex-direction: column;
+ border: 1px solid #dcdcdc;
+ }
+ .event__body-image {
+ width: 100%;
+ margin: 15px 0;
+ }
+ .event__body-image a.progressive {
+ height: auto;
+ }
+ .event__body-column {
+ width: calc(100% - 30px);
+ margin: 0;
+ padding: 0 15px;
+ border: none;
+ }
+ .event__body-column .card {
+ padding: 15px 0;
+ border-bottom: 1px solid #dcdcdc;
+ }
+ .event__body-column .card:last-child {
+ border-bottom: none;
+ }
+ .event__body-card {
+ position: unset;
+ width: 100%;
+ border: none;
+ border-bottom: 1px solid #dcdcdc;
+ }
+
+ .main__body-row {
+ display: block;
+ margin: 0;
+ }
+ .main__body .banner__mobile {
+ display: block;
+ width: 100%;
+ }
+ .main__body-column {
+ width: 100%;
+ margin: 15px 0;
+ }
+ .main__body-column a.progressive {
+ height: auto;
+ }
+ .main__banner {
+ margin-bottom: 40px;
+ }
+
+ .heading__row {
+ margin-bottom: 20px;
+ flex-direction: column;
+ }
+ .heading__image {
+ width: 100%;
+ }
+ .heading__content {
+ padding: 20px 0;
+ width: 100%;
+ }
+ .heading__content-body-para {
+ height: 120px;
+ }
+ .heading a.progressive {
+ height: auto;
+ }
+ .heading a.progressive img {
+ height: unset;
+ width: 100%;
+ object-fit: unset;
+ -o-object-fit: unset;
+ }
+
+ .form__row {
+ flex-direction: column;
+ }
+ .form__input {
+ margin-bottom: 20px;
+ }
+ .form__input:first-child {
+ width: 100%;
+ margin-right: 0;
+ }
+ .form__input:last-child {
+ width: 100%;
+ margin-left: 0;
+ }
+ .form__input label {
+ height: unset;
+ }
+ .form__btn {
+ width: 100%;
+ }
+
+ .main__inner.contact {
+ padding: 0;
+ }
+
+ .news__body-row {
+ margin: 0;
+ flex-direction: column;
+ }
+ .news__body-row-image {
+ margin: 15px 0;
+ width: 100%;
+ }
+ .news__body img {
+ width: 100%;
+ margin: 15px 0;
+ display: block;
+ }
+ .news__footer {
+ flex-direction: column;
+ }
+ .news img {
+ width: 100%;
+ margin: 15px 0;
+ display: block;
+ }
+
+ .newsSlider .newsSlider__item img {
+ height: 250px;
+ }
+ .newsSlider .newsSlider__item-content {
+ position: unset;
+ padding: 10px;
+ border: 1px solid #dfdfdf;
+ width: calc(100% - 20px);
+ }
+ .newsSlider .newsSlider__item-content-link {
+ color: #242424;
+ font-size: 12px;
+ line-height: 16px;
+ height: 48px;
+ }
+ .newsSlider .newsSlider__item-content-date {
+ font-size: 10px;
+ width: 100%;
+ padding: 8px 0;
+ }
+}
+@media (max-width: 540px) {
+ .swiper-slide-content-category {
+ position: absolute;
+ top: 12px;
+ right: 15px;
+ }
+
+ .auto__container {
+ padding: 0 10px;
+ }
+
+ .slider {
+ height: 300px;
+ }
+ .slider__item {
+ height: 300px;
+ }
+
+ .partnerSlider {
+ overflow: hidden;
+ }
+ .partnerSlider__item {
+ margin-right: 0;
+ padding: 5px;
+ height: unset;
+ }
+
+ .footer__social {
+ flex-wrap: wrap;
+ justify-content: center;
+ }
+ .footer__social-link {
+ margin: 5px;
+ }
+
+ .subheader {
+ z-index: 12;
+ }
+ .subheader__inner .close {
+ width: 20px;
+ height: 20px;
+ top: 15px;
+ left: 15px;
+ }
+ .subheader .nav {
+ width: calc(100% - 50px);
+ }
+ .subheader .language {
+ width: calc(100% - 50px);
+ }
+
+ .swiper-slide {
+ height: 300px;
+ }
+
+ .newsSlider__outer {
+ display: none;
+ }
+
+ .main__body-card {
+ margin: 0 0 0 0;
+ }
+
+ .popUp {
+ display: flex;
+ transform: translateY(100%);
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ background: #f7f7f7;
+ z-index: 11;
+ animation: popUp 0.2s linear;
+ border-radius: 20px 20px 0 0;
+ padding: 40px 20px;
+ width: calc(100% - 40px);
+ transition: all 0.2s ease-in-out 0s;
+ -moz-transition: all 0.2s ease-in-out 0s;
+ }
+ .popUp__inner {
+ width: 100%;
+ }
+ .popUp__inner-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ }
+ .popUp__inner-header-logo {
+ width: 75px;
+ }
+ .popUp__inner-header-logo img {
+ width: 100%;
+ }
+ .popUp__inner-header-close {
+ display: flex;
+ align-items: flex-end;
+ justify-content: flex-end;
+ }
+ .popUp__inner-header-close svg {
+ width: 18px;
+ height: 18px;
+ fill: #000;
+ }
+ .popUp__inner-body {
+ margin: 15px 0;
+ }
+ .popUp__inner-body-subtitle {
+ font-size: 16px;
+ line-height: 20px;
+ font-weight: 400;
+ color: #000000;
+ text-align: center;
+ }
+ .popUp__inner-body-title {
+ font-size: 20px;
+ line-height: 24px;
+ font-weight: 700;
+ color: #000000;
+ text-align: center;
+ margin-bottom: 15px;
+ }
+ .popUp__inner-footer-btn {
+ width: 80%;
+ margin: 0 auto;
+ padding: 15px 0;
+ align-items: center;
+ justify-content: center;
+ color: #fff;
+ text-align: center;
+ font-size: 16px;
+ line-height: 20px;
+ border-radius: 15px;
+ background: #fd4c24;
+ display: flex;
+ }
+ .popUp__inner-footer-close {
+ text-align: center;
+ font-size: 16px;
+ line-height: 20px;
+ font-weight: 400;
+ color: #fd4c24;
+ margin-top: 15px;
+ }
+ .popUp.active {
+ transform: translateY(0%);
+ }
+
+ @keyframes popUp {
+ 0% {
+ opacity: 0;
+ transform: translateY(100%);
+ }
+ 100% {
+ opacity: 1;
+ transform: translateY(0%);
+ }
+ }
+}
\ No newline at end of file
diff --git a/themes/modern2/template/css (old)/main.scss b/themes/modern2/template/css (old)/main.scss
new file mode 100644
index 000000000..07fd72f6d
--- /dev/null
+++ b/themes/modern2/template/css (old)/main.scss
@@ -0,0 +1,34 @@
+// 1-main components
+@import "components/1-main/mixin";
+@import "components/1-main/nulifier";
+@import "components/1-main/variables";
+// 2-layout components
+
+@import "components/2-layout/header";
+@import "components/2-layout/footer";
+
+@import "components/2-layout/subheader";
+@import "../slick/slick";
+@import "../slick/slick-theme";
+@import "components/2-layout/partnerSlider";
+@import "components/2-layout/newsCard";
+@import "components/2-layout/lightpick";
+@import "components/2-layout/newsSlider";
+@import "components/2-layout/swiper";
+
+
+
+
+// 3-page components
+@import "components/3-page/home";
+@import "components/3-page/heading";
+@import "components/3-page/about";
+@import "components/3-page/contact";
+@import "components/3-page/news";
+@import "components/3-page/terms";
+
+
+@import "components/2-layout/slider";
+
+// responsive
+@import "components/2-layout/responsive";
diff --git a/themes/modern2/template/css (old)/prepros.config b/themes/modern2/template/css (old)/prepros.config
new file mode 100644
index 000000000..6795a1a7b
--- /dev/null
+++ b/themes/modern2/template/css (old)/prepros.config
@@ -0,0 +1,921 @@
+{
+ "version": "7",
+ "about": "This is a Prepros (https://prepros.io) configuration file. You can commit this file to a git repo to backup and sync project configurations.",
+ "config": {
+ "proxy": {
+ "enable": false,
+ "target": "",
+ "useLocalAssets": false
+ },
+ "reload": {
+ "enable": true,
+ "delay": 0,
+ "animate": true,
+ "afterUpload": false
+ },
+ "sync": {
+ "enable": false,
+ "mouse": true,
+ "keyboard": true,
+ "form": true,
+ "scroll": true
+ },
+ "watcher": {
+ "enable": true,
+ "maxFiles": 2000,
+ "usePolling": false,
+ "pollingInterval": 500,
+ "extensions": [
+ ".html",
+ ".htm",
+ ".php"
+ ],
+ "ignore": {
+ "patterns": [
+ ".*",
+ "wp-admin",
+ "wp-includes",
+ "node_modules",
+ "Prepros Export",
+ "bower_components"
+ ],
+ "exceptions": []
+ }
+ },
+ "exporter": {
+ "ignore": {
+ "patterns": [
+ ".*",
+ "desktop.ini",
+ "prepros.cfg",
+ "node_modules",
+ "Prepros Export",
+ "prepros.config",
+ "prepros-6.config",
+ "*-original.jpg",
+ "*-original.jpeg",
+ "*-original.png",
+ "*-original.svg",
+ "*.scss",
+ "*.sass",
+ "*.less",
+ "*.pug",
+ "*.jade",
+ "*.styl",
+ "*.haml",
+ "*.slim",
+ "*.coffee",
+ "*.kit",
+ "*.turf",
+ "*.ts"
+ ],
+ "exceptions": []
+ }
+ },
+ "uploader": {
+ "remotePath": "",
+ "timeout": 20000,
+ "autoUpload": false,
+ "reuseConnection": true,
+ "connectionType": "ftp",
+ "history": []
+ },
+ "packages": {
+ "createPackageLock": true
+ },
+ "images": {
+ "preserveOriginal": true
+ },
+ "tasks": {
+ "autoprefixer": {
+ "cascade": true,
+ "add": true,
+ "remove": true,
+ "supports": true,
+ "flexbox": true,
+ "grid": "autoplace",
+ "browsers": [
+ "> 2%",
+ "not dead"
+ ],
+ "sourceMap": false
+ },
+ "babel": {
+ "sourceMap": false,
+ "presets": {
+ "@babel/preset-env": {
+ "enable": true,
+ "options": {
+ "targets": [
+ "> 2%",
+ "not dead"
+ ],
+ "preserveImports": false,
+ "polyfills": false
+ }
+ },
+ "@babel/preset-react": true,
+ "@babel/preset-flow": false
+ },
+ "plugins": {
+ "@babel/plugin-proposal-class-static-block": false,
+ "@babel/plugin-proposal-class-properties": false,
+ "@babel/plugin-proposal-decorators": {
+ "enable": false,
+ "options": {
+ "decoratorsBeforeExport": true
+ }
+ },
+ "@babel/plugin-proposal-export-namespace-from": false,
+ "@babel/plugin-proposal-function-sent": false,
+ "@babel/plugin-proposal-logical-assignment-operators": false,
+ "@babel/plugin-proposal-nullish-coalescing-operator": false,
+ "@babel/plugin-proposal-numeric-separator": false,
+ "@babel/plugin-proposal-optional-chaining": false,
+ "@babel/plugin-proposal-private-methods": false,
+ "@babel/plugin-proposal-throw-expressions": false
+ },
+ "customPresets": [],
+ "customPlugins": []
+ },
+ "bundle-js": {
+ "sourceMap": false,
+ "exclude": [
+ "node_modules",
+ "bower_components"
+ ],
+ "devMode": true,
+ "globals": [],
+ "externals": [],
+ "babel": {
+ "enable": true,
+ "options": {
+ "sourceMap": false,
+ "presets": {
+ "@babel/preset-env": {
+ "enable": true,
+ "options": {
+ "targets": [
+ "> 2%",
+ "not dead"
+ ],
+ "preserveImports": false,
+ "polyfills": false
+ }
+ },
+ "@babel/preset-react": true,
+ "@babel/preset-flow": false
+ },
+ "plugins": {
+ "@babel/plugin-proposal-class-static-block": false,
+ "@babel/plugin-proposal-class-properties": false,
+ "@babel/plugin-proposal-decorators": {
+ "enable": false,
+ "options": {
+ "decoratorsBeforeExport": true
+ }
+ },
+ "@babel/plugin-proposal-export-namespace-from": false,
+ "@babel/plugin-proposal-function-sent": false,
+ "@babel/plugin-proposal-logical-assignment-operators": false,
+ "@babel/plugin-proposal-nullish-coalescing-operator": false,
+ "@babel/plugin-proposal-numeric-separator": false,
+ "@babel/plugin-proposal-optional-chaining": false,
+ "@babel/plugin-proposal-private-methods": false,
+ "@babel/plugin-proposal-throw-expressions": false
+ },
+ "customPresets": [],
+ "customPlugins": []
+ }
+ },
+ "css": {
+ "enable": true
+ },
+ "fonts": {
+ "enable": true
+ }
+ },
+ "coffeescript": {
+ "header": false,
+ "bare": false,
+ "sourceMap": false
+ },
+ "command": {
+ "command": "",
+ "rootDir": ""
+ },
+ "concat-js": {
+ "sourceMap": false,
+ "rootDir": ""
+ },
+ "copy": {
+ "sourceMap": false
+ },
+ "dart-sass": {
+ "indentType": "space",
+ "indentWidth": 2,
+ "linefeed": "lf",
+ "sourceMap": false,
+ "allowWildcardImports": false
+ },
+ "haml": {
+ "doubleQuoteAttributes": true
+ },
+ "jpg": {
+ "quality": 90
+ },
+ "less": {
+ "javascriptEnabled": false,
+ "strictImports": false,
+ "insecure": false,
+ "math": "always",
+ "strictUnits": false,
+ "dumpLineNumbers": false,
+ "sourceMap": false
+ },
+ "markdown": {
+ "githubFlavored": true,
+ "wrapWithHtml": false
+ },
+ "minify-css": {
+ "sourceMap": false
+ },
+ "minify-html": {
+ "caseSensitive": false,
+ "collapseBooleanAttributes": true,
+ "collapseInlineTagWhitespace": false,
+ "collapseWhitespace": true,
+ "conservativeCollapse": false,
+ "decodeEntities": false,
+ "html5": true,
+ "includeAutoGeneratedTags": true,
+ "keepClosingSlash": false,
+ "minifyCSS": true,
+ "minifyJS": true,
+ "preserveLineBreaks": false,
+ "preventAttributesEscaping": false,
+ "processConditionalComments": false,
+ "removeAttributeQuotes": false,
+ "removeComments": true,
+ "removeEmptyAttributes": false,
+ "removeEmptyElement": false,
+ "removeOptionalTags": false,
+ "removeRedundantAttributes": false,
+ "removeScriptTypeAttributes": false,
+ "removeStyleLinkTypeAttributes": false,
+ "removeTagWhitespace": false,
+ "sortAttributes": false,
+ "sortClassName": false,
+ "useShortDoctype": true
+ },
+ "minify-js": {
+ "parse": {
+ "bare_returns": false
+ },
+ "compress": {
+ "arrows": true,
+ "arguments": false,
+ "booleans": true,
+ "booleans_as_integers": false,
+ "collapse_vars": true,
+ "comparisons": true,
+ "computed_props": true,
+ "conditionals": true,
+ "dead_code": true,
+ "directives": true,
+ "drop_console": false,
+ "drop_debugger": true,
+ "evaluate": true,
+ "expression": false,
+ "global_defs": [],
+ "hoist_funs": false,
+ "hoist_props": true,
+ "hoist_vars": false,
+ "if_return": true,
+ "inline": 3,
+ "join_vars": true,
+ "keep_fargs": true,
+ "keep_infinity": false,
+ "loops": true,
+ "negate_iife": true,
+ "properties": true,
+ "pure_funcs": [],
+ "pure_getters": false,
+ "reduce_vars": true,
+ "sequences": true,
+ "side_effects": true,
+ "switches": true,
+ "top_retain": [],
+ "typeofs": true,
+ "unsafe": false,
+ "unsafe_arrows": false,
+ "unsafe_comps": false,
+ "unsafe_Function": false,
+ "unsafe_math": false,
+ "unsafe_proto": false,
+ "unsafe_regexp": false,
+ "unsafe_undefined": false,
+ "unused": true,
+ "reduce_funcs": true
+ },
+ "mangle": {
+ "eval": false,
+ "reserved": []
+ },
+ "output": {
+ "ascii_only": false,
+ "braces": false,
+ "comments": "none",
+ "inline_script": true,
+ "keep_numbers": false,
+ "keep_quoted_props": false,
+ "preamble": null,
+ "quote_keys": false,
+ "quote_style": 0,
+ "semicolons": true,
+ "shebang": true,
+ "webkit": false,
+ "wrap_iife": false,
+ "wrap_func_args": true
+ },
+ "sourceMap": false,
+ "toplevel": false,
+ "ie8": false,
+ "keep_classnames": false,
+ "keep_fnames": false,
+ "safari10": false
+ },
+ "node-sass": {
+ "indentType": "space",
+ "indentWidth": 2,
+ "linefeed": "lf",
+ "outputStyle": "expanded",
+ "precision": 10,
+ "sourceMap": false,
+ "sourceComments": false,
+ "allowWildcardImports": false
+ },
+ "png": {
+ "quality": 90
+ },
+ "postcss-import": {
+ "ignoreKeywords": [],
+ "sourceMap": false
+ },
+ "postcss-preset-env": {
+ "stage": 2,
+ "browsers": [
+ "> 2%",
+ "not dead"
+ ],
+ "sourceMap": false
+ },
+ "pug": {
+ "pretty": true
+ },
+ "slim": {
+ "indent": "space",
+ "indentSize": 2,
+ "pretty": true
+ },
+ "stylus": {
+ "useNib": true,
+ "sourceMap": false,
+ "linenos": false
+ },
+ "svg": {
+ "cleanupAttrs": true,
+ "removeDoctype": true,
+ "removeXMLProcInst": true,
+ "removeComments": true,
+ "removeMetadata": true,
+ "removeTitle": true,
+ "removeDesc": true,
+ "removeUselessDefs": true,
+ "removeEditorsNSData": true,
+ "removeEmptyAttrs": true,
+ "removeHiddenElems": true,
+ "removeEmptyText": true,
+ "removeEmptyContainers": true,
+ "removeViewBox": false,
+ "cleanupEnableBackground": true,
+ "convertStyleToAttrs": true,
+ "convertColors": true,
+ "convertPathData": true,
+ "convertTransform": true,
+ "removeUnknownsAndDefaults": true,
+ "removeNonInheritableGroupAttrs": true,
+ "removeUselessStrokeAndFill": true,
+ "removeUnusedNS": true,
+ "cleanupIDs": true,
+ "cleanupNumericValues": true,
+ "moveElemsAttrsToGroup": true,
+ "moveGroupAttrsToElems": true,
+ "collapseGroups": true,
+ "removeRasterImages": false,
+ "mergePaths": true,
+ "convertShapeToPath": true,
+ "sortAttrs": true,
+ "removeDimensions": true
+ },
+ "turf": {
+ "rootDir": ""
+ },
+ "typescript": {
+ "allowJs": false,
+ "allowSyntheticDefaultImports": true,
+ "allowUmdGlobalAccess": false,
+ "allowUnreachableCode": false,
+ "allowUnusedLabels": false,
+ "alwaysStrict": false,
+ "charset": "utf8",
+ "checkJs": false,
+ "declaration": false,
+ "disableSizeLimit": false,
+ "downlevelIteration": false,
+ "emitBOM": false,
+ "emitDecoratorMetadata": false,
+ "experimentalDecorators": false,
+ "forceConsistentCasingInFileNames": false,
+ "importHelpers": false,
+ "jsx": "React",
+ "keyofStringsOnly": false,
+ "lib": [],
+ "maxNodeModuleJsDepth": 0,
+ "module": "ES2015",
+ "moduleResolution": "NodeJs",
+ "newLine": "LineFeed",
+ "noFallthroughCasesInSwitch": false,
+ "noImplicitAny": false,
+ "noImplicitReturns": false,
+ "noImplicitThis": false,
+ "noStrictGenericChecks": false,
+ "noUnusedLocals": false,
+ "noUnusedParameters": false,
+ "noImplicitUseStrict": false,
+ "noLib": false,
+ "noResolve": false,
+ "preserveConstEnums": false,
+ "jsxFactory": "React.createElement",
+ "removeComments": false,
+ "skipLibCheck": false,
+ "sourceMap": false,
+ "strict": false,
+ "strictFunctionTypes": false,
+ "strictBindCallApply": false,
+ "strictNullChecks": false,
+ "strictPropertyInitialization": false,
+ "suppressExcessPropertyErrors": false,
+ "suppressImplicitAnyIndexErrors": false,
+ "target": "ES3",
+ "resolveJsonModule": false,
+ "esModuleInterop": false,
+ "useDefineForClassFields": false
+ }
+ },
+ "fileTypes": {
+ "sass": {
+ "extensions": [
+ ".scss",
+ ".sass"
+ ],
+ "autoCompile": true,
+ "sourceMap": false,
+ "tasks": [
+ {
+ "task": "dart-sass",
+ "enable": true
+ },
+ {
+ "task": "autoprefixer",
+ "enable": true
+ },
+ {
+ "task": "minify-css",
+ "enable": false
+ }
+ ],
+ "output": {
+ "extension": ".css",
+ "type": "REPLACE_SEGMENTS",
+ "segments": [
+ {
+ "segment": "scss",
+ "replaceWith": "css"
+ },
+ {
+ "segment": "sass",
+ "replaceWith": "css"
+ }
+ ]
+ }
+ },
+ "less": {
+ "extensions": [
+ ".less"
+ ],
+ "autoCompile": true,
+ "sourceMap": false,
+ "tasks": [
+ {
+ "task": "less",
+ "enable": true
+ },
+ {
+ "task": "autoprefixer",
+ "enable": true
+ },
+ {
+ "task": "minify-css",
+ "enable": false
+ }
+ ],
+ "output": {
+ "extension": ".css",
+ "type": "REPLACE_SEGMENTS",
+ "segments": [
+ {
+ "segment": "less",
+ "replaceWith": "css"
+ }
+ ]
+ }
+ },
+ "pug": {
+ "extensions": [
+ ".pug",
+ ".jade"
+ ],
+ "autoCompile": true,
+ "tasks": [
+ {
+ "task": "pug",
+ "enable": true
+ },
+ {
+ "task": "minify-html",
+ "enable": false
+ }
+ ],
+ "output": {
+ "extension": ".html",
+ "type": "REPLACE_SEGMENTS",
+ "segments": [
+ {
+ "segment": "pug",
+ "replaceWith": "html"
+ }
+ ]
+ }
+ },
+ "css": {
+ "extensions": [
+ ".css"
+ ],
+ "autoCompile": false,
+ "sourceMap": false,
+ "tasks": [
+ {
+ "task": "copy",
+ "enable": true
+ },
+ {
+ "task": "postcss-import",
+ "enable": false
+ },
+ {
+ "task": "postcss-preset-env",
+ "enable": false
+ },
+ {
+ "task": "autoprefixer",
+ "enable": true
+ },
+ {
+ "task": "minify-css",
+ "enable": true
+ }
+ ],
+ "output": {
+ "extension": ".css",
+ "type": "SOURCE_RELATIVE",
+ "relativePath": "",
+ "suffix": "-dist",
+ "alwaysSuffix": false
+ }
+ },
+ "javascript": {
+ "extensions": [
+ ".js",
+ ".jsx"
+ ],
+ "autoCompile": false,
+ "sourceMap": false,
+ "tasks": [
+ {
+ "task": "copy",
+ "enable": true
+ },
+ {
+ "task": "concat-js",
+ "enable": false
+ },
+ {
+ "task": "babel",
+ "enable": false
+ },
+ {
+ "task": "bundle-js",
+ "enable": false
+ },
+ {
+ "task": "minify-js",
+ "enable": true
+ }
+ ],
+ "output": {
+ "extension": ".js",
+ "type": "SOURCE_RELATIVE",
+ "relativePath": "",
+ "suffix": "-dist",
+ "alwaysSuffix": false
+ }
+ },
+ "stylus": {
+ "extensions": [
+ ".styl"
+ ],
+ "autoCompile": true,
+ "sourceMap": false,
+ "tasks": [
+ {
+ "task": "stylus",
+ "enable": true
+ },
+ {
+ "task": "autoprefixer",
+ "enable": true
+ },
+ {
+ "task": "minify-css",
+ "enable": false
+ }
+ ],
+ "output": {
+ "extension": ".css",
+ "type": "REPLACE_SEGMENTS",
+ "segments": [
+ {
+ "segment": "stylus",
+ "replaceWith": "css"
+ },
+ {
+ "segment": "styl",
+ "replaceWith": "css"
+ }
+ ]
+ }
+ },
+ "markdown": {
+ "extensions": [
+ ".md",
+ ".markdown",
+ ".mkd"
+ ],
+ "autoCompile": false,
+ "tasks": [
+ {
+ "task": "markdown",
+ "enable": true
+ },
+ {
+ "task": "minify-html",
+ "enable": false
+ }
+ ],
+ "output": {
+ "extension": ".html",
+ "type": "REPLACE_SEGMENTS",
+ "segments": [
+ {
+ "segment": "markdown",
+ "replaceWith": "html"
+ }
+ ]
+ }
+ },
+ "haml": {
+ "extensions": [
+ ".haml"
+ ],
+ "autoCompile": true,
+ "tasks": [
+ {
+ "task": "haml",
+ "enable": true
+ },
+ {
+ "task": "minify-html",
+ "enable": false
+ }
+ ],
+ "output": {
+ "extension": ".html",
+ "type": "REPLACE_SEGMENTS",
+ "segments": [
+ {
+ "segment": "haml",
+ "replaceWith": "html"
+ }
+ ]
+ }
+ },
+ "slim": {
+ "extensions": [
+ ".slim"
+ ],
+ "autoCompile": true,
+ "tasks": [
+ {
+ "task": "slim",
+ "enable": true
+ },
+ {
+ "task": "minify-html",
+ "enable": false
+ }
+ ],
+ "output": {
+ "extension": ".html",
+ "type": "REPLACE_SEGMENTS",
+ "segments": [
+ {
+ "segment": "slim",
+ "replaceWith": "html"
+ }
+ ]
+ }
+ },
+ "coffeescript": {
+ "extensions": [
+ ".coffee"
+ ],
+ "autoCompile": true,
+ "sourceMap": false,
+ "tasks": [
+ {
+ "task": "coffeescript",
+ "enable": true
+ },
+ {
+ "task": "babel",
+ "enable": false
+ },
+ {
+ "task": "bundle-js",
+ "enable": false
+ },
+ {
+ "task": "minify-js",
+ "enable": false
+ }
+ ],
+ "output": {
+ "extension": ".js",
+ "type": "REPLACE_SEGMENTS",
+ "segments": [
+ {
+ "segment": "coffee-script",
+ "replaceWith": "js"
+ },
+ {
+ "segment": "coffeescript",
+ "replaceWith": "js"
+ },
+ {
+ "segment": "coffee",
+ "replaceWith": "js"
+ }
+ ]
+ }
+ },
+ "turf": {
+ "extensions": [
+ ".turf",
+ ".kit"
+ ],
+ "autoCompile": true,
+ "tasks": [
+ {
+ "task": "turf",
+ "enable": true
+ },
+ {
+ "task": "minify-html",
+ "enable": false
+ }
+ ],
+ "output": {
+ "extension": ".html",
+ "type": "REPLACE_SEGMENTS",
+ "segments": [
+ {
+ "segment": "turf",
+ "replaceWith": "html"
+ }
+ ]
+ }
+ },
+ "typescript": {
+ "extensions": [
+ ".ts",
+ ".tsx"
+ ],
+ "autoCompile": true,
+ "sourceMap": false,
+ "tasks": [
+ {
+ "task": "typescript",
+ "enable": true
+ },
+ {
+ "task": "babel",
+ "enable": false
+ },
+ {
+ "task": "bundle-js",
+ "enable": false
+ },
+ {
+ "task": "minify-js",
+ "enable": false
+ }
+ ],
+ "output": {
+ "extension": ".js",
+ "type": "REPLACE_SEGMENTS",
+ "segments": [
+ {
+ "segment": "typescript",
+ "replaceWith": "js"
+ },
+ {
+ "segment": "ts",
+ "replaceWith": "js"
+ }
+ ]
+ }
+ },
+ "jpg": {
+ "extensions": [
+ ".jpg",
+ ".jpeg"
+ ],
+ "tasks": [
+ {
+ "task": "jpg",
+ "enable": true
+ }
+ ],
+ "output": {
+ "extension": ".jpg",
+ "type": "SOURCE_RELATIVE",
+ "relativePath": ""
+ }
+ },
+ "png": {
+ "extensions": [
+ ".png"
+ ],
+ "tasks": [
+ {
+ "task": "png",
+ "enable": true
+ }
+ ],
+ "output": {
+ "extension": ".png",
+ "type": "SOURCE_RELATIVE",
+ "relativePath": ""
+ }
+ },
+ "svg": {
+ "extensions": [
+ ".svg"
+ ],
+ "tasks": [
+ {
+ "task": "svg",
+ "enable": true
+ }
+ ],
+ "output": {
+ "extension": ".svg",
+ "type": "SOURCE_RELATIVE",
+ "relativePath": ""
+ }
+ }
+ },
+ "files": []
+ }
+}
diff --git a/themes/modern2/template/css (old)/style.css b/themes/modern2/template/css (old)/style.css
new file mode 100644
index 000000000..4839aef8b
--- /dev/null
+++ b/themes/modern2/template/css (old)/style.css
@@ -0,0 +1,139 @@
+* {
+ padding: 0;
+ margin: 0;
+ box-sizing: border-box;
+}
+
+html {
+ font-size: 62.5%;
+}
+
+body {
+ font-family: 'Roboto', sans-serif;
+}
+
+.right_top-up {
+ max-width: 42.3rem;
+ width: 100%;
+
+}
+
+.right_top-title {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.right_top-title-text {
+ width: 17rem;
+ font-size: 2rem;
+ font-weight: bold;
+}
+
+.right_top-line {
+ border: 0.01rem solid rgba(0, 0, 0, 15%);
+ max-width: 33%;
+ width: 100%;
+ height: 0;
+}
+
+.right_top-content-top {
+ display: flex;
+ justify-content: space-between;
+ margin-top: 3rem;
+}
+
+.right_top-content-sphere {
+ text-align: center;
+ padding: 0.6rem 0;
+ color: #fff;
+ background: #FD4C24;
+ max-width: 11.7rem;
+ width: 100%;
+ font-size: 1.4rem;
+ font-weight: bold;
+ margin-bottom: 1rem;
+ border: none;
+}
+
+.right-top-content-date {
+ display: flex;
+ align-items: center;
+ margin-bottom: 1rem;
+}
+
+.date,
+.time {
+ color: #a2a2a2;
+ font-size: 1.4rem;
+}
+
+.date {
+ margin-right: 2.5rem;
+ position: relative;
+}
+
+
+.date::after {
+ display: inline-block;
+ width: 0.4rem;
+ height: 0.4rem;
+ content: "";
+ border: none;
+ background: #a2a2a2;
+ transform: rotate(45deg) translateY(-50%);
+ position: absolute;
+ top: 50%;
+ right: -23%;
+}
+
+.right_top-content-bottom {
+ margin-bottom: 1.5rem;
+}
+.right_top-content:last-child{
+ margin-bottom: 4rem;
+}
+.right_top-content-bottom-text {
+ text-decoration: none;
+ color: #000;
+ font-size: 1.6rem;
+ font-weight: bold;
+}
+
+
+.hr-line {
+ width: 100%;
+ border: 0.01rem solid rgba(0, 0, 0, 15%);
+}
+/* .hr-line:last-child{
+ display: none; */
+}
+@media screen and (min-width: 1400px){
+ .right_top-line{
+ max-width: 47%;
+ }
+}
+/* ========================================== */
+
+
+
+
+.right_top-title-text-2 {
+ width: 9.4rem;
+}
+
+.right_top-line-2 {
+ max-width: 40%;
+ width: 100%;
+}
+
+.additional {
+ text-decoration: none;
+ color: rgba(0, 0, 0, 30%);
+ font-size: 1.4rem;
+ margin-left: 2.1rem;
+}
+
+.right-top-content-date-2 {
+ margin-top: 5rem;
+}
\ No newline at end of file
diff --git a/themes/modern2/template/css/components/1-main/mixin.scss b/themes/modern2/template/css/components/1-main/mixin.scss
index 364922671..6cbf2fb93 100644
--- a/themes/modern2/template/css/components/1-main/mixin.scss
+++ b/themes/modern2/template/css/components/1-main/mixin.scss
@@ -1,90 +1,126 @@
@mixin transition {
- transition: all 0.2s ease-in-out 0s;
- -moz-transition: all 0.2s ease-in-out 0s;
+ transition: all 0.2s ease-in-out 0s;
+ -moz-transition: all 0.2s ease-in-out 0s;
}
+
@mixin transition-bg {
- transition: background 0.2s ease-in-out 0s;
- -moz-transition: background 0.2s ease-in-out 0s;
+ transition: background 0.2s ease-in-out 0s;
+ -moz-transition: background 0.2s ease-in-out 0s;
}
+
@mixin transition-border {
- transition: border 0.2s ease-in-out 0s;
- -moz-transition: border 0.2s ease-in-out 0s;
+ transition: border 0.2s ease-in-out 0s;
+ -moz-transition: border 0.2s ease-in-out 0s;
}
+
@mixin fullImage {
- width: 100%;
- height: 100%;
- object-fit: cover;
- -o-object-fit: cover;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ -o-object-fit: cover;
}
+
+@mixin ImgCon {
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+ -o-object-fit: contain;
+}
+
@mixin transformY {
- transform: translateY(-50%);
- -moz-ransform: translateY(-50%);
- -o-transform: translateY(-50%);
- -ms-transform: translateY(-50%);
- -webkit-transform: translateY(-50%);
+ transform: translateY(-50%);
+ -moz-ransform: translateY(-50%);
+ -o-transform: translateY(-50%);
+ -ms-transform: translateY(-50%);
+ -webkit-transform: translateY(-50%);
}
+
@mixin transformX {
- transform: translateX(-50%);
- -moz-ransform: translateX(-50%);
- -o-transform: translateX(-50%);
- -ms-transform: translateX(-50%);
- -webkit-transform: translateX(-50%);
+ transform: translateX(-50%);
+ -moz-ransform: translateX(-50%);
+ -o-transform: translateX(-50%);
+ -ms-transform: translateX(-50%);
+ -webkit-transform: translateX(-50%);
}
+
@mixin transform {
- transform: translate(-50%, -50%);
- -moz-ransform: translate(-50%, -50%);
- -o-transform: translate(-50%, -50%);
- -ms-transform: translate(-50%, -50%);
- -webkit-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+ -moz-ransform: translate(-50%, -50%);
+ -o-transform: translate(-50%, -50%);
+ -ms-transform: translate(-50%, -50%);
+ -webkit-transform: translate(-50%, -50%);
}
+
@mixin transformReset {
- transform: translate(0, 0);
- -moz-ransform: translate(0, 0);
- -o-transform: translate(0, 0);
- -ms-transform: translate(0, 0);
- -webkit-transform: translate(0, 0);
+ transform: translate(0, 0);
+ -moz-ransform: translate(0, 0);
+ -o-transform: translate(0, 0);
+ -ms-transform: translate(0, 0);
+ -webkit-transform: translate(0, 0);
}
+
@mixin rotate {
- transform: rotate(90deg);
- -webkit-transform: rotate(90deg);
- -o-transform: rotate(90deg);
- -ms-transform: rotate(90deg);
- -moz-transform: rotate(90deg);
+ transform: rotate(90deg);
+ -webkit-transform: rotate(90deg);
+ -o-transform: rotate(90deg);
+ -ms-transform: rotate(90deg);
+ -moz-transform: rotate(90deg);
}
+
@mixin rotate180deg {
- transform: rotate(180deg);
- -webkit-transform: rotate(180deg);
- -o-transform: rotate(180deg);
- -ms-transform: rotate(180deg);
- -moz-transform: rotate(180deg);
+ transform: rotate(180deg);
+ -webkit-transform: rotate(180deg);
+ -o-transform: rotate(180deg);
+ -ms-transform: rotate(180deg);
+ -moz-transform: rotate(180deg);
}
+
@mixin rotate270deg {
- transform: rotate(270deg);
- -webkit-transform: rotate(270deg);
- -o-transform: rotate(270deg);
- -ms-transform: rotate(270deg);
- -moz-transform: rotate(270deg);
+ transform: rotate(270deg);
+ -webkit-transform: rotate(270deg);
+ -o-transform: rotate(270deg);
+ -ms-transform: rotate(270deg);
+ -moz-transform: rotate(270deg);
}
@mixin xxsm-xsm {
- @media (max-width: 374px) { @content; }
+ @media (max-width: 374px) {
+ @content;
+ }
}
+
@mixin xsm-sm {
- @media (max-width: 540px) { @content; }
+ @media (max-width: 540px) {
+ @content;
+ }
}
+
@mixin sm-md {
- @media (max-width: 700px) { @content; }
+ @media (max-width: 700px) {
+ @content;
+ }
}
+
@mixin md-lg {
- @media (max-width: 768px) { @content; }
+ @media (max-width: 768px) {
+ @content;
+ }
}
+
@mixin lg-xlg {
- @media (max-width: 1024px) { @content; }
+ @media (max-width: 1024px) {
+ @content;
+ }
}
@mixin xlg-xxlg {
- @media (max-width: 1400px) { @content; }
+ @media (max-width: 1400px) {
+ @content;
+ }
}
+
@mixin xxlg-xxxlg {
- @media (max-width: 1640px) { @content; }
-}
\ No newline at end of file
+ @media (max-width: 1640px) {
+ @content;
+ }
+}
diff --git a/themes/modern2/template/css/components/1-main/nulifier.scss b/themes/modern2/template/css/components/1-main/nulifier.scss
index 02c044780..55a1825fe 100644
--- a/themes/modern2/template/css/components/1-main/nulifier.scss
+++ b/themes/modern2/template/css/components/1-main/nulifier.scss
@@ -1,4 +1,4 @@
-/***
+/***
====================================================================
Reset
@@ -9,94 +9,110 @@
// font-size: calc(1vw + 0.6em);
// }
* {
- margin: 0px;
- padding: 0px;
- border: none;
- outline: none;
+ margin: 0px;
+ padding: 0px;
+ border: none;
+ outline: none;
}
+
button {
- outline: none;
+ outline: none;
}
+
button:focus {
- outline: none;
+ outline: none;
}
+
button:focus {
- outline: none;
+ outline: none;
}
+
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
- -webkit-appearance: none;
- margin: 0;
+ -webkit-appearance: none;
+ margin: 0;
}
-/***
+
+/***
====================================================================
Global Settings
====================================================================
***/
body {
- font-family: "Roboto", sans-serif;
- font-size: 14px;
- color: #000;
- line-height: 1.7em;
- font-weight: 400;
- background: #fff;
- -webkit-font-smoothing: antialiased;
- -moz-font-smoothing: antialiased;
+ font-family: "Roboto", sans-serif;
+ font-size: 14px;
+ color: #000;
+ line-height: 1.7em;
+ font-weight: 400;
+ background: #fff;
+ -webkit-font-smoothing: antialiased;
+ -moz-font-smoothing: antialiased;
}
+
a {
- text-decoration: none;
- cursor: pointer;
- color: #000;
+ text-decoration: none;
+ cursor: pointer;
+ color: #000;
}
+
h1,
h2,
h3,
h4,
h5,
h6 {
- position: relative;
- font-weight: normal;
- margin: 0px;
- background: none;
- line-height: 1.6em;
-}
-/* Typography */
-h1 {
- font-size: 4em;
-}
-h2 {
- font-size: 40px;
-}
-h3 {
- font-size: 34px;
-}
-h4 {
- font-size: 22px;
-}
-h5 {
- font-size: 20px;
-}
-h6 {
- font-size: 18px;
-}
-p {
- position: relative;
- line-height: 1.8em;
-}
-.auto__container {
- position: relative;
- max-width: 1440px;
- padding: 0px;
- margin: 0 auto;
-}
-ul,
-li {
- list-style: none;
- padding: 0px;
- margin: 0px;
-}
-.mr-top-bot {
- margin: 80px 0;
+ position: relative;
+ font-weight: normal;
+ margin: 0px;
+ background: none;
+ line-height: 1.6em;
}
+/* Typography */
+h1 {
+ font-size: 4em;
+}
+
+h2 {
+ font-size: 40px;
+}
+
+h3 {
+ font-size: 34px;
+}
+
+h4 {
+ font-size: 22px;
+}
+
+h5 {
+ font-size: 20px;
+}
+
+h6 {
+ font-size: 18px;
+}
+
+p {
+ position: relative;
+ line-height: 1.8em;
+}
+
+.auto__container {
+ position: relative;
+ max-width: 1440px;
+ padding: 0px;
+ margin: 0 auto;
+}
+
+ul,
+li {
+ list-style: none;
+ padding: 0px;
+ margin: 0px;
+}
+
+.mr-top-bot {
+ margin: 80px 0;
+}
diff --git a/themes/modern2/template/css/components/2-layout/responsive.scss b/themes/modern2/template/css/components/2-layout/responsive.scss
index 3c342b5a2..fda6541f9 100644
--- a/themes/modern2/template/css/components/2-layout/responsive.scss
+++ b/themes/modern2/template/css/components/2-layout/responsive.scss
@@ -1,34 +1,43 @@
+// 1640 ================
@include xxlg-xxxlg {
.auto__container {
max-width: 1240px;
}
+
.swiper {
&-slide {
height: 450px;
}
}
}
+
+// 1400 ===============
@include xlg-xxlg {
.swiper-slide-content-link {
font-size: 18px;
line-height: 25px;
height: 50px;
}
+
.newsSlider {
&__item {
height: 280px;
}
}
+
.main__banner {
margin-bottom: 40px;
}
+
.swiper {
&-slide {
height: 350px;
}
}
+
.newsSlider .newsSlider__item {
height: 180px;
+
&-content {
&-date {
max-width: 120px;
@@ -41,21 +50,27 @@
font-size: 28px;
line-height: 1;
}
+
.auto__container {
max-width: 1040px;
padding: 0 25px;
}
+
.banner {
margin: 40px 0;
}
+
.slider {
height: 450px;
+
&__item {
height: 450px;
}
+
&__nav {
a {
height: 33.3%;
+
span {
overflow: hidden;
text-overflow: ellipsis;
@@ -63,60 +78,75 @@
}
}
}
+
.event {
margin: 40px 0 70px;
+
&__header {
margin-bottom: 40px;
}
+
&__body {
&-row {
margin: 0 -10px;
}
+
&-image {
margin: 0 10px;
width: calc(50% - 20px);
+
a.progressive {
height: 200px;
}
}
+
&-card {
top: 150px;
left: 10px;
width: calc(100% - 20px);
}
+
&-column {
margin: 0 10px;
width: calc(50% - 30px);
padding: 0 15px;
+
.card {
padding: 15px 0;
}
}
}
}
+
.main {
&__body {
&-header {
margin-bottom: 40px;
}
+
&-column {
a.progressive {
height: 240px;
}
}
+
&-card {
margin: -50px 15px 0 15px;
}
}
+
&__sidebar {
&-title {
margin-bottom: 40px;
}
+
a.progressive {
margin-bottom: 40px;
}
+
&-tag {
margin-bottom: 40px;
+
&-link {
padding: 4px 6px;
font-size: 12px;
@@ -124,41 +154,51 @@
}
}
}
+
.card {
padding: 15px;
}
+
.partner {
&__title {
margin-bottom: 40px;
}
}
+
.heading {
&__row {
margin-bottom: 40px;
}
+
&__title {
margin-bottom: 40px;
}
+
&__content {
padding: 15px 0 15px 15px;
width: calc(60% - 15px);
+
&-header {
margin-bottom: 15px;
}
+
&-body {
&-para {
height: 90px;
}
}
}
+
a.progressive {
height: 250px;
}
}
+
.form {
&__title {
margin-bottom: 40px;
}
+
&__input {
label {
height: 60px;
@@ -167,13 +207,16 @@
}
}
}
+
.news {
&__inner {
padding: 40px 0;
}
+
&__image {
margin: 20px 0;
}
+
&__body {
&-row {
&-image {
@@ -184,30 +227,37 @@
}
}
}
+
+// 1024 ===============
@include lg-xlg {
.newsSlider {
&__item {
height: 240px;
}
}
+
.swiper-container {
.slick-list {
padding: 0 20% 0 0;
}
}
+
.partner__title {
margin-bottom: 20px;
}
+
.swiper-slide {
&-content {
padding: 15px;
width: calc(100% - 30px);
+
&-category {
font-size: 12px;
line-height: 14px;
padding: 8px 12px;
font-weight: 500;
}
+
&-link {
font-size: 14px;
line-height: 26px;
@@ -216,15 +266,18 @@
}
}
}
+
.slider {
&__nav {
display: none;
}
+
&__inner {
width: 100%;
margin: 0;
}
}
+
.search {
&Modal {
display: block;
@@ -241,9 +294,11 @@
background: #fff;
width: 100%;
height: 100%;
+
&__inner {
padding: 25px;
}
+
&.active {
transform: translateY(0);
-webkit-transform: translateY(0);
@@ -252,10 +307,12 @@
-o-transform: translateY(0);
}
}
+
&Input {
position: relative;
max-width: 450px;
margin: 0 auto;
+
input {
width: calc(100% - 60px);
height: 50px;
@@ -269,6 +326,7 @@
border-radius: 5px;
border: 1px solid #242424;
}
+
&__btn {
position: absolute;
right: 15px;
@@ -279,6 +337,7 @@
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
+
svg {
width: 24px;
height: 24px;
@@ -286,33 +345,41 @@
}
}
}
+
&Logo {
width: 100%;
max-width: 160px;
margin: 30px auto;
}
+
&Close {
width: 24px;
height: 24px;
fill: #b4b4b4;
}
}
+
.header {
border-bottom: 4px solid #242424;
+
&__slogan {
display: none;
}
+
.mobileSearch {
display: block;
+
svg {
width: 22px;
height: 22px;
fill: #b4b4b4;
}
}
+
&__search {
display: none;
}
+
.hamBtn {
display: block;
width: 35px;
@@ -322,6 +389,7 @@
flex-direction: column;
-ms-flex-direction: column;
justify-content: space-between;
+
span {
width: 100%;
height: 5px;
@@ -330,6 +398,7 @@
}
}
}
+
.subheader__inner {
position: fixed;
top: 0;
@@ -341,6 +410,7 @@
background: rgba($color: #000000, $alpha: 0.5);
z-index: 1000;
@include transition;
+
.close {
width: 30px;
height: 30px;
@@ -348,11 +418,13 @@
left: 30px;
top: 30px;
display: block;
+
img {
width: 100%;
height: 100%;
}
}
+
.nav {
position: absolute;
top: 0;
@@ -361,9 +433,11 @@
height: calc(100% - 50px);
overflow-y: scroll;
background: $text-light-black;
+
&__inner {
flex-direction: column;
-ms-flex-direction: column;
+
&-link {
display: block;
text-align: center;
@@ -373,19 +447,23 @@
line-height: $h3-height;
font-weight: 700;
width: calc(100% - 40px);
+
&::before {
display: none;
}
+
.dropDown {
margin-top: 20px;
position: unset;
width: unset;
background: unset;
background: #b4b4b4;
+
&__link {
color: $text-color-white;
text-align: center;
padding: 20px 0;
+
&:hover {
background: unset;
}
@@ -394,6 +472,7 @@
}
}
}
+
.language {
position: absolute;
bottom: 0;
@@ -403,34 +482,42 @@
justify-content: center;
background: $color-grey;
}
+
&.showMenu {
width: 100%;
opacity: 1;
}
}
+
.event {
&__body {
&-image {
width: calc(50% - 20px);
}
+
&-column {
width: calc(50% - 30px);
}
}
}
+
.main {
margin-top: 40px;
+
&__sidebar {
display: none;
}
+
&__content {
width: 100%;
margin: 0;
}
+
&__body {
&-card {
margin: -50px 0 0 0;
}
+
&-column {
a.progressive {
height: 300px;
@@ -438,67 +525,86 @@
}
}
}
+
.footer {
&__inner {
flex-direction: column;
-ms-flex-direction: column;
justify-content: center;
}
+
&__social {
margin-top: 20px;
}
+
&__copyright {
text-align: center;
}
}
+
.card.other {
padding: 15px;
}
+
.mr-top-bot {
margin: 40px 0;
}
+
.about {
padding: 40px 0;
}
+
.news {
&__sidebar {
display: none;
}
+
&__content {
width: 100%;
margin-right: 0;
}
}
+
.terms {
padding: 40px 0;
+
&__title {
margin-bottom: 20px;
}
+
&__para {
margin-bottom: 20px;
}
}
}
+
+// 700 ================
@include sm-md {
.newsSlider__outer {
display: none;
}
+
.swiper-container {
.slick-list {
padding: 0 0 0 0;
}
}
+
.header__logo {
width: 80px;
+
img {
width: 100%;
}
}
+
.marquee {
display: none;
}
+
.slider {
height: 350px;
+
&__item {
height: 350px;
}
@@ -512,26 +618,32 @@
-ms-flex-direction: column;
border: 1px solid #dcdcdc;
}
+
&-image {
width: 100%;
margin: 15px 0;
+
a.progressive {
height: auto;
}
}
+
&-column {
width: calc(100% - 30px);
margin: 0;
padding: 0 15px;
border: none;
+
.card {
padding: 15px 0;
border-bottom: 1px solid #dcdcdc;
+
&:last-child {
border-bottom: none;
}
}
}
+
&-card {
position: unset;
width: 100%;
@@ -540,48 +652,59 @@
}
}
}
+
.main {
&__body {
&-row {
display: block;
margin: 0;
}
+
.banner__mobile {
display: block;
width: 100%;
}
+
&-column {
width: 100%;
margin: 15px 0;
+
a.progressive {
height: auto;
}
}
}
+
&__banner {
margin-bottom: 40px;
}
}
+
.heading {
&__row {
margin-bottom: 20px;
flex-direction: column;
-ms-flex-direction: column;
}
+
&__image {
width: 100%;
}
+
&__content {
padding: 20px 0;
width: 100%;
+
&-body {
&-para {
height: 120px;
}
}
}
+
a.progressive {
height: auto;
+
img {
height: unset;
width: 100%;
@@ -590,77 +713,93 @@
}
}
}
+
.form {
&__row {
flex-direction: column;
-ms-flex-direction: column;
}
+
&__input {
margin-bottom: 20px;
+
&:first-child {
width: 100%;
margin-right: 0;
}
+
&:last-child {
width: 100%;
margin-left: 0;
}
+
label {
height: unset;
}
}
+
&__btn {
width: 100%;
}
}
+
.main {
&__inner.contact {
padding: 0;
}
}
+
.news {
&__body {
&-row {
margin: 0;
flex-direction: column;
-ms-flex-direction: column;
+
&-image {
margin: 15px 0;
width: 100%;
}
}
+
img {
width: 100%;
margin: 15px 0;
display: block;
}
}
+
&__footer {
flex-direction: column;
-ms-flex-direction: column;
}
+
img {
width: 100%;
margin: 15px 0;
display: block;
}
}
+
.newsSlider {
.newsSlider__item {
img {
height: 250px;
}
+
&-content {
position: unset;
padding: 10px;
border: 1px solid #dfdfdf;
width: calc(100% - 20px);
+
&-link {
color: $text-light-black;
font-size: 12px;
line-height: 16px;
height: 48px;
}
+
&-date {
font-size: 10px;
width: 100%;
@@ -670,40 +809,51 @@
}
}
}
+
+// 540 ================
@include xsm-sm {
.swiper-slide-content-category {
position: absolute;
top: 12px;
right: 15px;
}
+
.auto__container {
padding: 0 10px;
}
+
.slider {
height: 300px;
+
&__item {
height: 300px;
}
}
+
.partnerSlider {
overflow: hidden;
+
&__item {
margin-right: 0;
padding: 5px;
height: unset;
}
}
+
.footer {
&__social {
flex-wrap: wrap;
justify-content: center;
+
&-link {
margin: 5px;
}
}
}
+
.subheader {
z-index: 12;
+
&__inner {
.close {
width: 20px;
@@ -712,19 +862,24 @@
left: 15px;
}
}
+
.nav {
width: calc(100% - 50px);
}
+
.language {
width: calc(100% - 50px);
}
}
+
.swiper-slide {
height: 300px;
}
+
.newsSlider__outer {
display: none;
}
+
.main {
&__body {
&-card {
@@ -732,6 +887,7 @@
}
}
}
+
.popUp {
display: flex;
transform: translateY(100%);
@@ -745,6 +901,7 @@
padding: 40px 20px;
width: calc(100% - 40px);
@include transition;
+
&__inner {
width: 100%;
@@ -752,16 +909,20 @@
display: flex;
align-items: center;
justify-content: space-between;
+
&-logo {
width: 75px;
+
img {
width: 100%;
}
}
+
&-close {
display: flex;
align-items: flex-end;
justify-content: flex-end;
+
svg {
width: 18px;
height: 18px;
@@ -769,8 +930,10 @@
}
}
}
+
&-body {
margin: 15px 0;
+
&-subtitle {
font-size: 16px;
line-height: 20px;
@@ -778,6 +941,7 @@
color: #000000;
text-align: center;
}
+
&-title {
font-size: 20px;
line-height: 24px;
@@ -787,6 +951,7 @@
margin-bottom: 15px;
}
}
+
&-footer {
&-btn {
width: 80%;
@@ -802,6 +967,7 @@
background: $main-color;
display: flex;
}
+
&-close {
text-align: center;
font-size: 16px;
@@ -812,19 +978,147 @@
}
}
}
+
&.active {
transform: translateY(0%);
}
}
+
@keyframes popUp {
0% {
opacity: 0;
transform: translateY(100%);
}
+
100% {
opacity: 1;
transform: translateY(0%);
}
}
-}
+ .comment {
+ &_header {
+ &-title {
+ span {
+ font-size: 18px;
+ }
+ }
+ }
+
+ &_group {
+ margin-top: 10px;
+ width: 100%;
+ flex-direction: column;
+ align-items: unset;
+ }
+
+ .signOut {
+ margin-top: 10px;
+ }
+
+ &_user {
+ &::after {
+ top: 14px;
+ }
+
+ &-img {
+ width: 30px;
+ height: 30px;
+ font-size: 16px;
+ margin-right: 5px;
+ }
+
+ &-name {
+ font-size: 16px;
+ }
+ }
+
+ &_item {
+ &-time {
+ font-size: 12px;
+ }
+ }
+
+ &_txt {
+ font-size: 14px;
+ margin: 10px 0 20px;
+ }
+ }
+
+ .reg_modal {
+ &-form {
+ padding: 30px 0;
+ }
+
+ &-title {
+ font-size: 18px;
+ }
+
+ &-txt {
+ font-size: 14px;
+ margin: 5px 0 15px;
+ }
+
+ &-input {
+ margin-bottom: 15px;
+
+ label {
+ font-size: 14px;
+ }
+
+ input {
+ padding: 10px;
+ font-size: 14px;
+ }
+ }
+
+ // &-row {
+ // flex-direction: column;
+ // justify-content: unset;
+ // align-items: unset;
+ // }
+
+ &-check {
+ label {
+ padding-left: 15px;
+ font-size: 12px;
+
+ &::after,
+ &::before {
+ width: 10px;
+ height: 10px;
+ }
+ }
+ }
+
+ .forgot {
+ font-size: 12px;
+ // margin-top: 20px;
+ }
+
+ .sign {
+ font-size: 15px;
+ padding: 10px 0;
+ }
+
+ .google_sign {
+ font-size: 15px;
+
+ span {
+ width: 20px;
+ height: 20px;
+ }
+ }
+
+ &-signIn {
+ font-size: 14px;
+ flex-direction: column;
+
+ a {
+ margin-left: 0;
+ margin-top: 5px;
+ }
+ }
+
+ }
+}
diff --git a/themes/modern2/template/css/components/3-page/news.scss b/themes/modern2/template/css/components/3-page/news.scss
index f45172ff3..601daf419 100644
--- a/themes/modern2/template/css/components/3-page/news.scss
+++ b/themes/modern2/template/css/components/3-page/news.scss
@@ -4,9 +4,11 @@
align-items: stretch;
padding: 80px 0;
}
+
&__sidebar {
margin-left: 25px;
width: calc(30% - 25px);
+
&-title {
font-size: $h4-size;
line-height: $h4-height;
@@ -15,30 +17,36 @@
margin-bottom: 20px;
color: $text-light-black;
}
+
.card {
padding: 30px 0;
border-bottom: 1px solid #dcdcdc;
+
&__link {
height: unset;
text-overflow: unset;
}
}
}
+
&__content {
width: calc(70% - 25px);
margin-right: 25px;
+
&-header {
display: flex;
align-items: center;
justify-content: space-between;
}
}
+
&__title {
color: $text-black;
font-weight: 700;
font-size: $h2-size;
line-height: $h2-height;
}
+
&__date {
display: flex;
align-items: center;
@@ -47,36 +55,43 @@
color: $text-color-grey;
font-weight: 400;
margin-bottom: 20px;
+
svg {
margin: 0 5px;
}
}
+
&__image {
width: 100%;
margin: 25px 0;
display: block;
+
img {
width: 100%;
height: auto;
}
}
+
&__body {
p {
font-size: $p-size;
line-height: $p-height;
margin-bottom: 20px;
+
img {
width: 90%;
margin: 30px auto;
display: block;
height: auto;
}
+
strong {
a {
color: #4285f4;
}
}
}
+
img {
width: 90%;
margin: 30px auto;
@@ -84,24 +99,30 @@
height: auto;
}
}
+
&__footer {
display: flex;
align-items: center;
justify-content: space-between;
+
&-social {
display: flex;
align-items: center;
+
&-link {
margin-right: 20px;
fill: $main-color;
+
svg {
color: $main-color;
}
}
+
.footer__social-link {
fill: $main-color;
}
}
+
&-name {
font-size: $h2-size;
line-height: $h2-height;
@@ -110,3 +131,472 @@
}
}
}
+
+.comment {
+ padding: 30px 0;
+
+ &_header {
+ background: #242424;
+ border-radius: 5px;
+ margin-bottom: 30px;
+
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ flex-wrap: wrap;
+ padding: 15px 25px;
+
+ &-title {
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 16px;
+ color: #fff;
+
+ span {
+ font-weight: 700;
+ font-size: 22px;
+ line-height: 26px;
+ margin-right: 5px;
+ }
+ }
+
+ &-add {
+ font-weight: 700;
+ font-size: 14px;
+ line-height: 16px;
+ color: #FFFFFF;
+ position: relative;
+ border: 1px solid #fff;
+ padding: 8px 15px;
+ border-radius: 5px;
+ cursor: pointer;
+ }
+ }
+
+ &_group {
+ display: flex;
+ align-items: center;
+ }
+
+ &_client {
+ margin-right: 25px;
+ display: flex;
+ align-items: center;
+
+ span {
+ display: block;
+ width: 20px;
+ height: 20px;
+ margin-right: 5px;
+
+ img {
+ @include ImgCon;
+ margin: 0 !important;
+ }
+ }
+
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 16px;
+ color: #FFFFFF;
+ }
+
+ .signOut {
+ font-weight: 700;
+ font-size: 14px;
+ line-height: 16px;
+ color: #FFFFFF;
+
+ border: 1px solid #fff;
+ border-radius: 5px;
+ display: block;
+ padding: 7px 15px;
+ text-align: center;
+ }
+
+ &_item {
+ padding-bottom: 15px;
+ margin-bottom: 25px;
+ border-bottom: 1px solid #DCDCDC;
+
+ &-header {
+ display: flex;
+ align-items: center;
+ }
+
+ &-time {
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 16px;
+ color: #A2A2A2;
+ }
+
+ .inner-comment {
+ padding-left: 30px;
+ }
+ }
+
+ &_user {
+ display: flex;
+ align-items: center;
+ margin-right: 30px;
+ position: relative;
+
+ &::after {
+ content: '';
+ position: absolute;
+ top: 22px;
+ right: -15px;
+ width: 5px;
+ height: 5px;
+ background: #DCDCDC;
+ }
+
+ &-img {
+ background: #F3F5F7;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-right: 15px;
+ width: 50px;
+ height: 50px;
+
+ font-weight: 400;
+ font-size: 22px;
+ line-height: 26px;
+ color: #242424;
+ }
+
+ &-name {
+ font-weight: 400;
+ font-size: 18px;
+ line-height: 21px;
+ color: #000000;
+ }
+ }
+
+ &_txt {
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 24px;
+ color: #A2A2A2;
+
+ margin: 15px 0 30px;
+ }
+
+ &_reply {
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 1.4;
+ color: #A2A2A2;
+
+ border: 1px solid #A2A2A2;
+ display: inline-block;
+ padding: 7px 20px;
+ cursor: pointer;
+ border-radius: 5px;
+ @include transition;
+
+ &:hover {
+ background: #242424;
+ color: #fff;
+ }
+ }
+
+ .reply_form {
+ margin-top: 25px;
+ // display: none;
+ position: relative;
+
+ max-height: 0;
+ overflow: hidden;
+ @include transition;
+
+ &.active {
+ display: block;
+ }
+
+ &-input {
+ width: 100%;
+ margin-bottom: 20px;
+
+ textarea {
+ width: calc(100% - 35px);
+ padding: 15px;
+ border: 1px solid #DCDCDC;
+
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 16px;
+ font-family: "Roboto", sans-serif;
+
+ resize: vertical;
+ min-height: 110px;
+ max-height: 200px;
+
+ &::placeholder {
+ color: #A2A2A2;
+ }
+ }
+ }
+
+ &-buttons {
+ display: flex;
+ align-items: center;
+ margin: 0 -7px;
+
+ button[type=submit] {
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 19px;
+ color: #FFFFFF;
+ background: #242424;
+ width: calc(50% - 14px);
+ margin: 0 7px;
+
+ text-align: center;
+ display: block;
+ border-radius: 5px;
+ cursor: pointer;
+ padding: 12px 0;
+ @include transition;
+
+ &:hover {
+ background: #302c2c;
+ }
+ }
+
+ button[type=reset] {
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 19px;
+ color: #242424;
+ background: #F3F5F7;
+ width: calc(50% - 14px);
+ margin: 0 7px;
+
+ text-align: center;
+ display: block;
+ border-radius: 5px;
+ cursor: pointer;
+ padding: 12px 0;
+ @include transition;
+
+ &:hover {
+ background: #c8cbce;
+ }
+ }
+ }
+ }
+}
+
+
+.reg_modal {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba(0, 0, 0, .5);
+ z-index: 50;
+ display: none;
+
+ &.active {
+ display: block;
+ }
+
+ &-form {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ @include transform;
+ z-index: 60;
+ background: #fff;
+ border-radius: 10px;
+ max-width: 760px;
+ width: calc(100% - 50px);
+ padding: 50px 0;
+
+ .inner {
+ max-width: 430px;
+ width: calc(100% - 40px);
+ margin: 0 auto;
+ }
+ }
+
+ &-title {
+ font-weight: 700;
+ font-size: 22px;
+ line-height: 26px;
+ color: #242424;
+ }
+
+ &-txt {
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 19px;
+ color: #A2A2A2;
+ margin: 12px 0 30px;
+ }
+
+ &-input {
+ display: block;
+ position: relative;
+ width: 100%;
+ margin-bottom: 24px;
+
+ &:nth-child(2) {
+ margin-bottom: 16px;
+ }
+
+ label {
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 19px;
+ color: #242424;
+ display: block;
+ margin-bottom: 8px;
+ }
+
+ input {
+ border: 1px solid #DCDCDC;
+ padding: 16px;
+ font-weight: 400;
+ font-size: 18px;
+ line-height: 21px;
+ width: calc(100% - 32px);
+
+ &::placeholder {
+ color: #A2A2A2;
+ }
+ }
+ }
+
+ &-row {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 30px;
+ }
+
+ &-check {
+ input {
+ display: none;
+
+ &:checked~.check_label {
+ &::after {
+ display: block;
+ }
+ }
+ }
+
+ label {
+ font-weight: 700;
+ font-size: 14px;
+ line-height: 16px;
+ color: #242424;
+ display: block;
+ cursor: pointer;
+
+ position: relative;
+ padding-left: 25px;
+
+ &::before {
+ content: '';
+ position: absolute;
+ top: 50%;
+ @include transformY;
+ left: 0;
+ width: 15px;
+ height: 15px;
+ border: 1px solid #DCDCDC;
+ border-radius: 50%;
+ }
+
+ &::after {
+ content: '';
+ position: absolute;
+ top: 50%;
+ @include transformY;
+ left: 1px;
+ width: 15px;
+ height: 15px;
+ background: #242424;
+ border-radius: 50%;
+ display: none;
+ }
+ }
+ }
+
+ .forgot {
+ font-weight: 700;
+ font-size: 14px;
+ line-height: 16px;
+ color: #000000;
+ }
+
+ .sign {
+ display: block;
+ font-weight: 400;
+ font-size: 18px;
+ line-height: 21px;
+ color: #FFFFFF;
+ cursor: pointer;
+ border-radius: 5px;
+ background: #242424;
+ padding: 15px 0;
+ width: 100%;
+ margin-bottom: 15px;
+ }
+
+ .google_sign {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border: 1px solid #DCDCDC;
+ border-radius: 5px;
+ cursor: pointer;
+
+ font-weight: 400;
+ font-size: 18px;
+ line-height: 21px;
+ color: #242424;
+
+ width: 100%;
+ padding: 10px 0;
+ background: transparent;
+
+ span {
+ width: 30px;
+ height: 30px;
+ margin-right: 10px;
+
+ img {
+ @include ImgCon;
+ }
+ }
+ }
+
+ &-signIn {
+ text-align: center;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 19px;
+ color: #A2A2A2;
+
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ margin-top: 25px;
+
+
+ a {
+ color: #242424;
+ font-weight: 500;
+ margin-left: 5px;
+ display: inline-block;
+ }
+ }
+}
diff --git a/themes/modern2/template/css/main.css b/themes/modern2/template/css/main.css
index b2fe4a49e..89e1ba4c0 100644
--- a/themes/modern2/template/css/main.css
+++ b/themes/modern2/template/css/main.css
@@ -1,5 +1,5 @@
@charset "UTF-8";
-/***
+/***
====================================================================
Reset
@@ -31,7 +31,7 @@ input::-webkit-inner-spin-button {
margin: 0;
}
-/***
+/***
====================================================================
Global Settings
====================================================================
@@ -1979,6 +1979,422 @@ li {
color: #242424;
}
+.comment {
+ padding: 30px 0;
+}
+.comment_header {
+ background: #242424;
+ border-radius: 5px;
+ margin-bottom: 30px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ flex-wrap: wrap;
+ padding: 15px 25px;
+}
+.comment_header-title {
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 16px;
+ color: #fff;
+}
+.comment_header-title span {
+ font-weight: 700;
+ font-size: 22px;
+ line-height: 26px;
+ margin-right: 5px;
+}
+.comment_header-add {
+ font-weight: 700;
+ font-size: 14px;
+ line-height: 16px;
+ color: #FFFFFF;
+ position: relative;
+ border: 1px solid #fff;
+ padding: 8px 15px;
+ border-radius: 5px;
+ cursor: pointer;
+}
+.comment_group {
+ display: flex;
+ align-items: center;
+}
+.comment_client {
+ margin-right: 25px;
+ display: flex;
+ align-items: center;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 16px;
+ color: #FFFFFF;
+}
+.comment_client span {
+ display: block;
+ width: 20px;
+ height: 20px;
+ margin-right: 5px;
+}
+.comment_client span img {
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+ -o-object-fit: contain;
+ margin: 0 !important;
+}
+.comment .signOut {
+ font-weight: 700;
+ font-size: 14px;
+ line-height: 16px;
+ color: #FFFFFF;
+ border: 1px solid #fff;
+ border-radius: 5px;
+ display: block;
+ padding: 7px 15px;
+ text-align: center;
+}
+.comment_item {
+ padding-bottom: 15px;
+ margin-bottom: 25px;
+ border-bottom: 1px solid #DCDCDC;
+}
+.comment_item-header {
+ display: flex;
+ align-items: center;
+}
+.comment_item-time {
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 16px;
+ color: #A2A2A2;
+}
+.comment_item .inner-comment {
+ padding-left: 30px;
+}
+.comment_user {
+ display: flex;
+ align-items: center;
+ margin-right: 30px;
+ position: relative;
+}
+.comment_user::after {
+ content: "";
+ position: absolute;
+ top: 22px;
+ right: -15px;
+ width: 5px;
+ height: 5px;
+ background: #DCDCDC;
+}
+.comment_user-img {
+ background: #F3F5F7;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-right: 15px;
+ width: 50px;
+ height: 50px;
+ font-weight: 400;
+ font-size: 22px;
+ line-height: 26px;
+ color: #242424;
+}
+.comment_user-name {
+ font-weight: 400;
+ font-size: 18px;
+ line-height: 21px;
+ color: #000000;
+}
+.comment_txt {
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 24px;
+ color: #A2A2A2;
+ margin: 15px 0 30px;
+}
+.comment_reply {
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 1.4;
+ color: #A2A2A2;
+ border: 1px solid #A2A2A2;
+ display: inline-block;
+ padding: 7px 20px;
+ cursor: pointer;
+ border-radius: 5px;
+ transition: all 0.2s ease-in-out 0s;
+ -moz-transition: all 0.2s ease-in-out 0s;
+}
+.comment_reply:hover {
+ background: #242424;
+ color: #fff;
+}
+.comment .reply_form {
+ margin-top: 25px;
+ position: relative;
+ max-height: 0;
+ overflow: hidden;
+ transition: all 0.2s ease-in-out 0s;
+ -moz-transition: all 0.2s ease-in-out 0s;
+}
+.comment .reply_form.active {
+ display: block;
+}
+.comment .reply_form-input {
+ width: 100%;
+ margin-bottom: 20px;
+}
+.comment .reply_form-input textarea {
+ width: calc(100% - 35px);
+ padding: 15px;
+ border: 1px solid #DCDCDC;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 16px;
+ font-family: "Roboto", sans-serif;
+ resize: vertical;
+ min-height: 110px;
+ max-height: 200px;
+}
+.comment .reply_form-input textarea::placeholder {
+ color: #A2A2A2;
+}
+.comment .reply_form-buttons {
+ display: flex;
+ align-items: center;
+ margin: 0 -7px;
+}
+.comment .reply_form-buttons button[type=submit] {
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 19px;
+ color: #FFFFFF;
+ background: #242424;
+ width: calc(50% - 14px);
+ margin: 0 7px;
+ text-align: center;
+ display: block;
+ border-radius: 5px;
+ cursor: pointer;
+ padding: 12px 0;
+ transition: all 0.2s ease-in-out 0s;
+ -moz-transition: all 0.2s ease-in-out 0s;
+}
+.comment .reply_form-buttons button[type=submit]:hover {
+ background: #302c2c;
+}
+.comment .reply_form-buttons button[type=reset] {
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 19px;
+ color: #242424;
+ background: #F3F5F7;
+ width: calc(50% - 14px);
+ margin: 0 7px;
+ text-align: center;
+ display: block;
+ border-radius: 5px;
+ cursor: pointer;
+ padding: 12px 0;
+ transition: all 0.2s ease-in-out 0s;
+ -moz-transition: all 0.2s ease-in-out 0s;
+}
+.comment .reply_form-buttons button[type=reset]:hover {
+ background: #c8cbce;
+}
+
+.reg_modal {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba(0, 0, 0, 0.5);
+ z-index: 50;
+ display: none;
+}
+.reg_modal.active {
+ display: block;
+}
+.reg_modal-form {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ -moz-ransform: translate(-50%, -50%);
+ -o-transform: translate(-50%, -50%);
+ -ms-transform: translate(-50%, -50%);
+ -webkit-transform: translate(-50%, -50%);
+ z-index: 60;
+ background: #fff;
+ border-radius: 10px;
+ max-width: 760px;
+ width: calc(100% - 50px);
+ padding: 50px 0;
+}
+.reg_modal-form .inner {
+ max-width: 430px;
+ width: calc(100% - 40px);
+ margin: 0 auto;
+}
+.reg_modal-title {
+ font-weight: 700;
+ font-size: 22px;
+ line-height: 26px;
+ color: #242424;
+}
+.reg_modal-txt {
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 19px;
+ color: #A2A2A2;
+ margin: 12px 0 30px;
+}
+.reg_modal-input {
+ display: block;
+ position: relative;
+ width: 100%;
+ margin-bottom: 24px;
+}
+.reg_modal-input:nth-child(2) {
+ margin-bottom: 16px;
+}
+.reg_modal-input label {
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 19px;
+ color: #242424;
+ display: block;
+ margin-bottom: 8px;
+}
+.reg_modal-input input {
+ border: 1px solid #DCDCDC;
+ padding: 16px;
+ font-weight: 400;
+ font-size: 18px;
+ line-height: 21px;
+ width: calc(100% - 32px);
+}
+.reg_modal-input input::placeholder {
+ color: #A2A2A2;
+}
+.reg_modal-row {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 30px;
+}
+.reg_modal-check input {
+ display: none;
+}
+.reg_modal-check input:checked ~ .check_label::after {
+ display: block;
+}
+.reg_modal-check label {
+ font-weight: 700;
+ font-size: 14px;
+ line-height: 16px;
+ color: #242424;
+ display: block;
+ cursor: pointer;
+ position: relative;
+ padding-left: 25px;
+}
+.reg_modal-check label::before {
+ content: "";
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ -moz-ransform: translateY(-50%);
+ -o-transform: translateY(-50%);
+ -ms-transform: translateY(-50%);
+ -webkit-transform: translateY(-50%);
+ left: 0;
+ width: 15px;
+ height: 15px;
+ border: 1px solid #DCDCDC;
+ border-radius: 50%;
+}
+.reg_modal-check label::after {
+ content: "";
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ -moz-ransform: translateY(-50%);
+ -o-transform: translateY(-50%);
+ -ms-transform: translateY(-50%);
+ -webkit-transform: translateY(-50%);
+ left: 1px;
+ width: 15px;
+ height: 15px;
+ background: #242424;
+ border-radius: 50%;
+ display: none;
+}
+.reg_modal .forgot {
+ font-weight: 700;
+ font-size: 14px;
+ line-height: 16px;
+ color: #000000;
+}
+.reg_modal .sign {
+ display: block;
+ font-weight: 400;
+ font-size: 18px;
+ line-height: 21px;
+ color: #FFFFFF;
+ cursor: pointer;
+ border-radius: 5px;
+ background: #242424;
+ padding: 15px 0;
+ width: 100%;
+ margin-bottom: 15px;
+}
+.reg_modal .google_sign {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border: 1px solid #DCDCDC;
+ border-radius: 5px;
+ cursor: pointer;
+ font-weight: 400;
+ font-size: 18px;
+ line-height: 21px;
+ color: #242424;
+ width: 100%;
+ padding: 10px 0;
+ background: transparent;
+}
+.reg_modal .google_sign span {
+ width: 30px;
+ height: 30px;
+ margin-right: 10px;
+}
+.reg_modal .google_sign span img {
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+ -o-object-fit: contain;
+}
+.reg_modal-signIn {
+ text-align: center;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 19px;
+ color: #A2A2A2;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ margin-top: 25px;
+}
+.reg_modal-signIn a {
+ color: #242424;
+ font-weight: 500;
+ margin-left: 5px;
+ display: inline-block;
+}
+
.terms {
padding: 80px 0;
}
@@ -2817,4 +3233,86 @@ li {
transform: translateY(0%);
}
}
+ .comment_header-title span {
+ font-size: 18px;
+ }
+ .comment_group {
+ margin-top: 10px;
+ width: 100%;
+ flex-direction: column;
+ align-items: unset;
+ }
+ .comment .signOut {
+ margin-top: 10px;
+ }
+ .comment_user::after {
+ top: 14px;
+ }
+ .comment_user-img {
+ width: 30px;
+ height: 30px;
+ font-size: 16px;
+ margin-right: 5px;
+ }
+ .comment_user-name {
+ font-size: 16px;
+ }
+ .comment_item-time {
+ font-size: 12px;
+ }
+ .comment_txt {
+ font-size: 14px;
+ margin: 10px 0 20px;
+ }
+
+ .reg_modal-form {
+ padding: 30px 0;
+ }
+ .reg_modal-title {
+ font-size: 18px;
+ }
+ .reg_modal-txt {
+ font-size: 14px;
+ margin: 5px 0 15px;
+ }
+ .reg_modal-input {
+ margin-bottom: 15px;
+ }
+ .reg_modal-input label {
+ font-size: 14px;
+ }
+ .reg_modal-input input {
+ padding: 10px;
+ font-size: 14px;
+ }
+ .reg_modal-check label {
+ padding-left: 15px;
+ font-size: 12px;
+ }
+ .reg_modal-check label::after, .reg_modal-check label::before {
+ width: 10px;
+ height: 10px;
+ }
+ .reg_modal .forgot {
+ font-size: 12px;
+ }
+ .reg_modal .sign {
+ font-size: 15px;
+ padding: 10px 0;
+ }
+ .reg_modal .google_sign {
+ font-size: 15px;
+ }
+ .reg_modal .google_sign span {
+ width: 20px;
+ height: 20px;
+ }
+ .reg_modal-signIn {
+ font-size: 14px;
+ flex-direction: column;
+ }
+ .reg_modal-signIn a {
+ margin-left: 0;
+ margin-top: 5px;
+ }
}
\ No newline at end of file
diff --git a/themes/modern2/template/css/prepros.config b/themes/modern2/template/css/prepros.config
index 6795a1a7b..a8993a1ca 100644
--- a/themes/modern2/template/css/prepros.config
+++ b/themes/modern2/template/css/prepros.config
@@ -213,10 +213,10 @@
},
"dart-sass": {
"indentType": "space",
+ "allowWildcardImports": false,
"indentWidth": 2,
"linefeed": "lf",
- "sourceMap": false,
- "allowWildcardImports": false
+ "sourceMap": false
},
"haml": {
"doubleQuoteAttributes": true
@@ -301,6 +301,7 @@
"properties": true,
"pure_funcs": [],
"pure_getters": false,
+ "reduce_funcs": true,
"reduce_vars": true,
"sequences": true,
"side_effects": true,
@@ -315,8 +316,7 @@
"unsafe_proto": false,
"unsafe_regexp": false,
"unsafe_undefined": false,
- "unused": true,
- "reduce_funcs": true
+ "unused": true
},
"mangle": {
"eval": false,
@@ -347,13 +347,13 @@
},
"node-sass": {
"indentType": "space",
+ "allowWildcardImports": false,
"indentWidth": 2,
"linefeed": "lf",
"outputStyle": "expanded",
"precision": 10,
"sourceMap": false,
- "sourceComments": false,
- "allowWildcardImports": false
+ "sourceComments": false
},
"png": {
"quality": 90
diff --git a/themes/modern2/template/css/style.css b/themes/modern2/template/css/style.css
index 4839aef8b..f5f795f09 100644
--- a/themes/modern2/template/css/style.css
+++ b/themes/modern2/template/css/style.css
@@ -17,13 +17,11 @@ body {
width: 100%;
}
-
.right_top-title {
display: flex;
justify-content: space-between;
align-items: center;
}
-
.right_top-title-text {
width: 17rem;
font-size: 2rem;
@@ -91,7 +89,7 @@ body {
margin-bottom: 1.5rem;
}
.right_top-content:last-child{
- margin-bottom: 4rem;
+ margin-bottom: 4rem;
}
.right_top-content-bottom-text {
text-decoration: none;
@@ -106,11 +104,11 @@ body {
border: 0.01rem solid rgba(0, 0, 0, 15%);
}
/* .hr-line:last-child{
- display: none; */
-}
+ display: none; } */
+
@media screen and (min-width: 1400px){
.right_top-line{
- max-width: 47%;
+ max-width: 47%;
}
}
/* ========================================== */
@@ -136,4 +134,67 @@ body {
.right-top-content-date-2 {
margin-top: 5rem;
-}
\ No newline at end of file
+}
+.event__body-column .card {
+ padding: 10px 0;
+ border-bottom: 1px solid #dcdcdc;
+}
+
+.card__link {
+ color: #000;
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 25px;
+ margin: 5px 0 0 0;
+ display: block;
+ height: 49px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.card {
+ position: relative;
+ padding: 21px 30px;
+ background: #ffffff;
+}
+
+.event__header {
+ margin-bottom: 25px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ position: relative;
+}
+.main {
+ margin-top: 20px;
+}
+.event {
+ margin: 30px 0;
+ margin-bottom: 70px;
+}
+.main__banner {
+ width: 100%;
+ height: auto;
+ margin-bottom: 30px;
+}
+.main__body-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 35px;
+ position: relative;
+}
+.partner__title {
+ font-size: 20px;
+ line-height: 26px;
+ font-weight: 700;
+ color: #242424;
+ margin-bottom: 30px;
+}
+
+.main__body-row {
+ margin: 0px -20px 50px -20px;
+ display: flex;
+ align-items: stretch;
+ flex-wrap: wrap;
+}
diff --git a/themes/modern2/template/images/google.png b/themes/modern2/template/images/google.png
new file mode 100644
index 000000000..dce7870c8
Binary files /dev/null and b/themes/modern2/template/images/google.png differ
diff --git a/themes/modern2/template/images/svg/user.svg b/themes/modern2/template/images/svg/user.svg
new file mode 100644
index 000000000..0134d36c8
--- /dev/null
+++ b/themes/modern2/template/images/svg/user.svg
@@ -0,0 +1,4 @@
+
+
diff --git a/themes/modern2/template/js/main.js b/themes/modern2/template/js/main.js
index 54633ae4c..db10b8031 100644
--- a/themes/modern2/template/js/main.js
+++ b/themes/modern2/template/js/main.js
@@ -149,3 +149,4 @@ if (
);
// lazyload end
+
diff --git a/themes/modern2/template/news.html b/themes/modern2/template/news.html
index e37d5f5b0..32f18a54e 100644
--- a/themes/modern2/template/news.html
+++ b/themes/modern2/template/news.html
@@ -16,8 +16,7 @@
-
+
+ + 22 + + Comments +
+ ++ Add a comment +
++ + 22 + + Comments +
+ ++ Aman Amanow +
++ Aman Amanow +
++ Aman Amanow +
+