diff --git a/plugins/akami/tps/controllers/PortfolioCategory.php b/plugins/akami/tps/controllers/PortfolioCategory.php new file mode 100755 index 0000000..373ea8d --- /dev/null +++ b/plugins/akami/tps/controllers/PortfolioCategory.php @@ -0,0 +1,18 @@ + + = e(trans('backend::lang.form.create')) ?> + + diff --git a/plugins/akami/tps/controllers/portfoliocategory/config_form.yaml b/plugins/akami/tps/controllers/portfoliocategory/config_form.yaml new file mode 100755 index 0000000..a87acbb --- /dev/null +++ b/plugins/akami/tps/controllers/portfoliocategory/config_form.yaml @@ -0,0 +1,10 @@ +name: PortfolioCategory +form: $/akami/tps/models/portfoliocategory/fields.yaml +modelClass: Akami\Tps\Models\PortfolioCategory +defaultRedirect: akami/tps/portfoliocategory +create: + redirect: 'akami/tps/portfoliocategory/update/:id' + redirectClose: akami/tps/portfoliocategory +update: + redirect: akami/tps/portfoliocategory + redirectClose: akami/tps/portfoliocategory diff --git a/plugins/akami/tps/controllers/portfoliocategory/config_list.yaml b/plugins/akami/tps/controllers/portfoliocategory/config_list.yaml new file mode 100755 index 0000000..05064f0 --- /dev/null +++ b/plugins/akami/tps/controllers/portfoliocategory/config_list.yaml @@ -0,0 +1,12 @@ +list: $/akami/tps/models/portfoliocategory/columns.yaml +modelClass: Akami\Tps\Models\PortfolioCategory +title: PortfolioCategory +noRecordsMessage: 'backend::lang.list.no_records' +showSetup: true +showCheckboxes: true +recordsPerPage: 20 +toolbar: + buttons: list_toolbar + search: + prompt: 'backend::lang.list.search_prompt' +recordUrl: 'akami/tps/portfoliocategory/update/:id' diff --git a/plugins/akami/tps/controllers/portfoliocategory/create.htm b/plugins/akami/tps/controllers/portfoliocategory/create.htm new file mode 100755 index 0000000..57c94b2 --- /dev/null +++ b/plugins/akami/tps/controllers/portfoliocategory/create.htm @@ -0,0 +1,46 @@ + +
= e(trans('backend::lang.form.return_to_list')) ?>
+ \ No newline at end of file diff --git a/plugins/akami/tps/controllers/portfoliocategory/index.htm b/plugins/akami/tps/controllers/portfoliocategory/index.htm new file mode 100755 index 0000000..ea43a36 --- /dev/null +++ b/plugins/akami/tps/controllers/portfoliocategory/index.htm @@ -0,0 +1 @@ += $this->listRender() ?> diff --git a/plugins/akami/tps/controllers/portfoliocategory/preview.htm b/plugins/akami/tps/controllers/portfoliocategory/preview.htm new file mode 100755 index 0000000..5959ecc --- /dev/null +++ b/plugins/akami/tps/controllers/portfoliocategory/preview.htm @@ -0,0 +1,22 @@ + ++ + = e(trans('backend::lang.form.return_to_list')) ?> + +
\ No newline at end of file diff --git a/plugins/akami/tps/controllers/portfoliocategory/update.htm b/plugins/akami/tps/controllers/portfoliocategory/update.htm new file mode 100755 index 0000000..4bbacfc --- /dev/null +++ b/plugins/akami/tps/controllers/portfoliocategory/update.htm @@ -0,0 +1,54 @@ + += e(trans('backend::lang.form.return_to_list')) ?>
+ \ No newline at end of file diff --git a/plugins/akami/tps/models/Portfolio.php b/plugins/akami/tps/models/Portfolio.php index ff2b063..8af9077 100755 --- a/plugins/akami/tps/models/Portfolio.php +++ b/plugins/akami/tps/models/Portfolio.php @@ -1,37 +1,51 @@ - \Akami\Tps\Models\PortfolioCategory::class + ]; + + + public function scopeGetBYCategory($query, $id) + { + if($id){ + return $query->where('category_id', $id); + } + } + + + public $jsonable = ['img']; + + /** + * @var array Validation rules + */ + public $rules = [ + ]; +} diff --git a/plugins/akami/tps/models/PortfolioCategory.php b/plugins/akami/tps/models/PortfolioCategory.php new file mode 100755 index 0000000..c775e52 --- /dev/null +++ b/plugins/akami/tps/models/PortfolioCategory.php @@ -0,0 +1,33 @@ +engine = 'InnoDB'; + $table->increments('id')->unsigned(); + $table->timestamp('created_at')->nullable(); + $table->timestamp('updated_at')->nullable(); + $table->timestamp('deleted_at')->nullable(); + $table->string('name')->nullable(); + $table->text('note')->nullable(); + }); + } + + public function down() + { + Schema::dropIfExists('akami_tps_categories'); + } +} diff --git a/plugins/akami/tps/updates/builder_table_update_akami_tps_portfolio_2.php b/plugins/akami/tps/updates/builder_table_update_akami_tps_portfolio_2.php new file mode 100755 index 0000000..4b0d5c1 --- /dev/null +++ b/plugins/akami/tps/updates/builder_table_update_akami_tps_portfolio_2.php @@ -0,0 +1,23 @@ +integer('category_id')->nullable(); + }); + } + + public function down() + { + Schema::table('akami_tps_portfolio', function($table) + { + $table->dropColumn('category_id'); + }); + } +} diff --git a/plugins/akami/tps/updates/version.yaml b/plugins/akami/tps/updates/version.yaml index 0052f24..2213c68 100755 --- a/plugins/akami/tps/updates/version.yaml +++ b/plugins/akami/tps/updates/version.yaml @@ -27,3 +27,9 @@ 1.0.10: - 'Updated table akami_tps_service_page' - builder_table_update_akami_tps_service_page_2.php +1.0.11: + - 'Created table akami_tps_categories' + - builder_table_create_akami_tps_categories.php +1.0.12: + - 'Updated table akami_tps_portfolio' + - builder_table_update_akami_tps_portfolio_2.php diff --git a/themes/tps/assets/css/components/3-page/home.scss b/themes/tps/assets/css/components/3-page/home.scss index a6688c9..d7e7f91 100644 --- a/themes/tps/assets/css/components/3-page/home.scss +++ b/themes/tps/assets/css/components/3-page/home.scss @@ -895,6 +895,16 @@ } } } + + .slick { + &-dots { + li { + &:nth-of-type(n+12) { + display: none; + } + } + } + } } // Client end ========================= diff --git a/themes/tps/assets/css/main.css b/themes/tps/assets/css/main.css index 67a63d9..ad16dbb 100644 --- a/themes/tps/assets/css/main.css +++ b/themes/tps/assets/css/main.css @@ -1802,6 +1802,9 @@ svg.active .svg-elem-21 { -webkit-transform: scale(1.05); transform: scale(1.05); } +.client .slick-dots li:nth-of-type(n+12) { + display: none; +} .title-animate { animation: typing 3.5s steps(40, end); @@ -2658,7 +2661,6 @@ svg.active .svg-elem-21 { .about_video-box { height: 470px; } - .gallery { padding: 80px 0; } @@ -2668,7 +2670,6 @@ svg.active .svg-elem-21 { .gallery .gal_slider-item { height: 300px !important; } - .service.page .service_box { width: calc(100% + 60px); } @@ -2689,7 +2690,6 @@ svg.active .svg-elem-21 { .hero .page_box-link { font-size: 16px; } - .about_box { -webkit-box-orient: vertical; -webkit-box-direction: normal; @@ -2724,14 +2724,12 @@ svg.active .svg-elem-21 { width: 13px; height: 17px; } - .service_item-title { font-size: 14px; } .service_item-txt { font-size: 13px; } - .contact { padding: 70px 0; } @@ -2739,7 +2737,6 @@ svg.active .svg-elem-21 { font-size: 30px; margin-bottom: 30px; } - .client_title { font-size: 30px; margin-bottom: 30px; @@ -2757,7 +2754,6 @@ svg.active .svg-elem-21 { .client_item { height: 145px !important; } - .footer .logo { width: 160px; height: 55px; @@ -2767,7 +2763,6 @@ svg.active .svg-elem-21 { .auto_container { padding: 0 35px; } - .header .burger { display: -webkit-box; display: -ms-flexbox; @@ -2902,7 +2897,10 @@ svg.active .svg-elem-21 { .header .nav .service_nav { top: -100px; } +<<<<<<< HEAD +======= +>>>>>>> 4d144c51944115d184406427a566d71cd39df45d .hero_item-title { font-size: 22px; } @@ -2944,7 +2942,6 @@ svg.active .svg-elem-21 { object-fit: contain; -o-object-fit: contain; } - .about { padding: 35px 0 120px; } @@ -2954,14 +2951,20 @@ svg.active .svg-elem-21 { .about_video-box { height: 385px; } +<<<<<<< HEAD +======= +>>>>>>> 4d144c51944115d184406427a566d71cd39df45d .about.page .about_box-item-title { font-size: 18px; } .about.page .about_box-item-txt { font-size: 14px; } +<<<<<<< HEAD +======= +>>>>>>> 4d144c51944115d184406427a566d71cd39df45d .contact_box { -webkit-box-orient: vertical; -webkit-box-direction: normal; @@ -2986,7 +2989,6 @@ svg.active .svg-elem-21 { width: 100%; margin-left: 0; } - .service .inner { height: 600px; } @@ -3005,14 +3007,16 @@ svg.active .svg-elem-21 { .gallery_box-item { width: calc(50% - 2px); } - .service.page .service_box { width: calc(100% + 70px); } .service.page .service_box .slick-list { padding: 0 170px 0 0 !important; } +<<<<<<< HEAD +======= +>>>>>>> 4d144c51944115d184406427a566d71cd39df45d .about.page .about_box-item { width: calc(50% - 82px); } @@ -3038,7 +3042,6 @@ svg.active .svg-elem-21 { .header .logo_group-txt { width: 95px; } - .crumb { padding: 180px 0 40px; } @@ -3049,7 +3052,6 @@ svg.active .svg-elem-21 { line-height: 30px; font-size: 14px; } - .hero_item { height: 800px !important; } @@ -3077,7 +3079,6 @@ svg.active .svg-elem-21 { width: 17px; right: -24px; } - .about { padding-top: 0; } @@ -3104,7 +3105,6 @@ svg.active .svg-elem-21 { width: 13px; height: 13px; } - .contact { padding: 50px 0; } @@ -3122,7 +3122,6 @@ svg.active .svg-elem-21 { padding: 12px 30px; line-height: 30px; } - .client_title { font-size: 26px; margin-bottom: 25px; @@ -3137,7 +3136,6 @@ svg.active .svg-elem-21 { width: 12px; height: 12px; } - .footer_box { -webkit-box-orient: vertical; -webkit-box-direction: normal; @@ -3152,7 +3150,6 @@ svg.active .svg-elem-21 { line-height: 30px; text-align: center; } - .gallery_box-item { width: calc(50% - 2px); height: 245px; @@ -3167,14 +3164,16 @@ svg.active .svg-elem-21 { .gallery .gal_slider-item { height: 245px !important; } - .service.page .service_box-item { min-width: 390px; } .service.page .service_box-item-photo { height: 280px; } +<<<<<<< HEAD +======= +>>>>>>> 4d144c51944115d184406427a566d71cd39df45d .main_title { font-size: 20px; } @@ -3204,7 +3203,6 @@ svg.active .svg-elem-21 { .gallery_box-item { width: calc(100% - 2px); } - .service.page .service_box { width: 100%; } @@ -3225,11 +3223,17 @@ svg.active .svg-elem-21 { .service.page .service_list li p { line-height: 28px; } +<<<<<<< HEAD .about.page .about_box-item { width: calc(100% - 82px); } +======= + .about.page .about_box-item { + width: calc(100% - 82px); + } +>>>>>>> 4d144c51944115d184406427a566d71cd39df45d .modal_inner { height: unset; } @@ -3238,11 +3242,9 @@ svg.active .svg-elem-21 { .auto_container { padding: 0 20px; } - .header { top: 30px; } - .crumb { padding: 180px 0 40px; } @@ -3253,18 +3255,15 @@ svg.active .svg-elem-21 { line-height: 30px; font-size: 14px; } - .hero_item { height: 700px !important; } - .about { margin-top: -20px; } .about_video-box { height: 230px; } - .service.page .service_box { width: calc(100% + 0px); } diff --git a/themes/tps/assets/new/css/.DS_Store b/themes/tps/assets/new/css/.DS_Store new file mode 100644 index 0000000..c98d36e Binary files /dev/null and b/themes/tps/assets/new/css/.DS_Store differ diff --git a/themes/tps/assets/new/css/animate.css b/themes/tps/assets/new/css/animate.css new file mode 100644 index 0000000..ec8e9fc --- /dev/null +++ b/themes/tps/assets/new/css/animate.css @@ -0,0 +1,2816 @@ +@charset "UTF-8"; + + +.animated { + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.animated.hinge { + -webkit-animation-duration: 2s; + animation-duration: 2s; +} + +@-webkit-keyframes bounce { + + 0%, + 20%, + 50%, + 80%, + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + } + + 40% { + -webkit-transform: translateY(-30px); + transform: translateY(-30px); + } + + 60% { + -webkit-transform: translateY(-15px); + transform: translateY(-15px); + } +} + +@keyframes bounce { + + 0%, + 20%, + 50%, + 80%, + 100% { + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } + + 40% { + -webkit-transform: translateY(-30px); + -ms-transform: translateY(-30px); + transform: translateY(-30px); + } + + 60% { + -webkit-transform: translateY(-15px); + -ms-transform: translateY(-15px); + transform: translateY(-15px); + } +} + +.bounce { + -webkit-animation-name: bounce; + animation-name: bounce; +} + +@-webkit-keyframes flash { + + 0%, + 50%, + 100% { + opacity: 1; + } + + 25%, + 75% { + opacity: 0; + } +} + +@keyframes flash { + + 0%, + 50%, + 100% { + opacity: 1; + } + + 25%, + 75% { + opacity: 0; + } +} + +.flash { + -webkit-animation-name: flash; + animation-name: flash; +} + +/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ + +@-webkit-keyframes pulse { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + } + + 50% { + -webkit-transform: scale(1.1); + transform: scale(1.1); + } + + 100% { + -webkit-transform: scale(1); + transform: scale(1); + } +} + +@keyframes pulse { + 0% { + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + } + + 50% { + -webkit-transform: scale(1.1); + -ms-transform: scale(1.1); + transform: scale(1.1); + } + + 100% { + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + } +} + +.pulse { + -webkit-animation-name: pulse; + animation-name: pulse; +} + +@-webkit-keyframes shake { + + 0%, + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + } + + 10%, + 30%, + 50%, + 70%, + 90% { + -webkit-transform: translateX(-10px); + transform: translateX(-10px); + } + + 20%, + 40%, + 60%, + 80% { + -webkit-transform: translateX(10px); + transform: translateX(10px); + } +} + +@keyframes shake { + + 0%, + 100% { + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } + + 10%, + 30%, + 50%, + 70%, + 90% { + -webkit-transform: translateX(-10px); + -ms-transform: translateX(-10px); + transform: translateX(-10px); + } + + 20%, + 40%, + 60%, + 80% { + -webkit-transform: translateX(10px); + -ms-transform: translateX(10px); + transform: translateX(10px); + } +} + +.shake { + -webkit-animation-name: shake; + animation-name: shake; +} + +@-webkit-keyframes swing { + 20% { + -webkit-transform: rotate(15deg); + transform: rotate(15deg); + } + + 40% { + -webkit-transform: rotate(-10deg); + transform: rotate(-10deg); + } + + 60% { + -webkit-transform: rotate(5deg); + transform: rotate(5deg); + } + + 80% { + -webkit-transform: rotate(-5deg); + transform: rotate(-5deg); + } + + 100% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } +} + +@keyframes swing { + 20% { + -webkit-transform: rotate(15deg); + -ms-transform: rotate(15deg); + transform: rotate(15deg); + } + + 40% { + -webkit-transform: rotate(-10deg); + -ms-transform: rotate(-10deg); + transform: rotate(-10deg); + } + + 60% { + -webkit-transform: rotate(5deg); + -ms-transform: rotate(5deg); + transform: rotate(5deg); + } + + 80% { + -webkit-transform: rotate(-5deg); + -ms-transform: rotate(-5deg); + transform: rotate(-5deg); + } + + 100% { + -webkit-transform: rotate(0deg); + -ms-transform: rotate(0deg); + transform: rotate(0deg); + } +} + +.swing { + -webkit-transform-origin: top center; + -ms-transform-origin: top center; + transform-origin: top center; + -webkit-animation-name: swing; + animation-name: swing; +} + +@-webkit-keyframes tada { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + } + + 10%, + 20% { + -webkit-transform: scale(0.9) rotate(-3deg); + transform: scale(0.9) rotate(-3deg); + } + + 30%, + 50%, + 70%, + 90% { + -webkit-transform: scale(1.1) rotate(3deg); + transform: scale(1.1) rotate(3deg); + } + + 40%, + 60%, + 80% { + -webkit-transform: scale(1.1) rotate(-3deg); + transform: scale(1.1) rotate(-3deg); + } + + 100% { + -webkit-transform: scale(1) rotate(0); + transform: scale(1) rotate(0); + } +} + +@keyframes tada { + 0% { + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + } + + 10%, + 20% { + -webkit-transform: scale(0.9) rotate(-3deg); + -ms-transform: scale(0.9) rotate(-3deg); + transform: scale(0.9) rotate(-3deg); + } + + 30%, + 50%, + 70%, + 90% { + -webkit-transform: scale(1.1) rotate(3deg); + -ms-transform: scale(1.1) rotate(3deg); + transform: scale(1.1) rotate(3deg); + } + + 40%, + 60%, + 80% { + -webkit-transform: scale(1.1) rotate(-3deg); + -ms-transform: scale(1.1) rotate(-3deg); + transform: scale(1.1) rotate(-3deg); + } + + 100% { + -webkit-transform: scale(1) rotate(0); + -ms-transform: scale(1) rotate(0); + transform: scale(1) rotate(0); + } +} + +.tada { + -webkit-animation-name: tada; + animation-name: tada; +} + +/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ + +@-webkit-keyframes wobble { + 0% { + -webkit-transform: translateX(0%); + transform: translateX(0%); + } + + 15% { + -webkit-transform: translateX(-25%) rotate(-5deg); + transform: translateX(-25%) rotate(-5deg); + } + + 30% { + -webkit-transform: translateX(20%) rotate(3deg); + transform: translateX(20%) rotate(3deg); + } + + 45% { + -webkit-transform: translateX(-15%) rotate(-3deg); + transform: translateX(-15%) rotate(-3deg); + } + + 60% { + -webkit-transform: translateX(10%) rotate(2deg); + transform: translateX(10%) rotate(2deg); + } + + 75% { + -webkit-transform: translateX(-5%) rotate(-1deg); + transform: translateX(-5%) rotate(-1deg); + } + + 100% { + -webkit-transform: translateX(0%); + transform: translateX(0%); + } +} + +@keyframes wobble { + 0% { + -webkit-transform: translateX(0%); + -ms-transform: translateX(0%); + transform: translateX(0%); + } + + 15% { + -webkit-transform: translateX(-25%) rotate(-5deg); + -ms-transform: translateX(-25%) rotate(-5deg); + transform: translateX(-25%) rotate(-5deg); + } + + 30% { + -webkit-transform: translateX(20%) rotate(3deg); + -ms-transform: translateX(20%) rotate(3deg); + transform: translateX(20%) rotate(3deg); + } + + 45% { + -webkit-transform: translateX(-15%) rotate(-3deg); + -ms-transform: translateX(-15%) rotate(-3deg); + transform: translateX(-15%) rotate(-3deg); + } + + 60% { + -webkit-transform: translateX(10%) rotate(2deg); + -ms-transform: translateX(10%) rotate(2deg); + transform: translateX(10%) rotate(2deg); + } + + 75% { + -webkit-transform: translateX(-5%) rotate(-1deg); + -ms-transform: translateX(-5%) rotate(-1deg); + transform: translateX(-5%) rotate(-1deg); + } + + 100% { + -webkit-transform: translateX(0%); + -ms-transform: translateX(0%); + transform: translateX(0%); + } +} + +.wobble { + -webkit-animation-name: wobble; + animation-name: wobble; +} + +@-webkit-keyframes bounceIn { + 0% { + opacity: 0; + -webkit-transform: scale(.3); + transform: scale(.3); + } + + 50% { + opacity: 1; + -webkit-transform: scale(1.05); + transform: scale(1.05); + } + + 70% { + -webkit-transform: scale(.9); + transform: scale(.9); + } + + 100% { + -webkit-transform: scale(1); + transform: scale(1); + } +} + +@keyframes bounceIn { + 0% { + opacity: 0; + -webkit-transform: scale(.3); + -ms-transform: scale(.3); + transform: scale(.3); + } + + 50% { + opacity: 1; + -webkit-transform: scale(1.05); + -ms-transform: scale(1.05); + transform: scale(1.05); + } + + 70% { + -webkit-transform: scale(.9); + -ms-transform: scale(.9); + transform: scale(.9); + } + + 100% { + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + } +} + +.bounceIn { + -webkit-animation-name: bounceIn; + animation-name: bounceIn; +} + +@-webkit-keyframes bounceInDown { + 0% { + opacity: 0; + -webkit-transform: translateY(-2000px); + transform: translateY(-2000px); + } + + 60% { + opacity: 1; + -webkit-transform: translateY(30px); + transform: translateY(30px); + } + + 80% { + -webkit-transform: translateY(-10px); + transform: translateY(-10px); + } + + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + } +} + +@keyframes bounceInDown { + 0% { + opacity: 0; + -webkit-transform: translateY(-2000px); + -ms-transform: translateY(-2000px); + transform: translateY(-2000px); + } + + 60% { + opacity: 1; + -webkit-transform: translateY(30px); + -ms-transform: translateY(30px); + transform: translateY(30px); + } + + 80% { + -webkit-transform: translateY(-10px); + -ms-transform: translateY(-10px); + transform: translateY(-10px); + } + + 100% { + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } +} + +.bounceInDown { + -webkit-animation-name: bounceInDown; + animation-name: bounceInDown; +} + +@-webkit-keyframes bounceInLeft { + 0% { + opacity: 0; + -webkit-transform: translateX(-2000px); + transform: translateX(-2000px); + } + + 60% { + opacity: 1; + -webkit-transform: translateX(30px); + transform: translateX(30px); + } + + 80% { + -webkit-transform: translateX(-10px); + transform: translateX(-10px); + } + + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + } +} + +@keyframes bounceInLeft { + 0% { + opacity: 0; + -webkit-transform: translateX(-2000px); + -ms-transform: translateX(-2000px); + transform: translateX(-2000px); + } + + 60% { + opacity: 1; + -webkit-transform: translateX(30px); + -ms-transform: translateX(30px); + transform: translateX(30px); + } + + 80% { + -webkit-transform: translateX(-10px); + -ms-transform: translateX(-10px); + transform: translateX(-10px); + } + + 100% { + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } +} + +.bounceInLeft { + -webkit-animation-name: bounceInLeft; + animation-name: bounceInLeft; +} + +@-webkit-keyframes bounceInRight { + 0% { + opacity: 0; + -webkit-transform: translateX(2000px); + transform: translateX(2000px); + } + + 60% { + opacity: 1; + -webkit-transform: translateX(-30px); + transform: translateX(-30px); + } + + 80% { + -webkit-transform: translateX(10px); + transform: translateX(10px); + } + + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + } +} + +@keyframes bounceInRight { + 0% { + opacity: 0; + -webkit-transform: translateX(2000px); + -ms-transform: translateX(2000px); + transform: translateX(2000px); + } + + 60% { + opacity: 1; + -webkit-transform: translateX(-30px); + -ms-transform: translateX(-30px); + transform: translateX(-30px); + } + + 80% { + -webkit-transform: translateX(10px); + -ms-transform: translateX(10px); + transform: translateX(10px); + } + + 100% { + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } +} + +.bounceInRight { + -webkit-animation-name: bounceInRight; + animation-name: bounceInRight; +} + +@-webkit-keyframes bounceInUp { + 0% { + opacity: 0; + -webkit-transform: translateY(2000px); + transform: translateY(2000px); + } + + 60% { + opacity: 1; + -webkit-transform: translateY(-30px); + transform: translateY(-30px); + } + + 80% { + -webkit-transform: translateY(10px); + transform: translateY(10px); + } + + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + } +} + +@keyframes bounceInUp { + 0% { + opacity: 0; + -webkit-transform: translateY(2000px); + -ms-transform: translateY(2000px); + transform: translateY(2000px); + } + + 60% { + opacity: 1; + -webkit-transform: translateY(-30px); + -ms-transform: translateY(-30px); + transform: translateY(-30px); + } + + 80% { + -webkit-transform: translateY(10px); + -ms-transform: translateY(10px); + transform: translateY(10px); + } + + 100% { + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } +} + +.bounceInUp { + -webkit-animation-name: bounceInUp; + animation-name: bounceInUp; +} + +@-webkit-keyframes bounceOut { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + } + + 25% { + -webkit-transform: scale(.95); + transform: scale(.95); + } + + 50% { + opacity: 1; + -webkit-transform: scale(1.1); + transform: scale(1.1); + } + + 100% { + opacity: 0; + -webkit-transform: scale(.3); + transform: scale(.3); + } +} + +@keyframes bounceOut { + 0% { + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + } + + 25% { + -webkit-transform: scale(.95); + -ms-transform: scale(.95); + transform: scale(.95); + } + + 50% { + opacity: 1; + -webkit-transform: scale(1.1); + -ms-transform: scale(1.1); + transform: scale(1.1); + } + + 100% { + opacity: 0; + -webkit-transform: scale(.3); + -ms-transform: scale(.3); + transform: scale(.3); + } +} + +.bounceOut { + -webkit-animation-name: bounceOut; + animation-name: bounceOut; +} + +@-webkit-keyframes bounceOutDown { + 0% { + -webkit-transform: translateY(0); + transform: translateY(0); + } + + 20% { + opacity: 1; + -webkit-transform: translateY(-20px); + transform: translateY(-20px); + } + + 100% { + opacity: 0; + -webkit-transform: translateY(2000px); + transform: translateY(2000px); + } +} + +@keyframes bounceOutDown { + 0% { + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } + + 20% { + opacity: 1; + -webkit-transform: translateY(-20px); + -ms-transform: translateY(-20px); + transform: translateY(-20px); + } + + 100% { + opacity: 0; + -webkit-transform: translateY(2000px); + -ms-transform: translateY(2000px); + transform: translateY(2000px); + } +} + +.bounceOutDown { + -webkit-animation-name: bounceOutDown; + animation-name: bounceOutDown; +} + +@-webkit-keyframes bounceOutLeft { + 0% { + -webkit-transform: translateX(0); + transform: translateX(0); + } + + 20% { + opacity: 1; + -webkit-transform: translateX(20px); + transform: translateX(20px); + } + + 100% { + opacity: 0; + -webkit-transform: translateX(-2000px); + transform: translateX(-2000px); + } +} + +@keyframes bounceOutLeft { + 0% { + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } + + 20% { + opacity: 1; + -webkit-transform: translateX(20px); + -ms-transform: translateX(20px); + transform: translateX(20px); + } + + 100% { + opacity: 0; + -webkit-transform: translateX(-2000px); + -ms-transform: translateX(-2000px); + transform: translateX(-2000px); + } +} + +.bounceOutLeft { + -webkit-animation-name: bounceOutLeft; + animation-name: bounceOutLeft; +} + +@-webkit-keyframes bounceOutRight { + 0% { + -webkit-transform: translateX(0); + transform: translateX(0); + } + + 20% { + opacity: 1; + -webkit-transform: translateX(-20px); + transform: translateX(-20px); + } + + 100% { + opacity: 0; + -webkit-transform: translateX(2000px); + transform: translateX(2000px); + } +} + +@keyframes bounceOutRight { + 0% { + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } + + 20% { + opacity: 1; + -webkit-transform: translateX(-20px); + -ms-transform: translateX(-20px); + transform: translateX(-20px); + } + + 100% { + opacity: 0; + -webkit-transform: translateX(2000px); + -ms-transform: translateX(2000px); + transform: translateX(2000px); + } +} + +.bounceOutRight { + -webkit-animation-name: bounceOutRight; + animation-name: bounceOutRight; +} + +@-webkit-keyframes bounceOutUp { + 0% { + -webkit-transform: translateY(0); + transform: translateY(0); + } + + 20% { + opacity: 1; + -webkit-transform: translateY(20px); + transform: translateY(20px); + } + + 100% { + opacity: 0; + -webkit-transform: translateY(-2000px); + transform: translateY(-2000px); + } +} + +@keyframes bounceOutUp { + 0% { + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } + + 20% { + opacity: 1; + -webkit-transform: translateY(20px); + -ms-transform: translateY(20px); + transform: translateY(20px); + } + + 100% { + opacity: 0; + -webkit-transform: translateY(-2000px); + -ms-transform: translateY(-2000px); + transform: translateY(-2000px); + } +} + +.bounceOutUp { + -webkit-animation-name: bounceOutUp; + animation-name: bounceOutUp; +} + +@-webkit-keyframes fadeIn { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } +} + +@keyframes fadeIn { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } +} + +.fadeIn { + -webkit-animation-name: fadeIn; + animation-name: fadeIn; +} + +@-webkit-keyframes fadeInDown { + 0% { + opacity: 0; + -webkit-transform: translateY(-20px); + transform: translateY(-20px); + } + + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } +} + +@keyframes fadeInDown { + 0% { + opacity: 0; + -webkit-transform: translateY(-20px); + -ms-transform: translateY(-20px); + transform: translateY(-20px); + } + + 100% { + opacity: 1; + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } +} + +.fadeInDown { + -webkit-animation-name: fadeInDown; + animation-name: fadeInDown; +} + +@-webkit-keyframes fadeInDownBig { + 0% { + opacity: 0; + -webkit-transform: translateY(-2000px); + transform: translateY(-2000px); + } + + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } +} + +@keyframes fadeInDownBig { + 0% { + opacity: 0; + -webkit-transform: translateY(-2000px); + -ms-transform: translateY(-2000px); + transform: translateY(-2000px); + } + + 100% { + opacity: 1; + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } +} + +.fadeInDownBig { + -webkit-animation-name: fadeInDownBig; + animation-name: fadeInDownBig; +} + +@-webkit-keyframes fadeInLeft { + 0% { + opacity: 0; + -webkit-transform: translateX(-40px); + transform: translateX(-40px); + } + + 100% { + opacity: 1; + -webkit-transform: translateX(0); + transform: translateX(0); + } +} + +@keyframes fadeInLeft { + 0% { + opacity: 0; + -webkit-transform: translateX(-40px); + -ms-transform: translateX(-40px); + transform: translateX(-40px); + } + + 100% { + opacity: 1; + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } +} + +.fadeInLeft { + -webkit-animation-name: fadeInLeft; + animation-name: fadeInLeft; +} + +@-webkit-keyframes fadeInLeftBig { + 0% { + opacity: 0; + -webkit-transform: translateX(-2000px); + transform: translateX(-2000px); + } + + 100% { + opacity: 1; + -webkit-transform: translateX(0); + transform: translateX(0); + } +} + +@keyframes fadeInLeftBig { + 0% { + opacity: 0; + -webkit-transform: translateX(-2000px); + -ms-transform: translateX(-2000px); + transform: translateX(-2000px); + } + + 100% { + opacity: 1; + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } +} + +.fadeInLeftBig { + -webkit-animation-name: fadeInLeftBig; + animation-name: fadeInLeftBig; +} + +@-webkit-keyframes fadeInRight { + 0% { + opacity: 0; + -webkit-transform: translateX(40px); + transform: translateX(40px); + } + + 100% { + opacity: 1; + -webkit-transform: translateX(0); + transform: translateX(0); + } +} + +@keyframes fadeInRight { + 0% { + opacity: 0; + -webkit-transform: translateX(40px); + -ms-transform: translateX(40px); + transform: translateX(40px); + } + + 100% { + opacity: 1; + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } +} + +.fadeInRight { + -webkit-animation-name: fadeInRight; + animation-name: fadeInRight; +} + +@-webkit-keyframes fadeInRightBig { + 0% { + opacity: 0; + -webkit-transform: translateX(2000px); + transform: translateX(2000px); + } + + 100% { + opacity: 1; + -webkit-transform: translateX(0); + transform: translateX(0); + } +} + +@keyframes fadeInRightBig { + 0% { + opacity: 0; + -webkit-transform: translateX(2000px); + -ms-transform: translateX(2000px); + transform: translateX(2000px); + } + + 100% { + opacity: 1; + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } +} + +.fadeInRightBig { + -webkit-animation-name: fadeInRightBig; + animation-name: fadeInRightBig; +} + +@-webkit-keyframes fadeInUp { + 0% { + opacity: 0; + -webkit-transform: translateY(20px); + transform: translateY(20px); + } + + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } +} + +@keyframes fadeInUp { + 0% { + opacity: 0; + -webkit-transform: translateY(20px); + -ms-transform: translateY(20px); + transform: translateY(20px); + } + + 100% { + opacity: 1; + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } +} + +.fadeInUp { + -webkit-animation-name: fadeInUp; + animation-name: fadeInUp; +} + +@-webkit-keyframes fadeInUpM { + 0% { + opacity: 0; + -webkit-transform: translateY(50px); + transform: translateY(50px); + } + + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } +} + +@keyframes fadeInUpM { + 0% { + opacity: 0; + -webkit-transform: translateY(50px); + -ms-transform: translateY(50px); + transform: translateY(50px); + } + + 100% { + opacity: 1; + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } +} + +.fadeInUpM { + -webkit-animation-name: fadeInUpM; + animation-name: fadeInUpM; +} + +@-webkit-keyframes fadeInUpBig { + 0% { + opacity: 0; + -webkit-transform: translateY(2000px); + transform: translateY(2000px); + } + + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } +} + +@keyframes fadeInUpBig { + 0% { + opacity: 0; + -webkit-transform: translateY(2000px); + -ms-transform: translateY(2000px); + transform: translateY(2000px); + } + + 100% { + opacity: 1; + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } +} + +.fadeInUpBig { + -webkit-animation-name: fadeInUpBig; + animation-name: fadeInUpBig; +} + +@-webkit-keyframes fadeOut { + 0% { + opacity: 1; + } + + 100% { + opacity: 0; + } +} + +@keyframes fadeOut { + 0% { + opacity: 1; + } + + 100% { + opacity: 0; + } +} + +.fadeOut { + -webkit-animation-name: fadeOut; + animation-name: fadeOut; +} + +@-webkit-keyframes fadeOutDown { + 0% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } + + 100% { + opacity: 0; + -webkit-transform: translateY(20px); + transform: translateY(20px); + } +} + +@keyframes fadeOutDown { + 0% { + opacity: 1; + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } + + 100% { + opacity: 0; + -webkit-transform: translateY(20px); + -ms-transform: translateY(20px); + transform: translateY(20px); + } +} + +.fadeOutDown { + -webkit-animation-name: fadeOutDown; + animation-name: fadeOutDown; +} + +@-webkit-keyframes fadeOutDownBig { + 0% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } + + 100% { + opacity: 0; + -webkit-transform: translateY(2000px); + transform: translateY(2000px); + } +} + +@keyframes fadeOutDownBig { + 0% { + opacity: 1; + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } + + 100% { + opacity: 0; + -webkit-transform: translateY(2000px); + -ms-transform: translateY(2000px); + transform: translateY(2000px); + } +} + +.fadeOutDownBig { + -webkit-animation-name: fadeOutDownBig; + animation-name: fadeOutDownBig; +} + +@-webkit-keyframes fadeOutLeft { + 0% { + opacity: 1; + -webkit-transform: translateX(0); + transform: translateX(0); + } + + 100% { + opacity: 0; + -webkit-transform: translateX(-20px); + transform: translateX(-20px); + } +} + +@keyframes fadeOutLeft { + 0% { + opacity: 1; + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } + + 100% { + opacity: 0; + -webkit-transform: translateX(-20px); + -ms-transform: translateX(-20px); + transform: translateX(-20px); + } +} + +.fadeOutLeft { + -webkit-animation-name: fadeOutLeft; + animation-name: fadeOutLeft; +} + +@-webkit-keyframes fadeOutLeftBig { + 0% { + opacity: 1; + -webkit-transform: translateX(0); + transform: translateX(0); + } + + 100% { + opacity: 0; + -webkit-transform: translateX(-2000px); + transform: translateX(-2000px); + } +} + +@keyframes fadeOutLeftBig { + 0% { + opacity: 1; + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } + + 100% { + opacity: 0; + -webkit-transform: translateX(-2000px); + -ms-transform: translateX(-2000px); + transform: translateX(-2000px); + } +} + +.fadeOutLeftBig { + -webkit-animation-name: fadeOutLeftBig; + animation-name: fadeOutLeftBig; +} + +@-webkit-keyframes fadeOutRight { + 0% { + opacity: 1; + -webkit-transform: translateX(0); + transform: translateX(0); + } + + 100% { + opacity: 0; + -webkit-transform: translateX(20px); + transform: translateX(20px); + } +} + +@keyframes fadeOutRight { + 0% { + opacity: 1; + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } + + 100% { + opacity: 0; + -webkit-transform: translateX(20px); + -ms-transform: translateX(20px); + transform: translateX(20px); + } +} + +.fadeOutRight { + -webkit-animation-name: fadeOutRight; + animation-name: fadeOutRight; +} + +@-webkit-keyframes fadeOutRightBig { + 0% { + opacity: 1; + -webkit-transform: translateX(0); + transform: translateX(0); + } + + 100% { + opacity: 0; + -webkit-transform: translateX(2000px); + transform: translateX(2000px); + } +} + +@keyframes fadeOutRightBig { + 0% { + opacity: 1; + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } + + 100% { + opacity: 0; + -webkit-transform: translateX(2000px); + -ms-transform: translateX(2000px); + transform: translateX(2000px); + } +} + +.fadeOutRightBig { + -webkit-animation-name: fadeOutRightBig; + animation-name: fadeOutRightBig; +} + +@-webkit-keyframes fadeOutUp { + 0% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } + + 100% { + opacity: 0; + -webkit-transform: translateY(-20px); + transform: translateY(-20px); + } +} + +@keyframes fadeOutUp { + 0% { + opacity: 1; + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } + + 100% { + opacity: 0; + -webkit-transform: translateY(-20px); + -ms-transform: translateY(-20px); + transform: translateY(-20px); + } +} + +.fadeOutUp { + -webkit-animation-name: fadeOutUp; + animation-name: fadeOutUp; +} + +@-webkit-keyframes fadeOutUpBig { + 0% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } + + 100% { + opacity: 0; + -webkit-transform: translateY(-2000px); + transform: translateY(-2000px); + } +} + +@keyframes fadeOutUpBig { + 0% { + opacity: 1; + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } + + 100% { + opacity: 0; + -webkit-transform: translateY(-2000px); + -ms-transform: translateY(-2000px); + transform: translateY(-2000px); + } +} + +.fadeOutUpBig { + -webkit-animation-name: fadeOutUpBig; + animation-name: fadeOutUpBig; +} + +@-webkit-keyframes flip { + 0% { + -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); + transform: perspective(400px) translateZ(0) rotateY(0) scale(1); + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; + } + + 40% { + -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); + transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; + } + + 50% { + -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); + transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + } + + 80% { + -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); + transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + } + + 100% { + -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); + transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + } +} + +@keyframes flip { + 0% { + -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); + -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); + transform: perspective(400px) translateZ(0) rotateY(0) scale(1); + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; + } + + 40% { + -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); + -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); + transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; + } + + 50% { + -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); + -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); + transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + } + + 80% { + -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); + -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); + transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + } + + 100% { + -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); + -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); + transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + } +} + +.animated.flip { + -webkit-backface-visibility: visible; + -ms-backface-visibility: visible; + backface-visibility: visible; + -webkit-animation-name: flip; + animation-name: flip; +} + +@-webkit-keyframes flipInX { + 0% { + -webkit-transform: perspective(400px) rotateX(90deg); + transform: perspective(400px) rotateX(90deg); + opacity: 0; + } + + 40% { + -webkit-transform: perspective(400px) rotateX(-10deg); + transform: perspective(400px) rotateX(-10deg); + } + + 70% { + -webkit-transform: perspective(400px) rotateX(10deg); + transform: perspective(400px) rotateX(10deg); + } + + 100% { + -webkit-transform: perspective(400px) rotateX(0deg); + transform: perspective(400px) rotateX(0deg); + opacity: 1; + } +} + +@keyframes flipInX { + 0% { + -webkit-transform: perspective(400px) rotateX(90deg); + -ms-transform: perspective(400px) rotateX(90deg); + transform: perspective(400px) rotateX(90deg); + opacity: 0; + } + + 40% { + -webkit-transform: perspective(400px) rotateX(-10deg); + -ms-transform: perspective(400px) rotateX(-10deg); + transform: perspective(400px) rotateX(-10deg); + } + + 70% { + -webkit-transform: perspective(400px) rotateX(10deg); + -ms-transform: perspective(400px) rotateX(10deg); + transform: perspective(400px) rotateX(10deg); + } + + 100% { + -webkit-transform: perspective(400px) rotateX(0deg); + -ms-transform: perspective(400px) rotateX(0deg); + transform: perspective(400px) rotateX(0deg); + opacity: 1; + } +} + +.flipInX { + -webkit-backface-visibility: visible !important; + -ms-backface-visibility: visible !important; + backface-visibility: visible !important; + -webkit-animation-name: flipInX; + animation-name: flipInX; +} + +@-webkit-keyframes flipInY { + 0% { + -webkit-transform: perspective(400px) rotateY(90deg); + transform: perspective(400px) rotateY(90deg); + opacity: 0; + } + + 40% { + -webkit-transform: perspective(400px) rotateY(-10deg); + transform: perspective(400px) rotateY(-10deg); + } + + 70% { + -webkit-transform: perspective(400px) rotateY(10deg); + transform: perspective(400px) rotateY(10deg); + } + + 100% { + -webkit-transform: perspective(400px) rotateY(0deg); + transform: perspective(400px) rotateY(0deg); + opacity: 1; + } +} + +@keyframes flipInY { + 0% { + -webkit-transform: perspective(400px) rotateY(90deg); + -ms-transform: perspective(400px) rotateY(90deg); + transform: perspective(400px) rotateY(90deg); + opacity: 0; + } + + 40% { + -webkit-transform: perspective(400px) rotateY(-10deg); + -ms-transform: perspective(400px) rotateY(-10deg); + transform: perspective(400px) rotateY(-10deg); + } + + 70% { + -webkit-transform: perspective(400px) rotateY(10deg); + -ms-transform: perspective(400px) rotateY(10deg); + transform: perspective(400px) rotateY(10deg); + } + + 100% { + -webkit-transform: perspective(400px) rotateY(0deg); + -ms-transform: perspective(400px) rotateY(0deg); + transform: perspective(400px) rotateY(0deg); + opacity: 1; + } +} + +.flipInY { + -webkit-backface-visibility: visible !important; + -ms-backface-visibility: visible !important; + backface-visibility: visible !important; + -webkit-animation-name: flipInY; + animation-name: flipInY; +} + +@-webkit-keyframes flipOutX { + 0% { + -webkit-transform: perspective(400px) rotateX(0deg); + transform: perspective(400px) rotateX(0deg); + opacity: 1; + } + + 100% { + -webkit-transform: perspective(400px) rotateX(90deg); + transform: perspective(400px) rotateX(90deg); + opacity: 0; + } +} + +@keyframes flipOutX { + 0% { + -webkit-transform: perspective(400px) rotateX(0deg); + -ms-transform: perspective(400px) rotateX(0deg); + transform: perspective(400px) rotateX(0deg); + opacity: 1; + } + + 100% { + -webkit-transform: perspective(400px) rotateX(90deg); + -ms-transform: perspective(400px) rotateX(90deg); + transform: perspective(400px) rotateX(90deg); + opacity: 0; + } +} + +.flipOutX { + -webkit-animation-name: flipOutX; + animation-name: flipOutX; + -webkit-backface-visibility: visible !important; + -ms-backface-visibility: visible !important; + backface-visibility: visible !important; +} + +@-webkit-keyframes flipOutY { + 0% { + -webkit-transform: perspective(400px) rotateY(0deg); + transform: perspective(400px) rotateY(0deg); + opacity: 1; + } + + 100% { + -webkit-transform: perspective(400px) rotateY(90deg); + transform: perspective(400px) rotateY(90deg); + opacity: 0; + } +} + +@keyframes flipOutY { + 0% { + -webkit-transform: perspective(400px) rotateY(0deg); + -ms-transform: perspective(400px) rotateY(0deg); + transform: perspective(400px) rotateY(0deg); + opacity: 1; + } + + 100% { + -webkit-transform: perspective(400px) rotateY(90deg); + -ms-transform: perspective(400px) rotateY(90deg); + transform: perspective(400px) rotateY(90deg); + opacity: 0; + } +} + +.flipOutY { + -webkit-backface-visibility: visible !important; + -ms-backface-visibility: visible !important; + backface-visibility: visible !important; + -webkit-animation-name: flipOutY; + animation-name: flipOutY; +} + +@-webkit-keyframes lightSpeedIn { + 0% { + -webkit-transform: translateX(100%) skewX(-30deg); + transform: translateX(100%) skewX(-30deg); + opacity: 0; + } + + 60% { + -webkit-transform: translateX(-20%) skewX(30deg); + transform: translateX(-20%) skewX(30deg); + opacity: 1; + } + + 80% { + -webkit-transform: translateX(0%) skewX(-15deg); + transform: translateX(0%) skewX(-15deg); + opacity: 1; + } + + 100% { + -webkit-transform: translateX(0%) skewX(0deg); + transform: translateX(0%) skewX(0deg); + opacity: 1; + } +} + +@keyframes lightSpeedIn { + 0% { + -webkit-transform: translateX(100%) skewX(-30deg); + -ms-transform: translateX(100%) skewX(-30deg); + transform: translateX(100%) skewX(-30deg); + opacity: 0; + } + + 60% { + -webkit-transform: translateX(-20%) skewX(30deg); + -ms-transform: translateX(-20%) skewX(30deg); + transform: translateX(-20%) skewX(30deg); + opacity: 1; + } + + 80% { + -webkit-transform: translateX(0%) skewX(-15deg); + -ms-transform: translateX(0%) skewX(-15deg); + transform: translateX(0%) skewX(-15deg); + opacity: 1; + } + + 100% { + -webkit-transform: translateX(0%) skewX(0deg); + -ms-transform: translateX(0%) skewX(0deg); + transform: translateX(0%) skewX(0deg); + opacity: 1; + } +} + +.lightSpeedIn { + -webkit-animation-name: lightSpeedIn; + animation-name: lightSpeedIn; + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; +} + +@-webkit-keyframes lightSpeedOut { + 0% { + -webkit-transform: translateX(0%) skewX(0deg); + transform: translateX(0%) skewX(0deg); + opacity: 1; + } + + 100% { + -webkit-transform: translateX(100%) skewX(-30deg); + transform: translateX(100%) skewX(-30deg); + opacity: 0; + } +} + +@keyframes lightSpeedOut { + 0% { + -webkit-transform: translateX(0%) skewX(0deg); + -ms-transform: translateX(0%) skewX(0deg); + transform: translateX(0%) skewX(0deg); + opacity: 1; + } + + 100% { + -webkit-transform: translateX(100%) skewX(-30deg); + -ms-transform: translateX(100%) skewX(-30deg); + transform: translateX(100%) skewX(-30deg); + opacity: 0; + } +} + +.lightSpeedOut { + -webkit-animation-name: lightSpeedOut; + animation-name: lightSpeedOut; + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; +} + +@-webkit-keyframes rotateIn { + 0% { + -webkit-transform-origin: center center; + transform-origin: center center; + -webkit-transform: rotate(-200deg); + transform: rotate(-200deg); + opacity: 0; + } + + 100% { + -webkit-transform-origin: center center; + transform-origin: center center; + -webkit-transform: rotate(0); + transform: rotate(0); + opacity: 1; + } +} + +@keyframes rotateIn { + 0% { + -webkit-transform-origin: center center; + -ms-transform-origin: center center; + transform-origin: center center; + -webkit-transform: rotate(-200deg); + -ms-transform: rotate(-200deg); + transform: rotate(-200deg); + opacity: 0; + } + + 100% { + -webkit-transform-origin: center center; + -ms-transform-origin: center center; + transform-origin: center center; + -webkit-transform: rotate(0); + -ms-transform: rotate(0); + transform: rotate(0); + opacity: 1; + } +} + +.rotateIn { + -webkit-animation-name: rotateIn; + animation-name: rotateIn; +} + +@-webkit-keyframes rotateInDownLeft { + 0% { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate(-90deg); + transform: rotate(-90deg); + opacity: 0; + } + + 100% { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate(0); + transform: rotate(0); + opacity: 1; + } +} + +@keyframes rotateInDownLeft { + 0% { + -webkit-transform-origin: left bottom; + -ms-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + transform: rotate(-90deg); + opacity: 0; + } + + 100% { + -webkit-transform-origin: left bottom; + -ms-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate(0); + -ms-transform: rotate(0); + transform: rotate(0); + opacity: 1; + } +} + +.rotateInDownLeft { + -webkit-animation-name: rotateInDownLeft; + animation-name: rotateInDownLeft; +} + +@-webkit-keyframes rotateInDownRight { + 0% { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate(90deg); + transform: rotate(90deg); + opacity: 0; + } + + 100% { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate(0); + transform: rotate(0); + opacity: 1; + } +} + +@keyframes rotateInDownRight { + 0% { + -webkit-transform-origin: right bottom; + -ms-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); + opacity: 0; + } + + 100% { + -webkit-transform-origin: right bottom; + -ms-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate(0); + -ms-transform: rotate(0); + transform: rotate(0); + opacity: 1; + } +} + +.rotateInDownRight { + -webkit-animation-name: rotateInDownRight; + animation-name: rotateInDownRight; +} + +@-webkit-keyframes rotateInUpLeft { + 0% { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate(90deg); + transform: rotate(90deg); + opacity: 0; + } + + 100% { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate(0); + transform: rotate(0); + opacity: 1; + } +} + +@keyframes rotateInUpLeft { + 0% { + -webkit-transform-origin: left bottom; + -ms-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); + opacity: 0; + } + + 100% { + -webkit-transform-origin: left bottom; + -ms-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate(0); + -ms-transform: rotate(0); + transform: rotate(0); + opacity: 1; + } +} + +.rotateInUpLeft { + -webkit-animation-name: rotateInUpLeft; + animation-name: rotateInUpLeft; +} + +@-webkit-keyframes rotateInUpRight { + 0% { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate(-90deg); + transform: rotate(-90deg); + opacity: 0; + } + + 100% { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate(0); + transform: rotate(0); + opacity: 1; + } +} + +@keyframes rotateInUpRight { + 0% { + -webkit-transform-origin: right bottom; + -ms-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + transform: rotate(-90deg); + opacity: 0; + } + + 100% { + -webkit-transform-origin: right bottom; + -ms-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate(0); + -ms-transform: rotate(0); + transform: rotate(0); + opacity: 1; + } +} + +.rotateInUpRight { + -webkit-animation-name: rotateInUpRight; + animation-name: rotateInUpRight; +} + +@-webkit-keyframes rotateOut { + 0% { + -webkit-transform-origin: center center; + transform-origin: center center; + -webkit-transform: rotate(0); + transform: rotate(0); + opacity: 1; + } + + 100% { + -webkit-transform-origin: center center; + transform-origin: center center; + -webkit-transform: rotate(200deg); + transform: rotate(200deg); + opacity: 0; + } +} + +@keyframes rotateOut { + 0% { + -webkit-transform-origin: center center; + -ms-transform-origin: center center; + transform-origin: center center; + -webkit-transform: rotate(0); + -ms-transform: rotate(0); + transform: rotate(0); + opacity: 1; + } + + 100% { + -webkit-transform-origin: center center; + -ms-transform-origin: center center; + transform-origin: center center; + -webkit-transform: rotate(200deg); + -ms-transform: rotate(200deg); + transform: rotate(200deg); + opacity: 0; + } +} + +.rotateOut { + -webkit-animation-name: rotateOut; + animation-name: rotateOut; +} + +@-webkit-keyframes rotateOutDownLeft { + 0% { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate(0); + transform: rotate(0); + opacity: 1; + } + + 100% { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate(90deg); + transform: rotate(90deg); + opacity: 0; + } +} + +@keyframes rotateOutDownLeft { + 0% { + -webkit-transform-origin: left bottom; + -ms-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate(0); + -ms-transform: rotate(0); + transform: rotate(0); + opacity: 1; + } + + 100% { + -webkit-transform-origin: left bottom; + -ms-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); + opacity: 0; + } +} + +.rotateOutDownLeft { + -webkit-animation-name: rotateOutDownLeft; + animation-name: rotateOutDownLeft; +} + +@-webkit-keyframes rotateOutDownRight { + 0% { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate(0); + transform: rotate(0); + opacity: 1; + } + + 100% { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate(-90deg); + transform: rotate(-90deg); + opacity: 0; + } +} + +@keyframes rotateOutDownRight { + 0% { + -webkit-transform-origin: right bottom; + -ms-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate(0); + -ms-transform: rotate(0); + transform: rotate(0); + opacity: 1; + } + + 100% { + -webkit-transform-origin: right bottom; + -ms-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + transform: rotate(-90deg); + opacity: 0; + } +} + +.rotateOutDownRight { + -webkit-animation-name: rotateOutDownRight; + animation-name: rotateOutDownRight; +} + +@-webkit-keyframes rotateOutUpLeft { + 0% { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate(0); + transform: rotate(0); + opacity: 1; + } + + 100% { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate(-90deg); + transform: rotate(-90deg); + opacity: 0; + } +} + +@keyframes rotateOutUpLeft { + 0% { + -webkit-transform-origin: left bottom; + -ms-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate(0); + -ms-transform: rotate(0); + transform: rotate(0); + opacity: 1; + } + + 100% { + -webkit-transform-origin: left bottom; + -ms-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + transform: rotate(-90deg); + opacity: 0; + } +} + +.rotateOutUpLeft { + -webkit-animation-name: rotateOutUpLeft; + animation-name: rotateOutUpLeft; +} + +@-webkit-keyframes rotateOutUpRight { + 0% { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate(0); + transform: rotate(0); + opacity: 1; + } + + 100% { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate(90deg); + transform: rotate(90deg); + opacity: 0; + } +} + +@keyframes rotateOutUpRight { + 0% { + -webkit-transform-origin: right bottom; + -ms-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate(0); + -ms-transform: rotate(0); + transform: rotate(0); + opacity: 1; + } + + 100% { + -webkit-transform-origin: right bottom; + -ms-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); + opacity: 0; + } +} + +.rotateOutUpRight { + -webkit-animation-name: rotateOutUpRight; + animation-name: rotateOutUpRight; +} + +@-webkit-keyframes slideInDown { + 0% { + opacity: 0; + -webkit-transform: translateY(-2000px); + transform: translateY(-2000px); + } + + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + } +} + +@keyframes slideInDown { + 0% { + opacity: 0; + -webkit-transform: translateY(-2000px); + -ms-transform: translateY(-2000px); + transform: translateY(-2000px); + } + + 100% { + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } +} + +.slideInDown { + -webkit-animation-name: slideInDown; + animation-name: slideInDown; +} + +@-webkit-keyframes slideInLeft { + 0% { + opacity: 0; + -webkit-transform: translateX(-2000px); + transform: translateX(-2000px); + } + + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + } +} + +@keyframes slideInLeft { + 0% { + opacity: 0; + -webkit-transform: translateX(-2000px); + -ms-transform: translateX(-2000px); + transform: translateX(-2000px); + } + + 100% { + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } +} + +.slideInLeft { + -webkit-animation-name: slideInLeft; + animation-name: slideInLeft; +} + +@-webkit-keyframes slideInRight { + 0% { + opacity: 0; + -webkit-transform: translateX(2000px); + transform: translateX(2000px); + } + + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + } +} + +@keyframes slideInRight { + 0% { + opacity: 0; + -webkit-transform: translateX(2000px); + -ms-transform: translateX(2000px); + transform: translateX(2000px); + } + + 100% { + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } +} + +.slideInRight { + -webkit-animation-name: slideInRight; + animation-name: slideInRight; +} + +@-webkit-keyframes slideOutLeft { + 0% { + -webkit-transform: translateX(0); + transform: translateX(0); + } + + 100% { + opacity: 0; + -webkit-transform: translateX(-2000px); + transform: translateX(-2000px); + } +} + +@keyframes slideOutLeft { + 0% { + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } + + 100% { + opacity: 0; + -webkit-transform: translateX(-2000px); + -ms-transform: translateX(-2000px); + transform: translateX(-2000px); + } +} + +.slideOutLeft { + -webkit-animation-name: slideOutLeft; + animation-name: slideOutLeft; +} + +@-webkit-keyframes slideOutRight { + 0% { + -webkit-transform: translateX(0); + transform: translateX(0); + } + + 100% { + opacity: 0; + -webkit-transform: translateX(2000px); + transform: translateX(2000px); + } +} + +@keyframes slideOutRight { + 0% { + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } + + 100% { + opacity: 0; + -webkit-transform: translateX(2000px); + -ms-transform: translateX(2000px); + transform: translateX(2000px); + } +} + +.slideOutRight { + -webkit-animation-name: slideOutRight; + animation-name: slideOutRight; +} + +@-webkit-keyframes slideOutUp { + 0% { + -webkit-transform: translateY(0); + transform: translateY(0); + } + + 100% { + opacity: 0; + -webkit-transform: translateY(-2000px); + transform: translateY(-2000px); + } +} + +@keyframes slideOutUp { + 0% { + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } + + 100% { + opacity: 0; + -webkit-transform: translateY(-2000px); + -ms-transform: translateY(-2000px); + transform: translateY(-2000px); + } +} + +.slideOutUp { + -webkit-animation-name: slideOutUp; + animation-name: slideOutUp; +} + +@-webkit-keyframes hinge { + 0% { + -webkit-transform: rotate(0); + transform: rotate(0); + -webkit-transform-origin: top left; + transform-origin: top left; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + } + + 20%, + 60% { + -webkit-transform: rotate(80deg); + transform: rotate(80deg); + -webkit-transform-origin: top left; + transform-origin: top left; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + } + + 40% { + -webkit-transform: rotate(60deg); + transform: rotate(60deg); + -webkit-transform-origin: top left; + transform-origin: top left; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + } + + 80% { + -webkit-transform: rotate(60deg) translateY(0); + transform: rotate(60deg) translateY(0); + opacity: 1; + -webkit-transform-origin: top left; + transform-origin: top left; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + } + + 100% { + -webkit-transform: translateY(700px); + transform: translateY(700px); + opacity: 0; + } +} + +@keyframes hinge { + 0% { + -webkit-transform: rotate(0); + -ms-transform: rotate(0); + transform: rotate(0); + -webkit-transform-origin: top left; + -ms-transform-origin: top left; + transform-origin: top left; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + } + + 20%, + 60% { + -webkit-transform: rotate(80deg); + -ms-transform: rotate(80deg); + transform: rotate(80deg); + -webkit-transform-origin: top left; + -ms-transform-origin: top left; + transform-origin: top left; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + } + + 40% { + -webkit-transform: rotate(60deg); + -ms-transform: rotate(60deg); + transform: rotate(60deg); + -webkit-transform-origin: top left; + -ms-transform-origin: top left; + transform-origin: top left; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + } + + 80% { + -webkit-transform: rotate(60deg) translateY(0); + -ms-transform: rotate(60deg) translateY(0); + transform: rotate(60deg) translateY(0); + opacity: 1; + -webkit-transform-origin: top left; + -ms-transform-origin: top left; + transform-origin: top left; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + } + + 100% { + -webkit-transform: translateY(700px); + -ms-transform: translateY(700px); + transform: translateY(700px); + opacity: 0; + } +} + +.hinge { + -webkit-animation-name: hinge; + animation-name: hinge; +} + +/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ + +@-webkit-keyframes rollIn { + 0% { + opacity: 0; + -webkit-transform: translateX(-100%) rotate(-120deg); + transform: translateX(-100%) rotate(-120deg); + } + + 100% { + opacity: 1; + -webkit-transform: translateX(0px) rotate(0deg); + transform: translateX(0px) rotate(0deg); + } +} + +@keyframes rollIn { + 0% { + opacity: 0; + -webkit-transform: translateX(-100%) rotate(-120deg); + -ms-transform: translateX(-100%) rotate(-120deg); + transform: translateX(-100%) rotate(-120deg); + } + + 100% { + opacity: 1; + -webkit-transform: translateX(0px) rotate(0deg); + -ms-transform: translateX(0px) rotate(0deg); + transform: translateX(0px) rotate(0deg); + } +} + +.rollIn { + -webkit-animation-name: rollIn; + animation-name: rollIn; +} + +/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ + +@-webkit-keyframes rollOut { + 0% { + opacity: 1; + -webkit-transform: translateX(0px) rotate(0deg); + transform: translateX(0px) rotate(0deg); + } + + 100% { + opacity: 0; + -webkit-transform: translateX(100%) rotate(120deg); + transform: translateX(100%) rotate(120deg); + } +} + +@keyframes rollOut { + 0% { + opacity: 1; + -webkit-transform: translateX(0px) rotate(0deg); + -ms-transform: translateX(0px) rotate(0deg); + transform: translateX(0px) rotate(0deg); + } + + 100% { + opacity: 0; + -webkit-transform: translateX(100%) rotate(120deg); + -ms-transform: translateX(100%) rotate(120deg); + transform: translateX(100%) rotate(120deg); + } +} + +.rollOut { + -webkit-animation-name: rollOut; + animation-name: rollOut; +} \ No newline at end of file diff --git a/themes/tps/assets/new/css/components/.DS_Store b/themes/tps/assets/new/css/components/.DS_Store new file mode 100644 index 0000000..5240b4b Binary files /dev/null and b/themes/tps/assets/new/css/components/.DS_Store differ diff --git a/themes/tps/assets/new/css/components/1-main/mixin.scss b/themes/tps/assets/new/css/components/1-main/mixin.scss new file mode 100644 index 0000000..6aa7a9a --- /dev/null +++ b/themes/tps/assets/new/css/components/1-main/mixin.scss @@ -0,0 +1,119 @@ +@mixin transition { + transition: all 0.2s ease-in-out 0s; + -moz-transition: all 0.2s ease-in-out 0s; +} + +@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 ImgCon { + width: 100%; + height: 100%; + object-fit: contain; + -o-object-fit: contain; +} + +@mixin ImgCov { + width: 100%; + height: 100%; + object-fit: cover; + -o-object-fit: cover; +} + +// @mixin height { +// @media (max-height: 390px) { +// @content; +// } +// } + +@mixin sm-lg { + @media (max-width: 380px) { + @content; + } +} + +@mixin md-xsm { + @media (max-width: 400px) { + @content; + } +} + + +@mixin md-sm { + @media (max-width: 650px) { + @content; + } +} + +@mixin lg-lg { + @media (max-width: 750px) { + @content; + } +} + +@mixin lg-xlg { + @media (max-width: 1000px) { + @content; + } +} + +@mixin lg-xxlg { + @media (max-width: 1100px) { + @content; + } +} + +@mixin xlg-xxlg { + @media (max-width: 1200px) { + @content; + } +} + +@mixin xlg-xxxlg { + @media (max-width: 1400px) { + @content; + } +} + +@mixin forSlider-1 { + @media (max-width: 1530px) { + @content; + } +} \ No newline at end of file diff --git a/themes/tps/assets/new/css/components/1-main/nulifier.scss b/themes/tps/assets/new/css/components/1-main/nulifier.scss new file mode 100644 index 0000000..12dbae1 --- /dev/null +++ b/themes/tps/assets/new/css/components/1-main/nulifier.scss @@ -0,0 +1,135 @@ +*, +*::before, +*::after { + margin: 0px; + padding: 0px; + border: none; + outline: none; + + scroll-behavior: smooth; +} + +button { + 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: 'Montserrat', sans-serif; + font-size: 14px; + color: #000; + line-height: 1.7em; + font-weight: 400; + background: #fff; + position: relative; + + box-sizing: border-box; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-font-smoothing: antialiased; + -moz-font-smoothing: antialiased; +} + +body.active { + overflow: hidden; +} + +a { + text-decoration: none; + 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: 1500px; + padding: 0px 60px; + margin: 0 auto; +} + +ul, +li { + list-style: none; + padding: 0px; + margin: 0px; +} + +/* width */ +::-webkit-scrollbar { + width: 8px; +} + +/* Track */ +::-webkit-scrollbar-track { + background: #fff; + border: 1px solid #DFDFDF; + border-radius: 10px; +} + +/* Handle */ +::-webkit-scrollbar-thumb { + background: #DFDFDF; + border-radius: 10px; +} + +/* Handle on hover */ +::-webkit-scrollbar-thumb:hover { + background: #DFDFDF; +} \ No newline at end of file diff --git a/themes/tps/assets/new/css/components/1-main/variables.scss b/themes/tps/assets/new/css/components/1-main/variables.scss new file mode 100644 index 0000000..c1a27ec --- /dev/null +++ b/themes/tps/assets/new/css/components/1-main/variables.scss @@ -0,0 +1,6 @@ +$gray: rgba(241, 241, 241, 1); +$black: #3B3B3B; +$blue: #6ec9c7; +$white: #ffffff; + +$main-color: #2B72B6; \ No newline at end of file diff --git a/themes/tps/assets/new/css/components/2-layout/crumb.scss b/themes/tps/assets/new/css/components/2-layout/crumb.scss new file mode 100644 index 0000000..259501c --- /dev/null +++ b/themes/tps/assets/new/css/components/2-layout/crumb.scss @@ -0,0 +1,19 @@ +// Crumb ================= +.crumb { + // padding: 220px 0 50px; + // background: url("../images/mini_banner.png") no-repeat center; + // background-size: cover; + padding: 50px 0 0; + + &_title { + font-weight: 700; + font-size: 28px; + line-height: 46px; + } + + &_txt { + font-weight: 400; + font-size: 16px; + line-height: 30px; + } +} \ No newline at end of file diff --git a/themes/tps/assets/new/css/components/2-layout/footer.scss b/themes/tps/assets/new/css/components/2-layout/footer.scss new file mode 100644 index 0000000..faf6cf2 --- /dev/null +++ b/themes/tps/assets/new/css/components/2-layout/footer.scss @@ -0,0 +1,27 @@ +// Footer ================ +.footer { + padding: 30px 0; + background: #000; + + &_box { + display: flex; + align-items: center; + justify-content: space-between; + } + + .logo { + width: 200px; + height: 70px; + + img { + @include ImgCon; + } + } + + .copyright { + font-weight: 500; + font-size: 16px; + line-height: 32px; + color: #fff; + } +} \ No newline at end of file diff --git a/themes/tps/assets/new/css/components/2-layout/header.scss b/themes/tps/assets/new/css/components/2-layout/header.scss new file mode 100644 index 0000000..2bf2a4a --- /dev/null +++ b/themes/tps/assets/new/css/components/2-layout/header.scss @@ -0,0 +1,607 @@ +// Header ============================= + +.header { + padding: 20px 0; + z-index: 50; + background: #000; + position: relative; + + &_row { + display: flex; + align-items: center; + justify-content: space-between; + } + + .logo { + display: flex; + align-items: center; + position: relative; + + svg { + @include ImgCon; + position: relative; + } + + &_bg { + width: 70px; + height: 70px; + display: block; + + svg, + img { + @include ImgCon; + } + } + + &_group { + position: relative; + margin-right: 10px; + + &-txt { + width: 120px; + height: 30px; + overflow: hidden; + + svg { + @include ImgCon; + position: relative; + } + } + + &:last-child { + margin-right: 0; + } + } + + &_inner { + &-text { + font-size: 18px; + font-weight: 900; + line-height: 1; + color: #6A6A6A; + + position: absolute; + top: 53%; + left: 50%; + @include transform; + } + } + } + + .nav { + position: relative; + + ul { + display: flex; + align-items: center; + + li { + margin-right: 60px; + position: relative; + + &:last-child { + margin-right: 0; + } + + a, + span { + display: block; + font-weight: 500; + font-size: 16px; + line-height: 20px; + color: #FFFFFF; + cursor: pointer; + + &.service_nav-link { + position: relative; + + &::after { + content: ""; + 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%); + width: 8px; + height: 4px; + -webkit-clip-path: polygon(0 0, 50% 100%, 100% 0); + clip-path: polygon(0 0, 50% 100%, 100% 0); + background: #fff; + } + } + + // &:hover~.service_nav { + // display: block; + // max-height: unset; + // } + } + } + } + + &_contact { + padding: 20px; + box-shadow: inset 0 0 0 2px #fff; + transition: color 0.25s 0.0833333333s; + position: relative; + + &:focus { + outline: 2px dotted #ccc; + } + + &:hover { + color: #ccc; + + + &::before, + &::after { + border-color: #ccc; + transition: border-color 0s, width 0.25s, height 0.25s; + width: 100%; + height: 100%; + } + + &::before { + transition-delay: 0s, 0s, 0.25s; + } + + &::after { + transition-delay: 0s, 0.25s, 0s; + } + } + + &::before, + &::after { + border: 0 solid transparent; + box-sizing: border-box; + content: ""; + pointer-events: none; + position: absolute; + width: 0; + height: 0; + bottom: 0; + right: 0; + } + + &::before { + border-bottom-width: 4px; + border-left-width: 4px; + } + + &::after { + border-top-width: 4px; + border-right-width: 4px; + } + } + + .service_nav { + background: rgba(0, 0, 0, .7); + + position: absolute; + top: calc(100% + 60px); + left: 50%; + @include transformX; + white-space: nowrap; + z-index: 3; + min-width: 400px; + text-align: center; + + opacity: 0; + pointer-events: none; + transition: .4s linear; + + &.active { + top: calc(100% + 20px); + opacity: 1; + pointer-events: unset; + } + + a { + display: block; + font-weight: 500; + font-size: 16px; + line-height: 20px; + color: #fff; + @include transition; + padding: 20px 0; + + &:hover { + background: $main-color; + color: #fff; + } + + } + } + } + + .lang { + position: relative; + + &_current { + display: flex; + align-items: center; + position: relative; + margin-right: 20px; + cursor: pointer; + + h6 { + position: relative; + display: block; + + font-weight: 500; + font-size: 14px; + line-height: 20px; + color: #FFFFFF; + + &::after { + content: ''; + position: absolute; + top: 50%; + right: -20px; + @include transformY; + + width: 8px; + height: 4px; + clip-path: polygon(0 0, 50% 100%, 100% 0); + background: #fff; + } + } + } + + &_icon { + width: 20px; + height: 20px; + margin-right: 10px; + + img { + @include ImgCon; + } + } + + &_drop { + position: absolute; + top: calc(100% + 50px); + left: 50%; + @include transformX; + background: rgba(0, 0, 0, .7); + color: #fff; + width: 120px; + + opacity: 0; + pointer-events: none; + transition: .3s linear; + + &.active { + opacity: 1; + pointer-events: unset; + top: calc(100% + 20px); + } + + &-link { + color: #fff !important; + display: block; + text-align: center; + text-transform: uppercase; + + font-size: 15px; + font-weight: 500; + line-height: 1.4; + padding: 7px; + @include transition; + + &:hover { + background: $main-color !important; + color: #fff !important; + } + + } + } + } + + .burger { + display: none; + } +} + +// Header end ========================= + +@keyframes logo-bg { + 0% { + transform: rotate(0deg); + } + + 100% { + transform: rotate(360deg); + } +} + +@-webkit-keyframes logo-bg { + 0% { + transform: rotate(0deg); + } + + 100% { + transform: rotate(360deg); + } +} + +@keyframes inner-txt { + 0% { + opacity: 0; + } + + 85% { + opacity: 0; + } + + 100% { + opacity: 1; + } +} + +@-webkit-keyframes inner-txt { + 0% { + opacity: 0; + } + + 85% { + opacity: 0; + } + + 100% { + opacity: 1; + } +} + +@keyframes group-txt { + 0% { + transform: translateX(-150%); + opacity: 0; + } + + 100% { + transform: translateX(0); + opacity: 1; + } +} + +@-webkit-keyframes group-txt { + 0% { + transform: translateX(-150%); + opacity: 0; + } + + 100% { + transform: translateX(0); + opacity: 1; + } +} + +.logo-bg-animate { + animation: logo-bg .8s linear; + -webkit-animation: logo-bg .8s linear; +} + +.inner-txt-animte { + animation: inner-txt 1s linear; + -webkit-animation: inner-txt 1s linear; +} + +.group-txt-animte { + animation: group-txt 1s linear; + -webkit-animation: group-txt 1s linear; +} + +// ============================================================= + +svg .svg-elem-1 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 0s; + transition: fill 0.7s ease-in 0s; +} + +svg.active .svg-elem-1 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-2 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 0.07s; + transition: fill 0.7s ease-in 0.07s; +} + +svg.active .svg-elem-2 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-3 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 0.14s; + transition: fill 0.7s ease-in 0.14s; +} + +svg.active .svg-elem-3 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-4 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 0.21000000000000002s; + transition: fill 0.7s ease-in 0.21000000000000002s; +} + +svg.active .svg-elem-4 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-5 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 0.28s; + transition: fill 0.7s ease-in 0.28s; +} + +svg.active .svg-elem-5 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-6 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 0.35000000000000003s; + transition: fill 0.7s ease-in 0.35000000000000003s; +} + +svg.active .svg-elem-6 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-7 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 0.42000000000000004s; + transition: fill 0.7s ease-in 0.42000000000000004s; +} + +svg.active .svg-elem-7 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-8 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 0.49000000000000005s; + transition: fill 0.7s ease-in 0.49000000000000005s; +} + +svg.active .svg-elem-8 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-9 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 0.56s; + transition: fill 0.7s ease-in 0.56s; +} + +svg.active .svg-elem-9 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-10 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 0.6300000000000001s; + transition: fill 0.7s ease-in 0.6300000000000001s; +} + +svg.active .svg-elem-10 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-11 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 0.7000000000000001s; + transition: fill 0.7s ease-in 0.7000000000000001s; +} + +svg.active .svg-elem-11 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-12 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 0.77s; + transition: fill 0.7s ease-in 0.77s; +} + +svg.active .svg-elem-12 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-13 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 0.8400000000000001s; + transition: fill 0.7s ease-in 0.8400000000000001s; +} + +svg.active .svg-elem-13 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-14 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 0.9100000000000001s; + transition: fill 0.7s ease-in 0.9100000000000001s; +} + +svg.active .svg-elem-14 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-15 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 0.9800000000000001s; + transition: fill 0.7s ease-in 0.9800000000000001s; +} + +svg.active .svg-elem-15 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-16 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 1.05s; + transition: fill 0.7s ease-in 1.05s; +} + +svg.active .svg-elem-16 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-17 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 1.12s; + transition: fill 0.7s ease-in 1.12s; +} + +svg.active .svg-elem-17 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-18 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 1.1900000000000002s; + transition: fill 0.7s ease-in 1.1900000000000002s; +} + +svg.active .svg-elem-18 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-19 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 1.2600000000000002s; + transition: fill 0.7s ease-in 1.2600000000000002s; +} + +svg.active .svg-elem-19 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-20 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 1.33s; + transition: fill 0.7s ease-in 1.33s; +} + +svg.active .svg-elem-20 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-21 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 1.4000000000000001s; + transition: fill 0.7s ease-in 1.4000000000000001s; +} + +svg.active .svg-elem-21 { + fill: rgb(255, 255, 255); +} \ No newline at end of file diff --git a/themes/tps/assets/new/css/components/2-layout/modal.scss b/themes/tps/assets/new/css/components/2-layout/modal.scss new file mode 100644 index 0000000..1eea5fe --- /dev/null +++ b/themes/tps/assets/new/css/components/2-layout/modal.scss @@ -0,0 +1,69 @@ +// Modal =========================== +.modal { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, .5); + backdrop-filter: blur(5px); + z-index: 50; + + display: none; + + &.active { + display: block; + + .modal_inner { + top: 50%; + opacity: 1; + } + } + + &_inner { + position: absolute; + top: 60%; + left: 50%; + @include transform; + max-width: 900px; + width: calc(100% - 120px); + max-height: 450px; + height: calc(100% - 150px); + padding: 70px 50px; + background: rgba(0, 0, 0, .5); + backdrop-filter: 5px; + @include transition; + opacity: 0.3; + display: block; + } + + &_close { + position: absolute; + top: 30px; + right: 30px; + cursor: pointer; + width: 20px; + height: 20px; + + &:hover { + svg path { + fill: red + } + } + + svg { + @include ImgCon; + @include transition; + pointer-events: none; + } + } + + &_video { + width: 100%; + height: 100%; + + video { + @include ImgCon; + } + } +} \ No newline at end of file diff --git a/themes/tps/assets/new/css/components/2-layout/responsive.scss b/themes/tps/assets/new/css/components/2-layout/responsive.scss new file mode 100644 index 0000000..bac5ad4 --- /dev/null +++ b/themes/tps/assets/new/css/components/2-layout/responsive.scss @@ -0,0 +1,912 @@ +// 1400 ======================== +@include xlg-xxxlg { + + // About ================ + .about { + &_video { + &-box { + height: 470px; + } + } + } + + // Gallery ============== + .gallery { + padding: 80px 0; + + &_box { + &-item { + height: 300px; + } + } + + .gal { + &_slider { + &-item { + height: 300px !important; + } + } + } + } + + // Service Page =============== + .service.page { + .service { + &_box { + width: calc(100% + 60px); + + .slick-list { + padding: 0 60px 0 0 !important; + } + } + + } + } + +} + +// 1200 ======================== +@include xlg-xxlg { + + // Hero ============== + .hero { + &_item { + &-title { + font-size: 30px; + } + + &-txt { + margin: 20px 0; + } + + &-link { + font-size: 14px; + } + } + + .page { + &_box { + &-link { + font-size: 16px; + } + } + } + } + + // About ================ + .about { + + &_video { + &-box { + height: 430px; + + .video_play { + width: 65px; + height: 65px; + + &::before { + width: 13px; + height: 17px; + } + } + } + } + } + + // Service =============== + .service { + &_item { + &-title { + font-size: 14px; + } + + &-txt { + font-size: 13px; + } + } + } + + // Contact =========== + .contact { + padding: 70px 0; + + &_title { + font-size: 30px; + margin-bottom: 30px; + } + } + + // Client ================ + .client { + &_title { + font-size: 30px; + margin-bottom: 30px; + } + + &_box { + .slick-next { + width: 30px; + height: 30px; + right: -35px; + } + + .slick-prev { + width: 30px; + height: 30px; + left: -35px; + } + } + + // &_item { + // height: 145px !important; + // } + } + + // Footer ============= + .footer { + .logo { + width: 160px; + height: 55px; + } + } + +} + +// 1100 ======================= +@include lg-xxlg { + + .auto_container { + padding: 0 35px; + } + + // Header ================== + .header { + + .burger { + display: flex; + align-items: center; + justify-content: center; + + cursor: pointer; + width: 30px; + height: 25px; + position: relative; + + &.active { + span { + background: transparent; + + &::before { + transform: rotate(45deg); + width: 25px; + height: 1.5px; + top: 0; + } + + &::after { + width: 25px; + height: 1.5px; + transform: rotate(-45deg); + bottom: 0; + } + } + } + + span { + position: relative; + display: block; + width: 20px; + height: 1.5px; + background: #fff; + + @include transition; + + &::before { + content: ''; + position: absolute; + top: -7px; + right: 0; + width: 30px; + height: 1.5px; + background: #fff; + + @include transition; + } + + &::after { + content: ''; + position: absolute; + bottom: -7px; + right: 0; + width: 10px; + height: 1.5px; + background: #fff; + + @include transition; + } + } + } + + .lang { + &_drop { + background: transparent; + color: #fff; + display: flex; + justify-content: center; + + &.active { + top: calc(100% + 7px); + } + + &-link { + color: #fff !important; + padding: 7px 15px; + position: relative; + font-size: 16px !important; + + &:first-child { + &::before { + content: none; + } + + &::after { + content: ''; + position: absolute; + top: 0; + right: 0; + background: #fff; + height: 100%; + width: 1px; + } + } + } + } + } + + .nav { + &_bg { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, .7); + backdrop-filter: blur(8px); + + opacity: 0; + pointer-events: none; + transform: scale(0); + + transition: all .3s linear; + -ms-transition: all .3s linear; + -moz-transition: all .3s linear; + -webkit-transition: all .3s linear; + + &.active { + opacity: 1; + pointer-events: unset; + transform: scale(1); + } + } + + position: absolute; + top: 0; + right: 0; + width: 100%; + height: 100%; + + ul { + flex-direction: column; + justify-content: center; + height: 100%; + + align-items: unset; + width: calc(100% - 90px); + max-width: 450px; + margin: 0 auto; + + li { + margin-right: 0; + margin-bottom: 30px; + + &:last-child { + margin-bottom: 0; + margin-top: 30px; + } + + a { + font-size: 18px; + padding-left: 20px; + position: relative; + + &::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 1px; + height: 100%; + background: #fff; + } + } + } + } + + .service_nav { + text-align: left; + position: relative; + top: unset; + left: unset; + transform: translate(0, 0); + opacity: 1; + pointer-events: unset; + background-color: unset; + min-width: none; + + &-link { + display: none; + } + + &.active { + top: unset; + } + + a { + font-size: 18px; + padding: 0; + padding-left: 20px; + margin-bottom: 30px; + + &:last-child { + margin-bottom: 0; + } + } + } + + &_contact { + text-align: center; + } + } + + } + + // Hero ===================== + .hero { + &_item { + &-title { + font-size: 22px; + } + + &-txt { + font-size: 15px; + } + + &-link { + font-size: unset; + + a { + font-size: 14px; + padding: 10px 25px; + } + } + } + + .swiper { + &-pagination { + &-bullet { + width: 10px; + height: 10px; + + &-active { + &::after { + width: 5px; + height: 5px; + } + } + } + } + + &-button { + &-prev { + span { + width: 13px; + height: 20px; + + svg { + @include ImgCon; + } + } + } + + &-next { + span { + width: 13px; + height: 20px; + + svg { + @include ImgCon; + } + } + } + } + } + } + + // About ================ + .about { + &_video { + &-box { + height: 385px; + } + } + } + + // About Page ==================== + .about.page { + .about { + &_box { + &-item { + &-title { + font-size: 18px; + } + + &-txt { + font-size: 14px; + } + } + } + } + } + + // Contact =============== + .contact { + &_box { + flex-direction: column; + } + + &_form { + width: 100%; + margin-right: 0; + margin-bottom: 60px; + } + + &_input { + input { + font-size: 14px; + } + + textarea { + font-size: 14px; + } + } + + &_btn { + padding: 14px 30px; + } + + &_info { + width: 100%; + margin-left: 0; + } + } + +} + +// 1000 ====================== +@include lg-xlg { + + // Gallery ================= + .gallery { + &_box { + flex-wrap: wrap; + + &-item { + width: calc(50% - 2px); + } + } + } + + // Service Page ================= + .service.page { + .service { + &_box { + width: calc(100% + 70px); + + .slick-list { + padding: 0 170px 0 0 !important; + } + } + } + } + + // About Page ==================== + .about.page { + .about { + &_box { + &-item { + width: calc(50% - 82px); + } + } + } + } +} + +// 750 ======================== +@include lg-lg { + + // Header ================= + .header { + .logo { + &_bg { + width: 55px; + height: 55px; + } + + &_inner { + &-text { + width: 30px; + height: 30px; + top: 50%; + font-size: unset; + display: block; + + svg { + @include ImgCon; + } + } + } + + &_group { + &-txt { + width: 95px; + + } + } + } + } + + // Crumb ================= + .crumb { + // padding: 180px 0 40px; + // padding: ; + + &_title { + font-size: 24px; + } + + &_txt { + line-height: 30px; + font-size: 14px; + } + } + + // Hero ==================== + .hero { + &_item { + height: 800px !important; + + &-title { + font-size: 18px; + } + } + + &_pag { + display: none; + } + + .page { + &_box { + top: -50px; + + &-group { + padding: 20px 50px 20px 0; + + &::before { + width: 1500px; + left: -1499px; + } + } + + &-link { + font-size: 14px; + + &::after { + top: 5px; + width: 17px; + right: -24px; + } + } + } + } + } + + // Service ================ + .service { + height: calc(100vh - 95px); + } + + // Service end ============ + + // About ================== + .about { + padding-top: 0; + + &_video { + &-box { + height: unset; + + .video_play { + width: 54px; + height: 54px; + + &::before { + width: 13px; + height: 13px; + } + } + } + } + + } + + // Contact ================= + .contact { + padding: 50px 0; + + &_title { + font-size: 26px; + margin-bottom: 25px; + } + + &_input { + input { + padding: 10px 20px; + } + + textarea { + padding: 10px 20px; + } + } + + &_btn { + padding: 12px 30px; + line-height: 30px; + } + } + + // Clients =================== + .client { + &_title { + font-size: 22px; + margin-bottom: 25px; + } + + &_box { + .slick { + + &-next, + &-prev { + display: none !important; + } + + &-dots { + li { + &:nth-child(n+7) { + display: none; + } + + button { + width: 12px; + height: 12px; + } + } + } + } + } + + &_item { + height: 60px !important; + padding: 15px; + } + } + + // Footer ================= + .footer { + &_box { + flex-direction: column; + } + + .logo { + margin-bottom: 30px; + } + + .copyright { + font-size: 14px; + line-height: 30px; + text-align: center; + } + } + + // Gallery ================= + .gallery { + &_box { + &-item { + width: calc(50% - 2px); + height: 245px; + + &-title { + font-size: 13px; + line-height: 27px; + } + + &-txt { + font-size: 12px; + } + } + } + + .gal { + &_slider { + &-item { + height: 245px !important; + } + } + } + } + + // Service Page ================ + .service.page { + .service { + &_box { + &-item { + min-width: 390px; + + &-photo { + height: 280px; + } + } + } + } + } + + .main_title { + font-size: 20px; + } +} + +// 650 ======================= +@include md-sm { + .auto_container { + padding: 0 20px; + } + + + // Gallery ============== + .gallery { + padding: 60px 0; + + &_filter { + &-row { + flex-direction: column; + align-items: flex-start; + + .category { + margin-bottom: 30px; + + &:last-child { + margin-bottom: 0; + } + } + } + } + + &_box { + margin-top: 30px; + + &-item { + width: calc(100% - 2px); + } + } + } + + // Service Page ================ + .service.page { + .service { + &_box { + width: 100%; + + .slick-list { + padding: 0 !important; + } + + &-item { + min-width: 280px; + margin-right: 15px; + + &-photo { + height: 240px; + } + + &-title { + font-size: 20px; + line-height: 27px; + } + } + } + + &_list { + li { + p { + line-height: 28px; + } + } + } + } + } + + // About Page ==================== + .about.page { + .about { + &_box { + &-item { + width: calc(100% - 42px); + margin: 20px 0; + } + } + } + } + + // Modal ========================= + .modal { + &_inner { + height: unset; + } + } + +} + +// 400 =========================== +@include md-xsm { + .auto_container { + padding: 0 20px; + } + + // Crumb ================= + .crumb { + // padding: 180px 0 40px; + + // &_title { + // font-size: 26px; + // } + + &_txt { + line-height: 30px; + font-size: 14px; + } + } + + // Hero ================== + .hero { + &_item { + height: 700px !important; + } + } + + // Service Page ================= + .service.page { + .service { + &_box { + width: calc(100% + 0px); + + &-item { + min-width: unset !important; + margin-right: 5px; + } + + .slick-list { + padding: 0 !important; + } + } + } + } +} \ No newline at end of file diff --git a/themes/tps/assets/new/css/components/2-layout/select.scss b/themes/tps/assets/new/css/components/2-layout/select.scss new file mode 100644 index 0000000..4cd24eb --- /dev/null +++ b/themes/tps/assets/new/css/components/2-layout/select.scss @@ -0,0 +1,101 @@ +.custom-select select { + display: none; +} + +.custom-select { + position: relative; +} + +.select-selected { + font-weight: 400; + font-size: 16px; + line-height: 1.4; + + padding: 12px 40px 12px 20px; + cursor: pointer; + + background-color: #fff; + border-radius: 4px; + border: 1px solid #ced4da; + + &.select-arrow-active { + border-bottom: none; + border: 4px 4px 0 0; + + &:after { + transform: translateY(-50%) rotate(225deg); + } + } + + &::after { + position: absolute; + content: ""; + top: 50%; + transform: translateY(-50%) rotate(45deg); + right: 20px; + width: 8px; + height: 8px; + z-index: 4; + border-bottom: 1.5px solid #868686; + border-right: 1.5px solid #868686; + @include transition; + } +} + +.select-items { + position: absolute; + top: calc(100% + 10px); + left: 0; + right: 0; + z-index: 99; + cursor: pointer; + animation-name: select; + animation-duration: 0.3s; + background: #fff; + + div { + font-weight: 400; + font-size: 14px; + line-height: 1.4; + + color: black; + padding: 10px; + cursor: pointer; + @include transition; + background-color: rgba(200,200,200,.5);; + border: 1px solid #EDEDED; + border-radius: 4px; + margin-bottom: 2px; + + &:last-child { + margin-bottom: 0; + } + + &:hover { + border: 1px solid #EDEDED; + } + } + + &::-webkit-scrollbar { + width: 10px; + } + + &::-webkit-scrollbar-track { + background: #ededed; + border-radius: 10px; + } + + &::-webkit-scrollbar-thumb { + background: #aeaeae; + box-shadow: 0 0 6px rgba(0, 0, 0, 0.5); + } +} + +.select-hide { + display: none; +} + +.select-items div:hover, +.same-as-selected { + background-color: rgba(250,250,250,.5); +} \ No newline at end of file diff --git a/themes/tps/assets/new/css/components/2-layout/slick-theme.scss b/themes/tps/assets/new/css/components/2-layout/slick-theme.scss new file mode 100644 index 0000000..f818fea --- /dev/null +++ b/themes/tps/assets/new/css/components/2-layout/slick-theme.scss @@ -0,0 +1,485 @@ +@charset "UTF-8"; + +// Default Variables + +// Slick icon entity codes outputs the following +// "\2190" outputs ascii character "←" +// "\2192" outputs ascii character "→" +// "\2022" outputs ascii character "•" + +$slick-font-path: "./fonts/" !default; +$slick-font-family: "slick" !default; +$slick-loader-path: "./" !default; +$slick-arrow-color: #fff !default; +$slick-dot-color: #000 !default; +$slick-dot-color-active: $slick-dot-color !default; +$slick-prev-character: "\2190" !default; +$slick-next-character: "\2192" !default; +$slick-dot-character: "\2022" !default; +$slick-dot-size: 6px !default; +$slick-opacity-default: 0.75 !default; +$slick-opacity-on-hover: 1 !default; +$slick-opacity-not-active: 0.25 !default; + +@function slick-image-url($url) { + @if function-exists(image-url) { + @return image-url($url); + } + + @else { + @return url($slick-loader-path + $url); + } +} + +// @function slick-font-url($url) { +// @if function-exists(font-url) { +// @return font-url($url); +// } + +// @else { +// @return url($slick-font-path + $url); +// } +// } + +/* Slider */ + + +/* Icons */ +// @if $slick-font-family=="slick" { +// @font-face { +// font-family: "slick"; +// src: slick-font-url("slick.eot"); +// src: slick-font-url("slick.eot?#iefix") format("embedded-opentype"), +// slick-font-url("slick.woff") format("woff"), +// slick-font-url("slick.ttf") format("truetype"), +// slick-font-url("slick.svg#slick") format("svg"); +// font-weight: normal; +// font-style: normal; +// } +// } + +/* 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%; + -webkit-transform: translate(0, -50%); + -ms-transform: translate(0, -50%); + transform: translate(0, -50%); + padding: 0; + border: none; + outline: none; + + &:hover, + &:focus { + outline: none; + background: transparent; + color: transparent; + + &:before { + opacity: $slick-opacity-on-hover; + } + } + + &.slick-disabled:before { + opacity: $slick-opacity-not-active; + } + + &:before { + font-family: $slick-font-family; + font-size: 20px; + line-height: 1; + color: $slick-arrow-color; + opacity: $slick-opacity-default; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } +} + +.slick-prev { + left: -25px; + + [dir="rtl"] & { + left: auto; + right: -25px; + } + + &:before { + content: ''; + + [dir="rtl"] & { + // content: $slick-next-character; + } + } +} + +// ==== + +.client_box { + .slick-prev { + position: absolute; + top: 50%; + transform: translateY(-50%); + -ms-transform: translateY(-50%); + -moz-transform: translateY(-50%); + -o-transform: translateY(-50%); + -webkit-transform: translateY(-50%); + left: -50px; + width: 40px; + height: 40px; + background: url("../images/svg/slider-arrow.svg") no-repeat center; + background-size: contain; + z-index: 4; + } + + .slick-next { + position: absolute; + top: 50%; + transform: translateY(-50%) rotate(180deg); + -ms-transform: translateY(-50%) rotate(180deg); + -moz-transform: translateY(-50%) rotate(180deg); + -o-transform: translateY(-50%) rotate(180deg); + -webkit-transform: translateY(-50%) rotate(180deg); + right: -50px; + width: 40px; + height: 40px; + background: url("../images/svg/slider-arrow.svg") no-repeat center; + background-size: contain; + z-index: 4; + } + + .slick-dots { + display: flex; + align-items: center; + justify-content: center; + bottom: -50px; + + li { + display: block; + + button { + display: block; + width: 14px; + height: 14px; + border: 2px solid #D6D6D6; + opacity: 1; + background: transparent; + border-radius: 50%; + } + + + &.slick-active { + width: 14px; + height: 14px; + } + + &.slick-active button { + border: 1px solid $main-color; + background-size: contain; + width: 14px; + height: 14px; + opacity: 1; + position: relative; + background: transparent; + + &::after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + @include transform; + width: 50%; + height: 50%; + background: $main-color; + border-radius: 50%; + } + } + } + } +} + +.hero_slider { + .slick-track { + display: flex; + align-items: center; + } + + .slick-prev { + // position: absolute; + // top: 50%; + transform: translateY(0) rotate(180deg); + -ms-transform: translateY(0) rotate(180deg); + -moz-transform: translateY(0) rotate(180deg); + -o-transform: translateY(0) rotate(180deg); + -webkit-transform: translateY(0) rotate(180deg); + // left: 100px; + width: 36px; + height: 24px; + background: url("../images/svg/hero-slider-arrow.svg") no-repeat center; + background-size: contain; + z-index: 4; + } + + .slick-next { + // position: absolute; + // top: 50%; + transform: translateY(0%); + -ms-transform: translateY(0%); + -moz-transform: translateY(0%); + -o-transform: translateY(0%); + -webkit-transform: translateY(0%); + // right: 100px; + width: 36px; + height: 24px; + background: url("../images/svg/hero-slider-arrow.svg") no-repeat center; + background-size: contain; + z-index: 4; + } + + .slick-dots { + display: flex; + align-items: center; + justify-content: flex-end; + padding: 0 60px; + max-width: 1500px; + bottom: unset; + position: relative; + top: -50px; + margin: 0 auto; + padding-right: 30px; + z-index: 10; + + li { + display: block; + + button { + display: block; + width: 15px; + height: 15px; + border: 2.5px solid #fff; + opacity: .8; + border-radius: 50%; + } + + + &.slick-active { + width: 15px; + height: 15px; + } + + &.slick-active button { + background: transparent; + background-size: contain; + width: 15px; + height: 15px; + border-radius: 50%; + + &::after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + @include transform; + width: 6px; + height: 6px; + background: #fff; + border-radius: 50%; + } + } + } + } +} + +.banner_box { + .slick-prev { + position: absolute; + top: 50%; + transform: translateY(-50%); + -ms-transform: translateY(-50%); + -moz-transform: translateY(-50%); + -o-transform: translateY(-50%); + -webkit-transform: translateY(-50%); + left: -200px; + width: 36px; + height: 24px; + background: url("../images/svg/arrow_left.svg") no-repeat center; + background-size: contain; + z-index: 4; + } + + .slick-next { + position: absolute; + top: 50%; + transform: translateY(-50%); + -ms-transform: translateY(-50%); + -moz-transform: translateY(-50%); + -o-transform: translateY(-50%); + -webkit-transform: translateY(-50%); + right: -200px; + width: 36px; + height: 24px; + background: url("../images/svg/arrow_right.svg") no-repeat center; + background-size: contain; + z-index: 4; + } +} + +.news { + + .slick-track { + display: flex; + align-items: center; + } + + + .slick-prev { + position: absolute; + top: 50%; + transform: translateY(-50%); + -ms-transform: translateY(-50%); + -moz-transform: translateY(-50%); + -o-transform: translateY(-50%); + -webkit-transform: translateY(-50%); + left: 200px; + width: 36px; + height: 24px; + background: url("../images/svg/arrow_left-gold.svg") no-repeat center; + background-size: contain; + z-index: 4; + } + + .slick-next { + position: absolute; + top: 50%; + transform: translateY(-50%); + -ms-transform: translateY(-50%); + -moz-transform: translateY(-50%); + -o-transform: translateY(-50%); + -webkit-transform: translateY(-50%); + right: 200px; + width: 36px; + height: 24px; + background: url("../images/svg/arrow_right-gold.svg") no-repeat center; + background-size: contain; + z-index: 4; + } + + .slick-dots { + display: flex; + align-items: center; + justify-content: center; + bottom: -50px; + + li { + display: block; + + button { + display: block; + width: 12px; + height: 12px; + border: 2px solid #fff; + opacity: .3; + border-radius: 50%; + } + + + &.slick-active { + width: 30px; + height: 30px; + } + + &.slick-active button { + background: url("../images/svg/dot.svg") no-repeat center !important; + background-size: contain; + width: 30px; + height: 30px; + border: none; + } + } + } + +} + + + +.slick-next { + right: -25px; + + [dir="rtl"] & { + left: -25px; + right: auto; + } + + &:before { + content: ''; + + [dir="rtl"] & { + content: $slick-prev-character; + } + } +} + +/* Dots */ + +// .slick-dotted.slick-slider { +// margin-bottom: 30px; +// } + +.slick-dots { + position: absolute; + bottom: 32px; + list-style: none; + display: flex; + text-align: center; + align-items: center; + justify-content: center; + padding: 0; + margin: 0; + width: 100%; + + li { + position: relative; + // height: 14px; + // width: 14px; + cursor: pointer; + margin: 0 8px; + + button { + border: 0; + display: block; + height: 14px; + width: 14px; + outline: none; + color: transparent; + border-radius: 50%; + background: rgba($color: $black, $alpha: 0.5); + cursor: pointer; + // margin: 0 8px; + @include transition; + + &:focus { + outline: none; + background: $blue; + } + } + + &.slick-active button { + background: $blue; + width: 28px; + border-radius: 10px; + } + + // &.slick-active { + // width: 28px; + // } + } +} \ No newline at end of file diff --git a/themes/tps/assets/new/css/components/2-layout/slick.scss b/themes/tps/assets/new/css/components/2-layout/slick.scss new file mode 100644 index 0000000..0c1563e --- /dev/null +++ b/themes/tps/assets/new/css/components/2-layout/slick.scss @@ -0,0 +1,107 @@ +/* Slider */ + +.slick-slider { + position: relative; + display: block; + box-sizing: border-box; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -ms-touch-action: pan-y; + touch-action: pan-y; + -webkit-tap-highlight-color: transparent; +} + +.slick-list { + position: relative; + overflow: hidden; + display: block; + margin: 0; + padding: 0; + + &:focus { + outline: none; + } + + &.dragging { + cursor: pointer; + cursor: hand; + } +} + +.slick-slider .slick-track, +.slick-slider .slick-list { + -webkit-transform: translate3d(0, 0, 0); + -moz-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + -o-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} + +.slick-track { + position: relative; + left: 0; + top: 0; + display: block; + margin-left: auto; + margin-right: auto; + + &:before, + &:after { + content: ""; + display: table; + } + + &:after { + clear: both; + } + + .slick-loading & { + visibility: hidden; + } +} + +.slick-slide { + float: left; + height: 100%; + min-height: 1px; + + [dir="rtl"] & { + float: right; + } + + img { + display: block; + } + + &.slick-loading img { + display: none; + } + + display: none; + + &.dragging img { + pointer-events: none; + } + + .slick-initialized & { + display: block; + } + + .slick-loading & { + visibility: hidden; + } + + .slick-vertical & { + display: block; + height: auto; + border: 1px solid transparent; + } +} + +.slick-arrow.slick-hidden { + display: none; +} \ No newline at end of file diff --git a/themes/tps/assets/new/css/components/2-layout/slider.scss b/themes/tps/assets/new/css/components/2-layout/slider.scss new file mode 100644 index 0000000..e69de29 diff --git a/themes/tps/assets/new/css/components/3-page/about.scss b/themes/tps/assets/new/css/components/3-page/about.scss new file mode 100644 index 0000000..19ab775 --- /dev/null +++ b/themes/tps/assets/new/css/components/3-page/about.scss @@ -0,0 +1,98 @@ +// About ================ +.about.page { + padding: 50px 0 0; + + .about { + &_txt { + font-weight: 400; + font-size: 18px; + line-height: 30px; + color: #000000; + + margin-bottom: 30px; + } + + &_box { + background: linear-gradient(0deg, rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)), url("../images/blur-bg.jpg") no-repeat center; + background-size: cover; + margin-bottom: 50px; + position: relative; + padding: 80px 0; + + &::after { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + backdrop-filter: blur(15px); + z-index: 1; + } + + &-inner { + display: flex; + flex-wrap: wrap; + z-index: 5; + position: relative; + } + + &-item { + width: calc(33.33% - 82px); + margin: 20px; + text-align: center; + padding: 30px 20px; + border: .5px solid hsla(0, 0%, 100%, .3); + ; + border-radius: 12px; + + color: #fff; + + &-title { + font-size: 22px; + font-weight: 400; + line-height: 1.4; + } + + &-txt { + margin-top: 20px; + font-size: 16px; + font-weight: 400; + line-height: 1.4; + } + } + } + } +} + +.main_title { + padding-left: 25px; + position: relative; + font-size: 28px; + font-weight: 500; + line-height: 1.4; + margin: 45px 0 30px; + + &::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 3px; + height: 100%; + max-height: 35px; + background: $main-color; + } +} + +.p0 { + padding: 0 !important; +} + +.pt0 { + padding-top: 0 !important; +} + +.pb0 { + padding-bottom: 0 !important; +} \ No newline at end of file diff --git a/themes/tps/assets/new/css/components/3-page/home.scss b/themes/tps/assets/new/css/components/3-page/home.scss new file mode 100644 index 0000000..df19817 --- /dev/null +++ b/themes/tps/assets/new/css/components/3-page/home.scss @@ -0,0 +1,565 @@ +// Services ============================= +.service { + overflow: hidden; + height: calc(100vh - 110px); + + &::-webkit-scrollbar { + display: none; + } + + &_wrap { + position: relative; + height: 100%; + } + + .inner { + // height: 860px; + height: 100%; + position: relative; + } + + &_bg { + position: relative; + height: 100%; + + &-image { + position: absolute; + top: 0; + left: 0; + width: 100%; + // height: 860px; + height: 100%; + + opacity: 0; + @include transition; + transition: opacity .5s linear; + + background: url("../images/service-banner.png") no-repeat center; + background-size: cover; + + &::after { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, .5); + } + + &.main { + opacity: 1; + z-index: -1; + } + + img { + @include ImgCov; + } + } + } + + &_info { + display: flex; + z-index: 4; + + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + // overflow: auto; + overflow-x: auto; + + &::-webkit-scrollbar { + display: none; + } + } + + &_item { + width: calc(16.66% - 1px); + min-width: 250px; + border-right: 1px solid rgba(250, 250, 250, .2); + color: #fff; + + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + + text-align: center; + position: relative; + + &-info { + position: absolute; + // top: 50%; + left: 0; + @include transformY; + width: 100%; + + display: flex; + flex-direction: column; + align-items: center; + } + + &:last-child { + border-right: none; + } + + &:hover { + .service_item-title { + transform: translateY(0px); + } + + .service_item-txt { + opacity: 1; + } + } + + &-title { + padding: 30px 10px; + font-weight: 700; + font-size: 16px; + line-height: 20px; + position: relative; + transform: translateY(100px); + min-height: 40px; + + display: flex; + align-items: center; + justify-content: center; + + background: rgba(0, 0, 0, .6); + width: calc(100% - 20px); + + transition: .4s linear; + -webkit-transition: .4s linear; + -ms-transition: .4s linear; + } + + &-txt { + font-weight: 400; + font-size: 14px; + line-height: 24px; + width: calc(100% - 40px); + margin: 20px auto 0; + opacity: 0; + width: 100%; + + position: absolute; + bottom: -110px; + left: 0; + + transition: .4s linear; + -webkit-transition: .4s linear; + -ms-transition: .4s linear; + } + } +} + +// Services end ========================= + +// Contact ============================= +.contact { + padding: 100px 0; + + &_title { + font-weight: 600; + font-size: 34px; + line-height: 46px; + margin-bottom: 50px; + + overflow: hidden; + white-space: nowrap; + letter-spacing: .5px; + position: relative; + } + + &_box { + display: flex; + } + + &_form { + width: calc(50% - 25px); + margin-right: 25px; + + display: flex; + flex-direction: column; + align-items: flex-start; + } + + &_input { + width: 100%; + margin-bottom: 20px; + + input { + border: 1px solid #737373; + padding: 12px 20px; + width: calc(100% - 40px); + + font-weight: 500; + font-size: 16px; + line-height: 36px; + font-family: 'Montserrat', sans-serif; + + &::placeholder { + color: #737373; + } + } + + textarea { + border: 1px solid #737373; + padding: 12px 20px; + width: calc(100% - 40px); + + font-weight: 500; + font-size: 16px; + line-height: 36px; + font-family: 'Montserrat', sans-serif; + resize: none; + height: 180px; + + &::placeholder { + color: #737373; + } + } + } + + &_btn { + display: flex; + align-items: center; + border: 1px solid $main-color; + padding: 18px 30px; + background: transparent; + cursor: pointer; + + font-weight: 500; + font-size: 16px; + line-height: 36px; + color: $main-color; + font-family: 'Montserrat', sans-serif; + @include transition; + + &:hover { + background: $main-color; + color: #fff; + + .btn_icon { + // display: none; + opacity: 0; + width: 0; + height: 0; + overflow: hidden; + margin-right: 0; + } + + .send_icon { + display: block; + width: 18px; + height: 24px; + opacity: 1; + + } + } + + span { + width: 18px; + height: 24px; + + img { + @include ImgCon; + } + } + + .btn_icon { + margin-right: 10px; + @include transition; + } + + .send_icon { + margin-left: 15px; + @include transition; + + width: 0; + height: 0; + overflow: hidden; + } + } + + &_info { + width: calc(50% - 25px); + margin-left: 25px; + } + + &_map { + width: 100%; + height: 240px; + margin-bottom: 30px; + + iframe { + @include ImgCov; + } + } + + &_row { + display: flex; + margin-bottom: 30px; + + &:last-child { + margin-bottom: 0; + } + + &-group { + margin-top: 7px; + } + + &-icon { + width: 40px; + height: 40px; + margin-right: 20px; + } + } +} + +// Contact end ========================= + + +// About ============================= +.about { + padding: 50px 0; + + &_box { + display: flex; + } + + + &_video { + width: 100%; + + &-box { + position: relative; + width: 100%; + height: 600px; + + // &::after { + // content: ''; + // position: absolute; + // top: 50%; + // left: 50%; + // @include transform; + // background: #E5E5E5; + // width: calc(100% - 90px); + // height: calc(100% - 100px); + // z-index: -1; + // } + + // .square { + // position: absolute; + // top: 50%; + // left: 50%; + // @include transform; + // width: calc(100% - 30px); + // height: calc(100% - 30px); + // clip-path: polygon(0 0, 77% 0, 100% 37%, 100% 100%, 22% 100%, 0 63%); + // border: 1px solid red; + // z-index: 2; + // // overflow: hidden + // } + + img, + video { + @include ImgCon; + display: block; + // clip-path: polygon(0 0, 78% 0, 100% 36%, 100% 100%, 22% 100%, 0 63%); + // overflow: hidden; + } + + .video_play { + position: absolute; + top: 50%; + left: 50%; + @include transform; + width: 85px; + height: 85px; + background: #ffff; + border-radius: 50%; + display: block; + z-index: 5; + cursor: pointer; + + &::before { + content: ''; + position: absolute; + top: 50%; + left: 54%; + @include transform; + clip-path: polygon(0 0, 0% 100%, 100% 50%); + background: $main-color; + width: 24px; + height: 27px; + } + } + } + } + + &_list { + margin-bottom: 50px; + position: relative; + + li { + margin-bottom: 15px; + padding-left: 70px; + position: relative; + + &::before { + content: ''; + position: absolute; + top: 7px; + left: 25px; + background: url("../images/svg/circle.svg") no-repeat center; + background-size: contain; + width: 20px; + height: 20px; + } + + &::after { + content: ''; + position: absolute; + top: 27px; + left: 34px; + height: calc(100% + 10px); + width: 1px; + border-left: 2px dashed #C4DAF0; + border-right: none; + border-top: none; + border-bottom: none; + + z-index: -1; + } + + &:last-child { + &::after { + display: none; + } + } + + p { + font-weight: 400; + font-size: 18px; + line-height: 35px; + + span { + font-weight: 700; + } + } + } + } +} + +@keyframes open-arrow { + 0% { + left: -20px; + opacity: 0; + } + + 100% { + opacity: 1; + left: 0; + } +} + +@-webkit-keyframes open-arrow { + 0% { + left: -20px; + opacity: 0; + } + + 100% { + opacity: 1; + left: 0; + } +} + + +@keyframes typing { + from { + width: 0 + } + + to { + width: 100% + } +} + +@-webkit-keyframes typing { + from { + width: 0 + } + + to { + width: 100% + } +} + + +// About end ========================= + + +// Client ============================= +.client { + padding: 50px 0 100px; + background: #F5F5F5; + + &_title { + font-weight: 600; + font-size: 34px; + line-height: 46px; + margin-bottom: 50px; + + overflow: hidden; + white-space: nowrap; + letter-spacing: .5px; + position: relative; + } + + &_item { + width: 100%; + height: 100px !important; + margin: 0 5px; + position: relative; + + display: flex !important; + align-items: center; + justify-content: center; + + overflow: hidden; + + border: 1px solid #D9D9D9; + padding: 30px; + + img { + @include ImgCon; + transition: all .5s linear; + + &:hover { + transform: scale(1.05); + } + } + } + + .slick { + &-dots { + li { + &:nth-of-type(n+12) { + display: none; + } + } + } + } +} + +// Client end ========================= + +.title-animate { + animation: typing 3.5s steps(40, end); + -webkit-animation: typing 3.5s steps(40, end); +} \ No newline at end of file diff --git a/themes/tps/assets/new/css/components/3-page/portfolio.scss b/themes/tps/assets/new/css/components/3-page/portfolio.scss new file mode 100644 index 0000000..5f81ca2 --- /dev/null +++ b/themes/tps/assets/new/css/components/3-page/portfolio.scss @@ -0,0 +1,152 @@ +// Portfolio ===================== +.gallery { + padding: 100px 0; + + &_filter { + &-row { + display: flex; + align-items: center; + justify-content: space-between; + + .category { + display: flex; + align-items: center; + + &_icon { + width: 18px; + height: 18px; + margin-right: 10px; + + svg { + @include ImgCon; + } + } + + .select { + &-selected { + border: none; + padding: 0 20px 0 0; + + font-weight: 400; + font-size: 16px; + line-height: 20px; + + &.select-arrow-active { + &::after { + transform: translateY(-50%) rotate(180deg); + } + } + + &::after { + border: none; + clip-path: polygon(0 0, 50% 100%, 100% 0); + width: 12px; + height: 6px; + right: 0; + background: $main-color; + transform: translateY(-50%) rotate(0); + } + } + } + } + } + } + + &_box { + display: flex; + flex-wrap: wrap; + margin: 50px -1px; + + &-item { + width: calc(33.33% - 2px); + height: 370px; + margin: 1px; + position: relative; + cursor: pointer; + + &::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%); + pointer-events: none; + } + + &-info { + position: absolute; + bottom: 0; + left: 0; + padding: 30px; + width: calc(100% - 60px); + color: #fff; + z-index: 1; + pointer-events: none; + } + + &-title { + font-weight: 700; + font-size: 16px; + line-height: 36px; + } + + &-txt { + font-weight: 400; + font-size: 14px; + line-height: 17px; + } + } + } + + .gal { + &_slider { + &-item { + width: 100%; + height: 370px !important; + + img { + @include ImgCov; + } + } + } + } + + .pagination { + display: flex; + align-items: center; + + .pag_arrow { + display: flex; + align-items: center; + justify-content: center; + + width: 50px; + height: 50px; + + border: 1px solid $main-color; + + svg { + width: 30%; + height: 30%; + object-fit: contain; + -o-object-fit: contain; + } + } + + .pag_txt { + margin: 0 15px; + + font-weight: 400; + font-size: 16px; + line-height: 36px; + + span { + color: $main-color; + font-weight: 700; + } + } + } + +} \ No newline at end of file diff --git a/themes/tps/assets/new/css/components/3-page/service.scss b/themes/tps/assets/new/css/components/3-page/service.scss new file mode 100644 index 0000000..2d065f3 --- /dev/null +++ b/themes/tps/assets/new/css/components/3-page/service.scss @@ -0,0 +1,149 @@ +// Service ================= +.service.page { + padding: 50px 0 100px; + height: unset; + + .service { + &_info { + position: relative; + top: unset; + left: unset; + bottom: unset; + right: unset; + display: block; + + p { + font-weight: 400; + font-size: 18px; + line-height: 30px; + margin-bottom: 30px; + + b { + font-weight: 600; + } + + strong { + font-weight: 600; + position: relative; + padding-left: 15px; + + &::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 5px; + height: 100%; + background: $main-color; + } + } + } + } + + &_block { + overflow-x: auto; + -ms-overflow-style: none; + scrollbar-width: none; + + &::-webkit-scrollbar { + display: none; + } + } + + &_txt { + font-weight: 400; + font-size: 18px; + line-height: 30px; + margin-bottom: 30px; + + b { + font-weight: 600; + } + } + + &_box { + display: flex; + // width: calc(100% + 420px); + + // .slick-list { + // padding: 0 420px 0 0 !important; + // } + + // .slick-initialized .slick-slide { + // display: block; + // padding: 20px; + // } + + &-item { + width: calc(470px - 30px); + margin-right: 30px; + + &-photo { + width: 100%; + height: 300px; + + img { + @include ImgCov; + } + } + + &-title { + font-weight: 700; + font-size: 27px; + line-height: 36px; + + margin: 30px 0 20px; + } + } + } + + &_list { + margin-bottom: 30px; + position: relative; + + li { + margin-bottom: 15px; + padding-left: 35px; + position: relative; + + &::before { + content: ''; + position: absolute; + top: 5px; + left: 0px; + background: url("../images/svg/circle.svg") no-repeat center; + background-size: contain; + width: 20px; + height: 20px; + } + + &::after { + content: ''; + position: absolute; + top: 27px; + left: 9px; + height: calc(100% + 10px); + width: 1px; + border-left: 2px dashed #C4DAF0; + border-right: none; + border-top: none; + border-bottom: none; + + z-index: -1; + } + + &:last-child { + &::after { + display: none; + } + } + + p { + font-weight: 400; + font-size: 16px; + line-height: 30px; + } + } + } + } +} \ No newline at end of file diff --git a/themes/tps/assets/new/css/jquery.fancybox.min.css b/themes/tps/assets/new/css/jquery.fancybox.min.css new file mode 100644 index 0000000..7cc60b2 --- /dev/null +++ b/themes/tps/assets/new/css/jquery.fancybox.min.css @@ -0,0 +1 @@ +body.compensate-for-scrollbar{overflow:hidden}.fancybox-active{height:auto}.fancybox-is-hidden{left:-9999px;margin:0;position:absolute!important;top:-9999px;visibility:hidden}.fancybox-container{-webkit-backface-visibility:hidden;height:100%;left:0;outline:none;position:fixed;-webkit-tap-highlight-color:transparent;top:0;-ms-touch-action:manipulation;touch-action:manipulation;transform:translateZ(0);width:100%;z-index:99992}.fancybox-container *{box-sizing:border-box}.fancybox-bg,.fancybox-inner,.fancybox-outer,.fancybox-stage{bottom:0;left:0;position:absolute;right:0;top:0}.fancybox-outer{-webkit-overflow-scrolling:touch;overflow-y:auto}.fancybox-bg{background:#1e1e1e;opacity:0;transition-duration:inherit;transition-property:opacity;transition-timing-function:cubic-bezier(.47,0,.74,.71)}.fancybox-is-open .fancybox-bg{opacity:.9;transition-timing-function:cubic-bezier(.22,.61,.36,1)}.fancybox-caption,.fancybox-infobar,.fancybox-navigation .fancybox-button,.fancybox-toolbar{direction:ltr;opacity:0;position:absolute;transition:opacity .25s ease,visibility 0s ease .25s;visibility:hidden;z-index:99997}.fancybox-show-caption .fancybox-caption,.fancybox-show-infobar .fancybox-infobar,.fancybox-show-nav .fancybox-navigation .fancybox-button,.fancybox-show-toolbar .fancybox-toolbar{opacity:1;transition:opacity .25s ease 0s,visibility 0s ease 0s;visibility:visible}.fancybox-infobar{color:#ccc;font-size:13px;-webkit-font-smoothing:subpixel-antialiased;height:44px;left:0;line-height:44px;min-width:44px;mix-blend-mode:difference;padding:0 10px;pointer-events:none;top:0;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.fancybox-toolbar{right:0;top:0}.fancybox-stage{direction:ltr;overflow:visible;transform:translateZ(0);z-index:99994}.fancybox-is-open .fancybox-stage{overflow:hidden}.fancybox-slide{-webkit-backface-visibility:hidden;display:none;height:100%;left:0;outline:none;overflow:auto;-webkit-overflow-scrolling:touch;padding:44px;position:absolute;text-align:center;top:0;transition-property:transform,opacity;white-space:normal;width:100%;z-index:99994}.fancybox-slide:before{content:"";display:inline-block;font-size:0;height:100%;vertical-align:middle;width:0}.fancybox-is-sliding .fancybox-slide,.fancybox-slide--current,.fancybox-slide--next,.fancybox-slide--previous{display:block}.fancybox-slide--image{overflow:hidden;padding:44px 0}.fancybox-slide--image:before{display:none}.fancybox-slide--html{padding:6px}.fancybox-content{background:#fff;display:inline-block;margin:0;max-width:100%;overflow:auto;-webkit-overflow-scrolling:touch;padding:44px;position:relative;text-align:left;vertical-align:middle}.fancybox-slide--image .fancybox-content{animation-timing-function:cubic-bezier(.5,0,.14,1);-webkit-backface-visibility:hidden;background:transparent;background-repeat:no-repeat;background-size:100% 100%;left:0;max-width:none;overflow:visible;padding:0;position:absolute;top:0;transform-origin:top left;transition-property:transform,opacity;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:99995}.fancybox-can-zoomOut .fancybox-content{cursor:zoom-out}.fancybox-can-zoomIn .fancybox-content{cursor:zoom-in}.fancybox-can-pan .fancybox-content,.fancybox-can-swipe .fancybox-content{cursor:grab}.fancybox-is-grabbing .fancybox-content{cursor:grabbing}.fancybox-container [data-selectable=true]{cursor:text}.fancybox-image,.fancybox-spaceball{background:transparent;border:0;height:100%;left:0;margin:0;max-height:none;max-width:none;padding:0;position:absolute;top:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%}.fancybox-spaceball{z-index:1}.fancybox-slide--iframe .fancybox-content,.fancybox-slide--map .fancybox-content,.fancybox-slide--pdf .fancybox-content,.fancybox-slide--video .fancybox-content{height:100%;overflow:visible;padding:0;width:100%}.fancybox-slide--video .fancybox-content{background:#000}.fancybox-slide--map .fancybox-content{background:#e5e3df}.fancybox-slide--iframe .fancybox-content{background:#fff}.fancybox-iframe,.fancybox-video{background:transparent;border:0;display:block;height:100%;margin:0;overflow:hidden;padding:0;width:100%}.fancybox-iframe{left:0;position:absolute;top:0}.fancybox-error{background:#fff;cursor:default;max-width:400px;padding:40px;width:100%}.fancybox-error p{color:#444;font-size:16px;line-height:20px;margin:0;padding:0}.fancybox-button{background:rgba(30,30,30,.6);border:0;border-radius:0;box-shadow:none;cursor:pointer;display:inline-block;height:44px;margin:0;padding:10px;position:relative;transition:color .2s;vertical-align:top;visibility:inherit;width:44px}.fancybox-button,.fancybox-button:link,.fancybox-button:visited{color:#ccc}.fancybox-button:hover{color:#fff}.fancybox-button:focus{outline:none}.fancybox-button.fancybox-focus{outline:1px dotted}.fancybox-button[disabled],.fancybox-button[disabled]:hover{color:#888;cursor:default;outline:none}.fancybox-button div{height:100%}.fancybox-button svg{display:block;height:100%;overflow:visible;position:relative;width:100%}.fancybox-button svg path{fill:currentColor;stroke-width:0}.fancybox-button--fsenter svg:nth-child(2),.fancybox-button--fsexit svg:first-child,.fancybox-button--pause svg:first-child,.fancybox-button--play svg:nth-child(2){display:none}.fancybox-progress{background:#ff5268;height:2px;left:0;position:absolute;right:0;top:0;transform:scaleX(0);transform-origin:0;transition-property:transform;transition-timing-function:linear;z-index:99998}.fancybox-close-small{background:transparent;border:0;border-radius:0;color:#ccc;cursor:pointer;opacity:.8;padding:8px;position:absolute;right:-12px;top:-44px;z-index:401}.fancybox-close-small:hover{color:#fff;opacity:1}.fancybox-slide--html .fancybox-close-small{color:currentColor;padding:10px;right:0;top:0}.fancybox-slide--image.fancybox-is-scaling .fancybox-content{overflow:hidden}.fancybox-is-scaling .fancybox-close-small,.fancybox-is-zoomable.fancybox-can-pan .fancybox-close-small{display:none}.fancybox-navigation .fancybox-button{background-clip:content-box;height:100px;opacity:0;position:absolute;top:calc(50% - 50px);width:70px}.fancybox-navigation .fancybox-button div{padding:7px}.fancybox-navigation .fancybox-button--arrow_left{left:0;left:env(safe-area-inset-left);padding:31px 26px 31px 6px}.fancybox-navigation .fancybox-button--arrow_right{padding:31px 6px 31px 26px;right:0;right:env(safe-area-inset-right)}.fancybox-caption{background:linear-gradient(0deg,rgba(0,0,0,.85) 0,rgba(0,0,0,.3) 50%,rgba(0,0,0,.15) 65%,rgba(0,0,0,.075) 75.5%,rgba(0,0,0,.037) 82.85%,rgba(0,0,0,.019) 88%,transparent);bottom:0;color:#eee;font-size:14px;font-weight:400;left:0;line-height:1.5;padding:75px 44px 25px;pointer-events:none;right:0;text-align:center;z-index:99996}@supports (padding:max(0px)){.fancybox-caption{padding:75px max(44px,env(safe-area-inset-right)) max(25px,env(safe-area-inset-bottom)) max(44px,env(safe-area-inset-left))}}.fancybox-caption--separate{margin-top:-50px}.fancybox-caption__body{max-height:50vh;overflow:auto;pointer-events:all}.fancybox-caption a,.fancybox-caption a:link,.fancybox-caption a:visited{color:#ccc;text-decoration:none}.fancybox-caption a:hover{color:#fff;text-decoration:underline}.fancybox-loading{animation:a 1s linear infinite;background:transparent;border:4px solid #888;border-bottom-color:#fff;border-radius:50%;height:50px;left:50%;margin:-25px 0 0 -25px;opacity:.7;padding:0;position:absolute;top:50%;width:50px;z-index:99999}@keyframes a{to{transform:rotate(1turn)}}.fancybox-animated{transition-timing-function:cubic-bezier(0,0,.25,1)}.fancybox-fx-slide.fancybox-slide--previous{opacity:0;transform:translate3d(-100%,0,0)}.fancybox-fx-slide.fancybox-slide--next{opacity:0;transform:translate3d(100%,0,0)}.fancybox-fx-slide.fancybox-slide--current{opacity:1;transform:translateZ(0)}.fancybox-fx-fade.fancybox-slide--next,.fancybox-fx-fade.fancybox-slide--previous{opacity:0;transition-timing-function:cubic-bezier(.19,1,.22,1)}.fancybox-fx-fade.fancybox-slide--current{opacity:1}.fancybox-fx-zoom-in-out.fancybox-slide--previous{opacity:0;transform:scale3d(1.5,1.5,1.5)}.fancybox-fx-zoom-in-out.fancybox-slide--next{opacity:0;transform:scale3d(.5,.5,.5)}.fancybox-fx-zoom-in-out.fancybox-slide--current{opacity:1;transform:scaleX(1)}.fancybox-fx-rotate.fancybox-slide--previous{opacity:0;transform:rotate(-1turn)}.fancybox-fx-rotate.fancybox-slide--next{opacity:0;transform:rotate(1turn)}.fancybox-fx-rotate.fancybox-slide--current{opacity:1;transform:rotate(0deg)}.fancybox-fx-circular.fancybox-slide--previous{opacity:0;transform:scale3d(0,0,0) translate3d(-100%,0,0)}.fancybox-fx-circular.fancybox-slide--next{opacity:0;transform:scale3d(0,0,0) translate3d(100%,0,0)}.fancybox-fx-circular.fancybox-slide--current{opacity:1;transform:scaleX(1) translateZ(0)}.fancybox-fx-tube.fancybox-slide--previous{transform:translate3d(-100%,0,0) scale(.1) skew(-10deg)}.fancybox-fx-tube.fancybox-slide--next{transform:translate3d(100%,0,0) scale(.1) skew(10deg)}.fancybox-fx-tube.fancybox-slide--current{transform:translateZ(0) scale(1)}@media (max-height:576px){.fancybox-slide{padding-left:6px;padding-right:6px}.fancybox-slide--image{padding:6px 0}.fancybox-close-small{right:-6px}.fancybox-slide--image .fancybox-close-small{background:#4e4e4e;color:#f2f4f6;height:36px;opacity:1;padding:6px;right:0;top:0;width:36px}.fancybox-caption{padding-left:12px;padding-right:12px}@supports (padding:max(0px)){.fancybox-caption{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}}}.fancybox-share{background:#f4f4f4;border-radius:3px;max-width:90%;padding:30px;text-align:center}.fancybox-share h1{color:#222;font-size:35px;font-weight:700;margin:0 0 20px}.fancybox-share p{margin:0;padding:0}.fancybox-share__button{border:0;border-radius:3px;display:inline-block;font-size:14px;font-weight:700;line-height:40px;margin:0 5px 10px;min-width:130px;padding:0 15px;text-decoration:none;transition:all .2s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap}.fancybox-share__button:link,.fancybox-share__button:visited{color:#fff}.fancybox-share__button:hover{text-decoration:none}.fancybox-share__button--fb{background:#3b5998}.fancybox-share__button--fb:hover{background:#344e86}.fancybox-share__button--pt{background:#bd081d}.fancybox-share__button--pt:hover{background:#aa0719}.fancybox-share__button--tw{background:#1da1f2}.fancybox-share__button--tw:hover{background:#0d95e8}.fancybox-share__button svg{height:25px;margin-right:7px;position:relative;top:-1px;vertical-align:middle;width:25px}.fancybox-share__button svg path{fill:#fff}.fancybox-share__input{background:transparent;border:0;border-bottom:1px solid #d7d7d7;border-radius:0;color:#5d5b5b;font-size:14px;margin:10px 0 0;outline:none;padding:10px 15px;width:100%}.fancybox-thumbs{background:#ddd;bottom:0;display:none;margin:0;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar;padding:2px 2px 4px;position:absolute;right:0;-webkit-tap-highlight-color:rgba(0,0,0,0);top:0;width:212px;z-index:99995}.fancybox-thumbs-x{overflow-x:auto;overflow-y:hidden}.fancybox-show-thumbs .fancybox-thumbs{display:block}.fancybox-show-thumbs .fancybox-inner{right:212px}.fancybox-thumbs__list{font-size:0;height:100%;list-style:none;margin:0;overflow-x:hidden;overflow-y:auto;padding:0;position:absolute;position:relative;white-space:nowrap;width:100%}.fancybox-thumbs-x .fancybox-thumbs__list{overflow:hidden}.fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar{width:7px}.fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar-track{background:#fff;border-radius:10px;box-shadow:inset 0 0 6px rgba(0,0,0,.3)}.fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar-thumb{background:#2a2a2a;border-radius:10px}.fancybox-thumbs__list a{-webkit-backface-visibility:hidden;backface-visibility:hidden;background-color:rgba(0,0,0,.1);background-position:50%;background-repeat:no-repeat;background-size:cover;cursor:pointer;float:left;height:75px;margin:2px;max-height:calc(100% - 8px);max-width:calc(50% - 4px);outline:none;overflow:hidden;padding:0;position:relative;-webkit-tap-highlight-color:transparent;width:100px}.fancybox-thumbs__list a:before{border:6px solid #ff5268;bottom:0;content:"";left:0;opacity:0;position:absolute;right:0;top:0;transition:all .2s cubic-bezier(.25,.46,.45,.94);z-index:99991}.fancybox-thumbs__list a:focus:before{opacity:.5}.fancybox-thumbs__list a.fancybox-thumbs-active:before{opacity:1}@media (max-width:576px){.fancybox-thumbs{width:110px}.fancybox-show-thumbs .fancybox-inner{right:110px}.fancybox-thumbs__list a{max-width:calc(100% - 10px)}} \ No newline at end of file diff --git a/themes/tps/assets/new/css/main.css b/themes/tps/assets/new/css/main.css new file mode 100644 index 0000000..6f6b98d --- /dev/null +++ b/themes/tps/assets/new/css/main.css @@ -0,0 +1,2915 @@ +@charset "UTF-8"; +*, +*::before, +*::after { + margin: 0px; + padding: 0px; + border: none; + outline: none; + scroll-behavior: smooth; +} + +button { + 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: "Montserrat", sans-serif; + font-size: 14px; + color: #000; + line-height: 1.7em; + font-weight: 400; + background: #fff; + position: relative; + box-sizing: border-box; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-font-smoothing: antialiased; + -moz-font-smoothing: antialiased; +} + +body.active { + overflow: hidden; +} + +a { + text-decoration: none; + 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: 1500px; + padding: 0px 60px; + margin: 0 auto; +} + +ul, +li { + list-style: none; + padding: 0px; + margin: 0px; +} + +/* width */ +::-webkit-scrollbar { + width: 8px; +} + +/* Track */ +::-webkit-scrollbar-track { + background: #fff; + border: 1px solid #DFDFDF; + border-radius: 10px; +} + +/* Handle */ +::-webkit-scrollbar-thumb { + background: #DFDFDF; + border-radius: 10px; +} + +/* Handle on hover */ +::-webkit-scrollbar-thumb:hover { + background: #DFDFDF; +} + +.header { + padding: 20px 0; + z-index: 50; + background: #000; + position: relative; +} +.header_row { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; +} +.header .logo { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + position: relative; +} +.header .logo svg { + width: 100%; + height: 100%; + object-fit: contain; + -o-object-fit: contain; + position: relative; +} +.header .logo_bg { + width: 70px; + height: 70px; + display: block; +} +.header .logo_bg svg, +.header .logo_bg img { + width: 100%; + height: 100%; + object-fit: contain; + -o-object-fit: contain; +} +.header .logo_group { + position: relative; + margin-right: 10px; +} +.header .logo_group-txt { + width: 120px; + height: 30px; + overflow: hidden; +} +.header .logo_group-txt svg { + width: 100%; + height: 100%; + object-fit: contain; + -o-object-fit: contain; + position: relative; +} +.header .logo_group:last-child { + margin-right: 0; +} +.header .logo_inner-text { + font-size: 18px; + font-weight: 900; + line-height: 1; + color: #6A6A6A; + position: absolute; + top: 53%; + 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%); +} +.header .nav { + position: relative; +} +.header .nav ul { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} +.header .nav ul li { + margin-right: 60px; + position: relative; +} +.header .nav ul li:last-child { + margin-right: 0; +} +.header .nav ul li a, +.header .nav ul li span { + display: block; + font-weight: 500; + font-size: 16px; + line-height: 20px; + color: #FFFFFF; + cursor: pointer; +} +.header .nav ul li a.service_nav-link, +.header .nav ul li span.service_nav-link { + position: relative; +} +.header .nav ul li a.service_nav-link::after, +.header .nav ul li span.service_nav-link::after { + content: ""; + 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%); + width: 8px; + height: 4px; + -webkit-clip-path: polygon(0 0, 50% 100%, 100% 0); + clip-path: polygon(0 0, 50% 100%, 100% 0); + background: #fff; +} +.header .nav_contact { + padding: 20px; + -webkit-box-shadow: inset 0 0 0 2px #fff; + box-shadow: inset 0 0 0 2px #fff; + -webkit-transition: color 0.25s 0.0833333333s; + transition: color 0.25s 0.0833333333s; + position: relative; +} +.header .nav_contact:focus { + outline: 2px dotted #ccc; +} +.header .nav_contact:hover { + color: #ccc; +} +.header .nav_contact:hover::before, .header .nav_contact:hover::after { + border-color: #ccc; + -webkit-transition: border-color 0s, width 0.25s, height 0.25s; + transition: border-color 0s, width 0.25s, height 0.25s; + width: 100%; + height: 100%; +} +.header .nav_contact:hover::before { + -webkit-transition-delay: 0s, 0s, 0.25s; + transition-delay: 0s, 0s, 0.25s; +} +.header .nav_contact:hover::after { + -webkit-transition-delay: 0s, 0.25s, 0s; + transition-delay: 0s, 0.25s, 0s; +} +.header .nav_contact::before, .header .nav_contact::after { + border: 0 solid transparent; + -webkit-box-sizing: border-box; + box-sizing: border-box; + content: ""; + pointer-events: none; + position: absolute; + width: 0; + height: 0; + bottom: 0; + right: 0; +} +.header .nav_contact::before { + border-bottom-width: 4px; + border-left-width: 4px; +} +.header .nav_contact::after { + border-top-width: 4px; + border-right-width: 4px; +} +.header .nav .service_nav { + background: rgba(0, 0, 0, 0.7); + position: absolute; + top: calc(100% + 60px); + left: 50%; + transform: translateX(-50%); + -moz-ransform: translateX(-50%); + -o-transform: translateX(-50%); + -ms-transform: translateX(-50%); + -webkit-transform: translateX(-50%); + white-space: nowrap; + z-index: 3; + min-width: 400px; + text-align: center; + opacity: 0; + pointer-events: none; + -webkit-transition: 0.4s linear; + transition: 0.4s linear; +} +.header .nav .service_nav.active { + top: calc(100% + 20px); + opacity: 1; + pointer-events: unset; +} +.header .nav .service_nav a { + display: block; + font-weight: 500; + font-size: 16px; + line-height: 20px; + color: #fff; + -webkit-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; + padding: 20px 0; +} +.header .nav .service_nav a:hover { + background: #2B72B6; + color: #fff; +} +.header .lang { + position: relative; +} +.header .lang_current { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + position: relative; + margin-right: 20px; + cursor: pointer; +} +.header .lang_current h6 { + position: relative; + display: block; + font-weight: 500; + font-size: 14px; + line-height: 20px; + color: #FFFFFF; +} +.header .lang_current h6::after { + content: ""; + 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%); + width: 8px; + height: 4px; + -webkit-clip-path: polygon(0 0, 50% 100%, 100% 0); + clip-path: polygon(0 0, 50% 100%, 100% 0); + background: #fff; +} +.header .lang_icon { + width: 20px; + height: 20px; + margin-right: 10px; +} +.header .lang_icon img { + width: 100%; + height: 100%; + object-fit: contain; + -o-object-fit: contain; +} +.header .lang_drop { + position: absolute; + top: calc(100% + 50px); + left: 50%; + transform: translateX(-50%); + -moz-ransform: translateX(-50%); + -o-transform: translateX(-50%); + -ms-transform: translateX(-50%); + -webkit-transform: translateX(-50%); + background: rgba(0, 0, 0, 0.7); + color: #fff; + width: 120px; + opacity: 0; + pointer-events: none; + -webkit-transition: 0.3s linear; + transition: 0.3s linear; +} +.header .lang_drop.active { + opacity: 1; + pointer-events: unset; + top: calc(100% + 20px); +} +.header .lang_drop-link { + color: #fff !important; + display: block; + text-align: center; + text-transform: uppercase; + font-size: 15px; + font-weight: 500; + line-height: 1.4; + padding: 7px; + -webkit-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; +} +.header .lang_drop-link:hover { + background: #2B72B6 !important; + color: #fff !important; +} +.header .burger { + display: none; +} + +@keyframes logo-bg { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@-webkit-keyframes logo-bg { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@keyframes inner-txt { + 0% { + opacity: 0; + } + 85% { + opacity: 0; + } + 100% { + opacity: 1; + } +} +@-webkit-keyframes inner-txt { + 0% { + opacity: 0; + } + 85% { + opacity: 0; + } + 100% { + opacity: 1; + } +} +@keyframes group-txt { + 0% { + -webkit-transform: translateX(-150%); + transform: translateX(-150%); + opacity: 0; + } + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + opacity: 1; + } +} +@-webkit-keyframes group-txt { + 0% { + -webkit-transform: translateX(-150%); + transform: translateX(-150%); + opacity: 0; + } + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + opacity: 1; + } +} +.logo-bg-animate { + animation: logo-bg 0.8s linear; + -webkit-animation: logo-bg 0.8s linear; +} + +.inner-txt-animte { + animation: inner-txt 1s linear; + -webkit-animation: inner-txt 1s linear; +} + +.group-txt-animte { + animation: group-txt 1s linear; + -webkit-animation: group-txt 1s linear; +} + +svg .svg-elem-1 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 0s; + transition: fill 0.7s ease-in 0s; +} + +svg.active .svg-elem-1 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-2 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 0.07s; + transition: fill 0.7s ease-in 0.07s; +} + +svg.active .svg-elem-2 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-3 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 0.14s; + transition: fill 0.7s ease-in 0.14s; +} + +svg.active .svg-elem-3 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-4 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 0.21s; + transition: fill 0.7s ease-in 0.21s; +} + +svg.active .svg-elem-4 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-5 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 0.28s; + transition: fill 0.7s ease-in 0.28s; +} + +svg.active .svg-elem-5 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-6 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 0.35s; + transition: fill 0.7s ease-in 0.35s; +} + +svg.active .svg-elem-6 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-7 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 0.42s; + transition: fill 0.7s ease-in 0.42s; +} + +svg.active .svg-elem-7 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-8 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 0.49s; + transition: fill 0.7s ease-in 0.49s; +} + +svg.active .svg-elem-8 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-9 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 0.56s; + transition: fill 0.7s ease-in 0.56s; +} + +svg.active .svg-elem-9 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-10 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 0.63s; + transition: fill 0.7s ease-in 0.63s; +} + +svg.active .svg-elem-10 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-11 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 0.7s; + transition: fill 0.7s ease-in 0.7s; +} + +svg.active .svg-elem-11 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-12 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 0.77s; + transition: fill 0.7s ease-in 0.77s; +} + +svg.active .svg-elem-12 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-13 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 0.84s; + transition: fill 0.7s ease-in 0.84s; +} + +svg.active .svg-elem-13 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-14 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 0.91s; + transition: fill 0.7s ease-in 0.91s; +} + +svg.active .svg-elem-14 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-15 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 0.98s; + transition: fill 0.7s ease-in 0.98s; +} + +svg.active .svg-elem-15 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-16 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 1.05s; + transition: fill 0.7s ease-in 1.05s; +} + +svg.active .svg-elem-16 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-17 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 1.12s; + transition: fill 0.7s ease-in 1.12s; +} + +svg.active .svg-elem-17 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-18 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 1.19s; + transition: fill 0.7s ease-in 1.19s; +} + +svg.active .svg-elem-18 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-19 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 1.26s; + transition: fill 0.7s ease-in 1.26s; +} + +svg.active .svg-elem-19 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-20 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 1.33s; + transition: fill 0.7s ease-in 1.33s; +} + +svg.active .svg-elem-20 { + fill: rgb(255, 255, 255); +} + +svg .svg-elem-21 { + fill: transparent; + -webkit-transition: fill 0.7s ease-in 1.4s; + transition: fill 0.7s ease-in 1.4s; +} + +svg.active .svg-elem-21 { + fill: rgb(255, 255, 255); +} + +.crumb { + padding: 50px 0 0; +} +.crumb_title { + font-weight: 700; + font-size: 28px; + line-height: 46px; +} +.crumb_txt { + font-weight: 400; + font-size: 16px; + line-height: 30px; +} + +.custom-select select { + display: none; +} + +.custom-select { + position: relative; +} + +.select-selected { + font-weight: 400; + font-size: 16px; + line-height: 1.4; + padding: 12px 40px 12px 20px; + cursor: pointer; + background-color: #fff; + border-radius: 4px; + border: 1px solid #ced4da; +} +.select-selected.select-arrow-active { + border-bottom: none; + border: 4px 4px 0 0; +} +.select-selected.select-arrow-active:after { + -webkit-transform: translateY(-50%) rotate(225deg); + transform: translateY(-50%) rotate(225deg); +} +.select-selected::after { + position: absolute; + content: ""; + top: 50%; + -webkit-transform: translateY(-50%) rotate(45deg); + transform: translateY(-50%) rotate(45deg); + right: 20px; + width: 8px; + height: 8px; + z-index: 4; + border-bottom: 1.5px solid #868686; + border-right: 1.5px solid #868686; + -webkit-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; +} + +.select-items { + position: absolute; + top: calc(100% + 10px); + left: 0; + right: 0; + z-index: 99; + cursor: pointer; + -webkit-animation-name: select; + animation-name: select; + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + background: #fff; +} +.select-items div { + font-weight: 400; + font-size: 14px; + line-height: 1.4; + color: black; + padding: 10px; + cursor: pointer; + -webkit-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; + background-color: rgba(200, 200, 200, 0.5); + border: 1px solid #EDEDED; + border-radius: 4px; + margin-bottom: 2px; +} +.select-items div:last-child { + margin-bottom: 0; +} +.select-items div:hover { + border: 1px solid #EDEDED; +} +.select-items::-webkit-scrollbar { + width: 10px; +} +.select-items::-webkit-scrollbar-track { + background: #ededed; + border-radius: 10px; +} +.select-items::-webkit-scrollbar-thumb { + background: #aeaeae; + -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.5); + box-shadow: 0 0 6px rgba(0, 0, 0, 0.5); +} + +.select-hide { + display: none; +} + +.select-items div:hover, +.same-as-selected { + background-color: rgba(250, 250, 250, 0.5); +} + +.modal { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.5); + -webkit-backdrop-filter: blur(5px); + backdrop-filter: blur(5px); + z-index: 50; + display: none; +} +.modal.active { + display: block; +} +.modal.active .modal_inner { + top: 50%; + opacity: 1; +} +.modal_inner { + position: absolute; + top: 60%; + 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%); + max-width: 900px; + width: calc(100% - 120px); + max-height: 450px; + height: calc(100% - 150px); + padding: 70px 50px; + background: rgba(0, 0, 0, 0.5); + -webkit-backdrop-filter: 5px; + backdrop-filter: 5px; + -webkit-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; + opacity: 0.3; + display: block; +} +.modal_close { + position: absolute; + top: 30px; + right: 30px; + cursor: pointer; + width: 20px; + height: 20px; +} +.modal_close:hover svg path { + fill: red; +} +.modal_close svg { + width: 100%; + height: 100%; + object-fit: contain; + -o-object-fit: contain; + -webkit-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; + pointer-events: none; +} +.modal_video { + width: 100%; + height: 100%; +} +.modal_video video { + width: 100%; + height: 100%; + object-fit: contain; + -o-object-fit: contain; +} + +.footer { + padding: 30px 0; + background: #000; +} +.footer_box { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; +} +.footer .logo { + width: 200px; + height: 70px; +} +.footer .logo img { + width: 100%; + height: 100%; + object-fit: contain; + -o-object-fit: contain; +} +.footer .copyright { + font-weight: 500; + font-size: 16px; + line-height: 32px; + color: #fff; +} + +.service { + overflow: hidden; + height: calc(100vh - 110px); +} +.service::-webkit-scrollbar { + display: none; +} +.service_wrap { + position: relative; + height: 100%; +} +.service .inner { + height: 100%; + position: relative; +} +.service_bg { + position: relative; + height: 100%; +} +.service_bg-image { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 0; + -webkit-transition: all 0.2s ease-in-out 0s; + transition: all 0.2s ease-in-out 0s; + -webkit-transition: opacity 0.5s linear; + transition: opacity 0.5s linear; + background: url("../images/service-banner.png") no-repeat center; + background-size: cover; +} +.service_bg-image::after { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.5); +} +.service_bg-image.main { + opacity: 1; + z-index: -1; +} +.service_bg-image img { + width: 100%; + height: 100%; + object-fit: cover; + -o-object-fit: cover; +} +.service_info { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + z-index: 4; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + overflow-x: auto; +} +.service_info::-webkit-scrollbar { + display: none; +} +.service_item { + width: calc(16.66% - 1px); + min-width: 250px; + border-right: 1px solid rgba(250, 250, 250, 0.2); + color: #fff; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + text-align: center; + position: relative; +} +.service_item-info { + position: absolute; + left: 0; + transform: translateY(-50%); + -moz-ransform: translateY(-50%); + -o-transform: translateY(-50%); + -ms-transform: translateY(-50%); + -webkit-transform: translateY(-50%); + width: 100%; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} +.service_item:last-child { + border-right: none; +} +.service_item:hover .service_item-title { + -webkit-transform: translateY(0px); + transform: translateY(0px); +} +.service_item:hover .service_item-txt { + opacity: 1; +} +.service_item-title { + padding: 30px 10px; + font-weight: 700; + font-size: 16px; + line-height: 20px; + position: relative; + -webkit-transform: translateY(100px); + transform: translateY(100px); + min-height: 40px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + background: rgba(0, 0, 0, 0.6); + width: calc(100% - 20px); + transition: 0.4s linear; + -webkit-transition: 0.4s linear; + -ms-transition: 0.4s linear; +} +.service_item-txt { + font-weight: 400; + font-size: 14px; + line-height: 24px; + width: calc(100% - 40px); + margin: 20px auto 0; + opacity: 0; + width: 100%; + position: absolute; + bottom: -110px; + left: 0; + transition: 0.4s linear; + -webkit-transition: 0.4s linear; + -ms-transition: 0.4s linear; +} + +.contact { + padding: 100px 0; +} +.contact_title { + font-weight: 600; + font-size: 34px; + line-height: 46px; + margin-bottom: 50px; + overflow: hidden; + white-space: nowrap; + letter-spacing: 0.5px; + position: relative; +} +.contact_box { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} +.contact_form { + width: calc(50% - 25px); + margin-right: 25px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; +} +.contact_input { + width: 100%; + margin-bottom: 20px; +} +.contact_input input { + border: 1px solid #737373; + padding: 12px 20px; + width: calc(100% - 40px); + font-weight: 500; + font-size: 16px; + line-height: 36px; + font-family: "Montserrat", sans-serif; +} +.contact_input input::-webkit-input-placeholder { + color: #737373; +} +.contact_input input::-moz-placeholder { + color: #737373; +} +.contact_input input:-ms-input-placeholder { + color: #737373; +} +.contact_input input::-ms-input-placeholder { + color: #737373; +} +.contact_input input::placeholder { + color: #737373; +} +.contact_input textarea { + border: 1px solid #737373; + padding: 12px 20px; + width: calc(100% - 40px); + font-weight: 500; + font-size: 16px; + line-height: 36px; + font-family: "Montserrat", sans-serif; + resize: none; + height: 180px; +} +.contact_input textarea::-webkit-input-placeholder { + color: #737373; +} +.contact_input textarea::-moz-placeholder { + color: #737373; +} +.contact_input textarea:-ms-input-placeholder { + color: #737373; +} +.contact_input textarea::-ms-input-placeholder { + color: #737373; +} +.contact_input textarea::placeholder { + color: #737373; +} +.contact_btn { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border: 1px solid #2B72B6; + padding: 18px 30px; + background: transparent; + cursor: pointer; + font-weight: 500; + font-size: 16px; + line-height: 36px; + color: #2B72B6; + font-family: "Montserrat", sans-serif; + -webkit-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; +} +.contact_btn:hover { + background: #2B72B6; + color: #fff; +} +.contact_btn:hover .btn_icon { + opacity: 0; + width: 0; + height: 0; + overflow: hidden; + margin-right: 0; +} +.contact_btn:hover .send_icon { + display: block; + width: 18px; + height: 24px; + opacity: 1; +} +.contact_btn span { + width: 18px; + height: 24px; +} +.contact_btn span img { + width: 100%; + height: 100%; + object-fit: contain; + -o-object-fit: contain; +} +.contact_btn .btn_icon { + margin-right: 10px; + -webkit-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; +} +.contact_btn .send_icon { + margin-left: 15px; + -webkit-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; + width: 0; + height: 0; + overflow: hidden; +} +.contact_info { + width: calc(50% - 25px); + margin-left: 25px; +} +.contact_map { + width: 100%; + height: 240px; + margin-bottom: 30px; +} +.contact_map iframe { + width: 100%; + height: 100%; + object-fit: cover; + -o-object-fit: cover; +} +.contact_row { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + margin-bottom: 30px; +} +.contact_row:last-child { + margin-bottom: 0; +} +.contact_row-group { + margin-top: 7px; +} +.contact_row-icon { + width: 40px; + height: 40px; + margin-right: 20px; +} + +.about { + padding: 50px 0; +} +.about_box { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} +.about_video { + width: 100%; +} +.about_video-box { + position: relative; + width: 100%; + height: 600px; +} +.about_video-box img, +.about_video-box video { + width: 100%; + height: 100%; + object-fit: contain; + -o-object-fit: contain; + display: block; +} +.about_video-box .video_play { + 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%); + width: 85px; + height: 85px; + background: white; + border-radius: 50%; + display: block; + z-index: 5; + cursor: pointer; +} +.about_video-box .video_play::before { + content: ""; + position: absolute; + top: 50%; + left: 54%; + transform: translate(-50%, -50%); + -moz-ransform: translate(-50%, -50%); + -o-transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); + -webkit-transform: translate(-50%, -50%); + -webkit-clip-path: polygon(0 0, 0% 100%, 100% 50%); + clip-path: polygon(0 0, 0% 100%, 100% 50%); + background: #2B72B6; + width: 24px; + height: 27px; +} +.about_list { + margin-bottom: 50px; + position: relative; +} +.about_list li { + margin-bottom: 15px; + padding-left: 70px; + position: relative; +} +.about_list li::before { + content: ""; + position: absolute; + top: 7px; + left: 25px; + background: url("../images/svg/circle.svg") no-repeat center; + background-size: contain; + width: 20px; + height: 20px; +} +.about_list li::after { + content: ""; + position: absolute; + top: 27px; + left: 34px; + height: calc(100% + 10px); + width: 1px; + border-left: 2px dashed #C4DAF0; + border-right: none; + border-top: none; + border-bottom: none; + z-index: -1; +} +.about_list li:last-child::after { + display: none; +} +.about_list li p { + font-weight: 400; + font-size: 18px; + line-height: 35px; +} +.about_list li p span { + font-weight: 700; +} + +@keyframes open-arrow { + 0% { + left: -20px; + opacity: 0; + } + 100% { + opacity: 1; + left: 0; + } +} +@-webkit-keyframes open-arrow { + 0% { + left: -20px; + opacity: 0; + } + 100% { + opacity: 1; + left: 0; + } +} +@keyframes typing { + from { + width: 0; + } + to { + width: 100%; + } +} +@-webkit-keyframes typing { + from { + width: 0; + } + to { + width: 100%; + } +} +.client { + padding: 50px 0 100px; + background: #F5F5F5; +} +.client_title { + font-weight: 600; + font-size: 34px; + line-height: 46px; + margin-bottom: 50px; + overflow: hidden; + white-space: nowrap; + letter-spacing: 0.5px; + position: relative; +} +.client_item { + width: 100%; + height: 100px !important; + margin: 0 5px; + position: relative; + display: -webkit-box !important; + display: -ms-flexbox !important; + display: flex !important; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + overflow: hidden; + border: 1px solid #D9D9D9; + padding: 30px; +} +.client_item img { + width: 100%; + height: 100%; + object-fit: contain; + -o-object-fit: contain; + -webkit-transition: all 0.5s linear; + transition: all 0.5s linear; +} +.client_item img:hover { + -webkit-transform: scale(1.05); + transform: scale(1.05); +} +.client .slick-dots li:nth-of-type(n+12) { + display: none; +} + +.title-animate { + animation: typing 3.5s steps(40, end); + -webkit-animation: typing 3.5s steps(40, end); +} + +.about.page { + padding: 50px 0 0; +} +.about.page .about_txt { + font-weight: 400; + font-size: 18px; + line-height: 30px; + color: #000000; + margin-bottom: 30px; +} +.about.page .about_box { + background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.7)), to(rgba(0, 0, 0, 0.7))), url("../images/blur-bg.jpg") no-repeat center; + background: linear-gradient(0deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("../images/blur-bg.jpg") no-repeat center; + background-size: cover; + margin-bottom: 50px; + position: relative; + padding: 80px 0; +} +.about.page .about_box::after { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + -webkit-backdrop-filter: blur(15px); + backdrop-filter: blur(15px); + z-index: 1; +} +.about.page .about_box-inner { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + z-index: 5; + position: relative; +} +.about.page .about_box-item { + width: calc(33.33% - 82px); + margin: 20px; + text-align: center; + padding: 30px 20px; + border: 0.5px solid hsla(0, 0%, 100%, 0.3); + border-radius: 12px; + color: #fff; +} +.about.page .about_box-item-title { + font-size: 22px; + font-weight: 400; + line-height: 1.4; +} +.about.page .about_box-item-txt { + margin-top: 20px; + font-size: 16px; + font-weight: 400; + line-height: 1.4; +} + +.main_title { + padding-left: 25px; + position: relative; + font-size: 28px; + font-weight: 500; + line-height: 1.4; + margin: 45px 0 30px; +} +.main_title::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 3px; + height: 100%; + max-height: 35px; + background: #2B72B6; +} + +.p0 { + padding: 0 !important; +} + +.pt0 { + padding-top: 0 !important; +} + +.pb0 { + padding-bottom: 0 !important; +} + +.gallery { + padding: 100px 0; +} +.gallery_filter-row { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; +} +.gallery_filter-row .category { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} +.gallery_filter-row .category_icon { + width: 18px; + height: 18px; + margin-right: 10px; +} +.gallery_filter-row .category_icon svg { + width: 100%; + height: 100%; + object-fit: contain; + -o-object-fit: contain; +} +.gallery_filter-row .category .select-selected { + border: none; + padding: 0 20px 0 0; + font-weight: 400; + font-size: 16px; + line-height: 20px; +} +.gallery_filter-row .category .select-selected.select-arrow-active::after { + -webkit-transform: translateY(-50%) rotate(180deg); + transform: translateY(-50%) rotate(180deg); +} +.gallery_filter-row .category .select-selected::after { + border: none; + -webkit-clip-path: polygon(0 0, 50% 100%, 100% 0); + clip-path: polygon(0 0, 50% 100%, 100% 0); + width: 12px; + height: 6px; + right: 0; + background: #2B72B6; + -webkit-transform: translateY(-50%) rotate(0); + transform: translateY(-50%) rotate(0); +} +.gallery_box { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin: 50px -1px; +} +.gallery_box-item { + width: calc(33.33% - 2px); + height: 370px; + margin: 1px; + position: relative; + cursor: pointer; +} +.gallery_box-item::after { + content: ""; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.8))); + background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%); + pointer-events: none; +} +.gallery_box-item-info { + position: absolute; + bottom: 0; + left: 0; + padding: 30px; + width: calc(100% - 60px); + color: #fff; + z-index: 1; + pointer-events: none; +} +.gallery_box-item-title { + font-weight: 700; + font-size: 16px; + line-height: 36px; +} +.gallery_box-item-txt { + font-weight: 400; + font-size: 14px; + line-height: 17px; +} +.gallery .gal_slider-item { + width: 100%; + height: 370px !important; +} +.gallery .gal_slider-item img { + width: 100%; + height: 100%; + object-fit: cover; + -o-object-fit: cover; +} +.gallery .pagination { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} +.gallery .pagination .pag_arrow { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + width: 50px; + height: 50px; + border: 1px solid #2B72B6; +} +.gallery .pagination .pag_arrow svg { + width: 30%; + height: 30%; + object-fit: contain; + -o-object-fit: contain; +} +.gallery .pagination .pag_txt { + margin: 0 15px; + font-weight: 400; + font-size: 16px; + line-height: 36px; +} +.gallery .pagination .pag_txt span { + color: #2B72B6; + font-weight: 700; +} + +.service.page { + padding: 50px 0 100px; + height: unset; +} +.service.page .service_info { + position: relative; + top: unset; + left: unset; + bottom: unset; + right: unset; + display: block; +} +.service.page .service_info p { + font-weight: 400; + font-size: 18px; + line-height: 30px; + margin-bottom: 30px; +} +.service.page .service_info p b { + font-weight: 600; +} +.service.page .service_info p strong { + font-weight: 600; + position: relative; + padding-left: 15px; +} +.service.page .service_info p strong::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 5px; + height: 100%; + background: #2B72B6; +} +.service.page .service_block { + overflow-x: auto; + -ms-overflow-style: none; + scrollbar-width: none; +} +.service.page .service_block::-webkit-scrollbar { + display: none; +} +.service.page .service_txt { + font-weight: 400; + font-size: 18px; + line-height: 30px; + margin-bottom: 30px; +} +.service.page .service_txt b { + font-weight: 600; +} +.service.page .service_box { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} +.service.page .service_box-item { + width: 440px; + margin-right: 30px; +} +.service.page .service_box-item-photo { + width: 100%; + height: 300px; +} +.service.page .service_box-item-photo img { + width: 100%; + height: 100%; + object-fit: cover; + -o-object-fit: cover; +} +.service.page .service_box-item-title { + font-weight: 700; + font-size: 27px; + line-height: 36px; + margin: 30px 0 20px; +} +.service.page .service_list { + margin-bottom: 30px; + position: relative; +} +.service.page .service_list li { + margin-bottom: 15px; + padding-left: 35px; + position: relative; +} +.service.page .service_list li::before { + content: ""; + position: absolute; + top: 5px; + left: 0px; + background: url("../images/svg/circle.svg") no-repeat center; + background-size: contain; + width: 20px; + height: 20px; +} +.service.page .service_list li::after { + content: ""; + position: absolute; + top: 27px; + left: 9px; + height: calc(100% + 10px); + width: 1px; + border-left: 2px dashed #C4DAF0; + border-right: none; + border-top: none; + border-bottom: none; + z-index: -1; +} +.service.page .service_list li:last-child::after { + display: none; +} +.service.page .service_list li p { + font-weight: 400; + font-size: 16px; + line-height: 30px; +} + +/* Slider */ +.slick-slider { + position: relative; + display: block; + -webkit-box-sizing: border-box; + box-sizing: border-box; + -webkit-touch-callout: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -ms-touch-action: pan-y; + 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 { + -webkit-transform: translate3d(0, 0, 0); + 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 */ +/* 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%; + -webkit-transform: translate(0, -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: #fff; + 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: ""; +} +.client_box .slick-prev { + position: absolute; + top: 50%; + transform: translateY(-50%); + -ms-transform: translateY(-50%); + -moz-transform: translateY(-50%); + -o-transform: translateY(-50%); + -webkit-transform: translateY(-50%); + left: -50px; + width: 40px; + height: 40px; + background: url("../images/svg/slider-arrow.svg") no-repeat center; + background-size: contain; + z-index: 4; +} +.client_box .slick-next { + position: absolute; + top: 50%; + transform: translateY(-50%) rotate(180deg); + -ms-transform: translateY(-50%) rotate(180deg); + -moz-transform: translateY(-50%) rotate(180deg); + -o-transform: translateY(-50%) rotate(180deg); + -webkit-transform: translateY(-50%) rotate(180deg); + right: -50px; + width: 40px; + height: 40px; + background: url("../images/svg/slider-arrow.svg") no-repeat center; + background-size: contain; + z-index: 4; +} +.client_box .slick-dots { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + bottom: -50px; +} +.client_box .slick-dots li { + display: block; +} +.client_box .slick-dots li button { + display: block; + width: 14px; + height: 14px; + border: 2px solid #D6D6D6; + opacity: 1; + background: transparent; + border-radius: 50%; +} +.client_box .slick-dots li.slick-active { + width: 14px; + height: 14px; +} +.client_box .slick-dots li.slick-active button { + border: 1px solid #2B72B6; + background-size: contain; + width: 14px; + height: 14px; + opacity: 1; + position: relative; + background: transparent; +} +.client_box .slick-dots li.slick-active button::after { + content: ""; + 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%); + width: 50%; + height: 50%; + background: #2B72B6; + border-radius: 50%; +} + +.hero_slider .slick-track { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} +.hero_slider .slick-prev { + transform: translateY(0) rotate(180deg); + -ms-transform: translateY(0) rotate(180deg); + -moz-transform: translateY(0) rotate(180deg); + -o-transform: translateY(0) rotate(180deg); + -webkit-transform: translateY(0) rotate(180deg); + width: 36px; + height: 24px; + background: url("../images/svg/hero-slider-arrow.svg") no-repeat center; + background-size: contain; + z-index: 4; +} +.hero_slider .slick-next { + transform: translateY(0%); + -ms-transform: translateY(0%); + -moz-transform: translateY(0%); + -o-transform: translateY(0%); + -webkit-transform: translateY(0%); + width: 36px; + height: 24px; + background: url("../images/svg/hero-slider-arrow.svg") no-repeat center; + background-size: contain; + z-index: 4; +} +.hero_slider .slick-dots { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; + padding: 0 60px; + max-width: 1500px; + bottom: unset; + position: relative; + top: -50px; + margin: 0 auto; + padding-right: 30px; + z-index: 10; +} +.hero_slider .slick-dots li { + display: block; +} +.hero_slider .slick-dots li button { + display: block; + width: 15px; + height: 15px; + border: 2.5px solid #fff; + opacity: 0.8; + border-radius: 50%; +} +.hero_slider .slick-dots li.slick-active { + width: 15px; + height: 15px; +} +.hero_slider .slick-dots li.slick-active button { + background: transparent; + background-size: contain; + width: 15px; + height: 15px; + border-radius: 50%; +} +.hero_slider .slick-dots li.slick-active button::after { + content: ""; + 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%); + width: 6px; + height: 6px; + background: #fff; + border-radius: 50%; +} + +.banner_box .slick-prev { + position: absolute; + top: 50%; + transform: translateY(-50%); + -ms-transform: translateY(-50%); + -moz-transform: translateY(-50%); + -o-transform: translateY(-50%); + -webkit-transform: translateY(-50%); + left: -200px; + width: 36px; + height: 24px; + background: url("../images/svg/arrow_left.svg") no-repeat center; + background-size: contain; + z-index: 4; +} +.banner_box .slick-next { + position: absolute; + top: 50%; + transform: translateY(-50%); + -ms-transform: translateY(-50%); + -moz-transform: translateY(-50%); + -o-transform: translateY(-50%); + -webkit-transform: translateY(-50%); + right: -200px; + width: 36px; + height: 24px; + background: url("../images/svg/arrow_right.svg") no-repeat center; + background-size: contain; + z-index: 4; +} + +.news .slick-track { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} +.news .slick-prev { + position: absolute; + top: 50%; + transform: translateY(-50%); + -ms-transform: translateY(-50%); + -moz-transform: translateY(-50%); + -o-transform: translateY(-50%); + -webkit-transform: translateY(-50%); + left: 200px; + width: 36px; + height: 24px; + background: url("../images/svg/arrow_left-gold.svg") no-repeat center; + background-size: contain; + z-index: 4; +} +.news .slick-next { + position: absolute; + top: 50%; + transform: translateY(-50%); + -ms-transform: translateY(-50%); + -moz-transform: translateY(-50%); + -o-transform: translateY(-50%); + -webkit-transform: translateY(-50%); + right: 200px; + width: 36px; + height: 24px; + background: url("../images/svg/arrow_right-gold.svg") no-repeat center; + background-size: contain; + z-index: 4; +} +.news .slick-dots { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + bottom: -50px; +} +.news .slick-dots li { + display: block; +} +.news .slick-dots li button { + display: block; + width: 12px; + height: 12px; + border: 2px solid #fff; + opacity: 0.3; + border-radius: 50%; +} +.news .slick-dots li.slick-active { + width: 30px; + height: 30px; +} +.news .slick-dots li.slick-active button { + background: url("../images/svg/dot.svg") no-repeat center !important; + background-size: contain; + width: 30px; + height: 30px; + border: none; +} + +.slick-next { + right: -25px; +} +[dir=rtl] .slick-next { + left: -25px; + right: auto; +} +.slick-next:before { + content: ""; +} +[dir=rtl] .slick-next:before { + content: "←"; +} + +/* Dots */ +.slick-dots { + position: absolute; + bottom: 32px; + list-style: none; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + text-align: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + padding: 0; + margin: 0; + width: 100%; +} +.slick-dots li { + position: relative; + cursor: pointer; + margin: 0 8px; +} +.slick-dots li button { + border: 0; + display: block; + height: 14px; + width: 14px; + outline: none; + color: transparent; + border-radius: 50%; + background: rgba(59, 59, 59, 0.5); + cursor: pointer; + -webkit-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; +} +.slick-dots li button:focus { + outline: none; + background: #6ec9c7; +} +.slick-dots li.slick-active button { + background: #6ec9c7; + width: 28px; + border-radius: 10px; +} + +@media (max-width: 1400px) { + .about_video-box { + height: 470px; + } + .gallery { + padding: 80px 0; + } + .gallery_box-item { + height: 300px; + } + .gallery .gal_slider-item { + height: 300px !important; + } + .service.page .service_box { + width: calc(100% + 60px); + } + .service.page .service_box .slick-list { + padding: 0 60px 0 0 !important; + } +} +@media (max-width: 1200px) { + .hero_item-title { + font-size: 30px; + } + .hero_item-txt { + margin: 20px 0; + } + .hero_item-link { + font-size: 14px; + } + .hero .page_box-link { + font-size: 16px; + } + .about_video-box { + height: 430px; + } + .about_video-box .video_play { + width: 65px; + height: 65px; + } + .about_video-box .video_play::before { + width: 13px; + height: 17px; + } + .service_item-title { + font-size: 14px; + } + .service_item-txt { + font-size: 13px; + } + .contact { + padding: 70px 0; + } + .contact_title { + font-size: 30px; + margin-bottom: 30px; + } + .client_title { + font-size: 30px; + margin-bottom: 30px; + } + .client_box .slick-next { + width: 30px; + height: 30px; + right: -35px; + } + .client_box .slick-prev { + width: 30px; + height: 30px; + left: -35px; + } + .footer .logo { + width: 160px; + height: 55px; + } +} +@media (max-width: 1100px) { + .auto_container { + padding: 0 35px; + } + .header .burger { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + cursor: pointer; + width: 30px; + height: 25px; + position: relative; + } + .header .burger.active span { + background: transparent; + } + .header .burger.active span::before { + -webkit-transform: rotate(45deg); + transform: rotate(45deg); + width: 25px; + height: 1.5px; + top: 0; + } + .header .burger.active span::after { + width: 25px; + height: 1.5px; + -webkit-transform: rotate(-45deg); + transform: rotate(-45deg); + bottom: 0; + } + .header .burger span { + position: relative; + display: block; + width: 20px; + height: 1.5px; + background: #fff; + -webkit-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; + } + .header .burger span::before { + content: ""; + position: absolute; + top: -7px; + right: 0; + width: 30px; + height: 1.5px; + background: #fff; + -webkit-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; + } + .header .burger span::after { + content: ""; + position: absolute; + bottom: -7px; + right: 0; + width: 10px; + height: 1.5px; + background: #fff; + -webkit-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; + } + .header .lang_drop { + background: transparent; + color: #fff; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + } + .header .lang_drop.active { + top: calc(100% + 7px); + } + .header .lang_drop-link { + color: #fff !important; + padding: 7px 15px; + position: relative; + font-size: 16px !important; + } + .header .lang_drop-link:first-child::before { + content: none; + } + .header .lang_drop-link:first-child::after { + content: ""; + position: absolute; + top: 0; + right: 0; + background: #fff; + height: 100%; + width: 1px; + } + .header .nav { + position: absolute; + top: 0; + right: 0; + width: 100%; + height: 100%; + } + .header .nav_bg { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.7); + -webkit-backdrop-filter: blur(8px); + backdrop-filter: blur(8px); + opacity: 0; + pointer-events: none; + -webkit-transform: scale(0); + transform: scale(0); + transition: all 0.3s linear; + -ms-transition: all 0.3s linear; + -moz-transition: all 0.3s linear; + -webkit-transition: all 0.3s linear; + } + .header .nav_bg.active { + opacity: 1; + pointer-events: unset; + -webkit-transform: scale(1); + transform: scale(1); + } + .header .nav ul { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + height: 100%; + -webkit-box-align: unset; + -ms-flex-align: unset; + align-items: unset; + width: calc(100% - 90px); + max-width: 450px; + margin: 0 auto; + } + .header .nav ul li { + margin-right: 0; + margin-bottom: 30px; + } + .header .nav ul li:last-child { + margin-bottom: 0; + margin-top: 30px; + } + .header .nav ul li a { + font-size: 18px; + padding-left: 20px; + position: relative; + } + .header .nav ul li a::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 1px; + height: 100%; + background: #fff; + } + .header .nav .service_nav { + text-align: left; + position: relative; + top: unset; + left: unset; + -webkit-transform: translate(0, 0); + transform: translate(0, 0); + opacity: 1; + pointer-events: unset; + background-color: unset; + min-width: none; + } + .header .nav .service_nav-link { + display: none; + } + .header .nav .service_nav.active { + top: unset; + } + .header .nav .service_nav a { + font-size: 18px; + padding: 0; + padding-left: 20px; + margin-bottom: 30px; + } + .header .nav .service_nav a:last-child { + margin-bottom: 0; + } + .header .nav_contact { + text-align: center; + } + .hero_item-title { + font-size: 22px; + } + .hero_item-txt { + font-size: 15px; + } + .hero_item-link { + font-size: unset; + } + .hero_item-link a { + font-size: 14px; + padding: 10px 25px; + } + .hero .swiper-pagination-bullet { + width: 10px; + height: 10px; + } + .hero .swiper-pagination-bullet-active::after { + width: 5px; + height: 5px; + } + .hero .swiper-button-prev span { + width: 13px; + height: 20px; + } + .hero .swiper-button-prev span svg { + width: 100%; + height: 100%; + object-fit: contain; + -o-object-fit: contain; + } + .hero .swiper-button-next span { + width: 13px; + height: 20px; + } + .hero .swiper-button-next span svg { + width: 100%; + height: 100%; + object-fit: contain; + -o-object-fit: contain; + } + .about_video-box { + height: 385px; + } + .about.page .about_box-item-title { + font-size: 18px; + } + .about.page .about_box-item-txt { + font-size: 14px; + } + .contact_box { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + } + .contact_form { + width: 100%; + margin-right: 0; + margin-bottom: 60px; + } + .contact_input input { + font-size: 14px; + } + .contact_input textarea { + font-size: 14px; + } + .contact_btn { + padding: 14px 30px; + } + .contact_info { + width: 100%; + margin-left: 0; + } +} +@media (max-width: 1000px) { + .gallery_box { + -ms-flex-wrap: wrap; + flex-wrap: wrap; + } + .gallery_box-item { + width: calc(50% - 2px); + } + .service.page .service_box { + width: calc(100% + 70px); + } + .service.page .service_box .slick-list { + padding: 0 170px 0 0 !important; + } + .about.page .about_box-item { + width: calc(50% - 82px); + } +} +@media (max-width: 750px) { + .header .logo_bg { + width: 55px; + height: 55px; + } + .header .logo_inner-text { + width: 30px; + height: 30px; + top: 50%; + font-size: unset; + display: block; + } + .header .logo_inner-text svg { + width: 100%; + height: 100%; + object-fit: contain; + -o-object-fit: contain; + } + .header .logo_group-txt { + width: 95px; + } + .crumb_title { + font-size: 24px; + } + .crumb_txt { + line-height: 30px; + font-size: 14px; + } + .hero_item { + height: 800px !important; + } + .hero_item-title { + font-size: 18px; + } + .hero_pag { + display: none; + } + .hero .page_box { + top: -50px; + } + .hero .page_box-group { + padding: 20px 50px 20px 0; + } + .hero .page_box-group::before { + width: 1500px; + left: -1499px; + } + .hero .page_box-link { + font-size: 14px; + } + .hero .page_box-link::after { + top: 5px; + width: 17px; + right: -24px; + } + .service { + height: calc(100vh - 95px); + } + .about { + padding-top: 0; + } + .about_video-box { + height: unset; + } + .about_video-box .video_play { + width: 54px; + height: 54px; + } + .about_video-box .video_play::before { + width: 13px; + height: 13px; + } + .contact { + padding: 50px 0; + } + .contact_title { + font-size: 26px; + margin-bottom: 25px; + } + .contact_input input { + padding: 10px 20px; + } + .contact_input textarea { + padding: 10px 20px; + } + .contact_btn { + padding: 12px 30px; + line-height: 30px; + } + .client_title { + font-size: 22px; + margin-bottom: 25px; + } + .client_box .slick-next, .client_box .slick-prev { + display: none !important; + } + .client_box .slick-dots li:nth-child(n+7) { + display: none; + } + .client_box .slick-dots li button { + width: 12px; + height: 12px; + } + .client_item { + height: 60px !important; + padding: 15px; + } + .footer_box { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + } + .footer .logo { + margin-bottom: 30px; + } + .footer .copyright { + font-size: 14px; + line-height: 30px; + text-align: center; + } + .gallery_box-item { + width: calc(50% - 2px); + height: 245px; + } + .gallery_box-item-title { + font-size: 13px; + line-height: 27px; + } + .gallery_box-item-txt { + font-size: 12px; + } + .gallery .gal_slider-item { + height: 245px !important; + } + .service.page .service_box-item { + min-width: 390px; + } + .service.page .service_box-item-photo { + height: 280px; + } + .main_title { + font-size: 20px; + } +} +@media (max-width: 650px) { + .auto_container { + padding: 0 20px; + } + .gallery { + padding: 60px 0; + } + .gallery_filter-row { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; + } + .gallery_filter-row .category { + margin-bottom: 30px; + } + .gallery_filter-row .category:last-child { + margin-bottom: 0; + } + .gallery_box { + margin-top: 30px; + } + .gallery_box-item { + width: calc(100% - 2px); + } + .service.page .service_box { + width: 100%; + } + .service.page .service_box .slick-list { + padding: 0 !important; + } + .service.page .service_box-item { + min-width: 280px; + margin-right: 15px; + } + .service.page .service_box-item-photo { + height: 240px; + } + .service.page .service_box-item-title { + font-size: 20px; + line-height: 27px; + } + .service.page .service_list li p { + line-height: 28px; + } + .about.page .about_box-item { + width: calc(100% - 42px); + margin: 20px 0; + } + .modal_inner { + height: unset; + } +} +@media (max-width: 400px) { + .auto_container { + padding: 0 20px; + } + .crumb_txt { + line-height: 30px; + font-size: 14px; + } + .hero_item { + height: 700px !important; + } + .service.page .service_box { + width: calc(100% + 0px); + } + .service.page .service_box-item { + min-width: unset !important; + margin-right: 5px; + } + .service.page .service_box .slick-list { + padding: 0 !important; + } +} \ No newline at end of file diff --git a/themes/tps/assets/new/css/main.scss b/themes/tps/assets/new/css/main.scss new file mode 100644 index 0000000..14ae9c4 --- /dev/null +++ b/themes/tps/assets/new/css/main.scss @@ -0,0 +1,24 @@ + + +// 1-main components +@import "./components/1-main/nulifier.scss"; +@import "./components/1-main/variables.scss"; +@import "./components/1-main/mixin.scss"; + +// 2-layout components +@import "./components/2-layout/header.scss"; +@import "./components/2-layout/slider.scss"; +@import "./components/2-layout/crumb.scss"; +@import "./components/2-layout/select.scss"; +@import "./components/2-layout/modal.scss"; +@import "./components/2-layout/footer.scss"; + +// 3-page components +@import "./components/3-page/home.scss"; +@import "./components/3-page/about.scss"; +@import "./components/3-page/portfolio.scss"; +@import "./components/3-page/service.scss"; + +@import "./components/2-layout/slick.scss"; +@import "./components/2-layout/slick-theme.scss"; +@import "./components/2-layout/responsive.scss"; diff --git a/themes/tps/assets/new/css/swiper.min.css b/themes/tps/assets/new/css/swiper.min.css new file mode 100644 index 0000000..31f3b93 --- /dev/null +++ b/themes/tps/assets/new/css/swiper.min.css @@ -0,0 +1,13 @@ +/** + * Swiper 7.4.1 + * Most modern mobile touch slider and framework with hardware accelerated transitions + * https://swiperjs.com + * + * Copyright 2014-2021 Vladimir Kharlampidi + * + * Released under the MIT License + * + * Released on: December 24, 2021 + */ + + @font-face{font-family:swiper-icons;src:url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA');font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;box-sizing:content-box}.swiper-android .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-pointer-events{touch-action:pan-y}.swiper-pointer-events.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-3d,.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-cube-shadow,.swiper-3d .swiper-slide,.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:rgba(0,0,0,.15)}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-horizontal.swiper-css-mode>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-vertical.swiper-css-mode>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-centered>.swiper-wrapper::before{content:'';flex-shrink:0;order:9999}.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center} \ No newline at end of file diff --git a/themes/tps/assets/new/fonts/Montserrat/Montserrat-Black.eot b/themes/tps/assets/new/fonts/Montserrat/Montserrat-Black.eot new file mode 100644 index 0000000..0c8948e Binary files /dev/null and b/themes/tps/assets/new/fonts/Montserrat/Montserrat-Black.eot differ diff --git a/themes/tps/assets/new/fonts/Montserrat/Montserrat-Black.ttf b/themes/tps/assets/new/fonts/Montserrat/Montserrat-Black.ttf new file mode 100644 index 0000000..7716134 Binary files /dev/null and b/themes/tps/assets/new/fonts/Montserrat/Montserrat-Black.ttf differ diff --git a/themes/tps/assets/new/fonts/Montserrat/Montserrat-Black.woff b/themes/tps/assets/new/fonts/Montserrat/Montserrat-Black.woff new file mode 100644 index 0000000..b20d6ae Binary files /dev/null and b/themes/tps/assets/new/fonts/Montserrat/Montserrat-Black.woff differ diff --git a/themes/tps/assets/new/fonts/Montserrat/Montserrat-Black.woff2 b/themes/tps/assets/new/fonts/Montserrat/Montserrat-Black.woff2 new file mode 100644 index 0000000..53167d0 Binary files /dev/null and b/themes/tps/assets/new/fonts/Montserrat/Montserrat-Black.woff2 differ diff --git a/themes/tps/assets/new/fonts/Montserrat/Montserrat-BlackItalic.eot b/themes/tps/assets/new/fonts/Montserrat/Montserrat-BlackItalic.eot new file mode 100644 index 0000000..21926c1 Binary files /dev/null and b/themes/tps/assets/new/fonts/Montserrat/Montserrat-BlackItalic.eot differ diff --git a/themes/tps/assets/new/fonts/Montserrat/Montserrat-BlackItalic.ttf b/themes/tps/assets/new/fonts/Montserrat/Montserrat-BlackItalic.ttf new file mode 100644 index 0000000..9daef9a Binary files /dev/null and b/themes/tps/assets/new/fonts/Montserrat/Montserrat-BlackItalic.ttf differ diff --git a/themes/tps/assets/new/fonts/Montserrat/Montserrat-BlackItalic.woff b/themes/tps/assets/new/fonts/Montserrat/Montserrat-BlackItalic.woff new file mode 100644 index 0000000..f372fc6 Binary files /dev/null and b/themes/tps/assets/new/fonts/Montserrat/Montserrat-BlackItalic.woff differ diff --git a/themes/tps/assets/new/fonts/Montserrat/Montserrat-BlackItalic.woff2 b/themes/tps/assets/new/fonts/Montserrat/Montserrat-BlackItalic.woff2 new file mode 100644 index 0000000..600f3d7 Binary files /dev/null and b/themes/tps/assets/new/fonts/Montserrat/Montserrat-BlackItalic.woff2 differ diff --git a/themes/tps/assets/new/fonts/Montserrat/Montserrat-Bold.eot b/themes/tps/assets/new/fonts/Montserrat/Montserrat-Bold.eot new file mode 100644 index 0000000..4f1efdb Binary files /dev/null and b/themes/tps/assets/new/fonts/Montserrat/Montserrat-Bold.eot differ diff --git a/themes/tps/assets/new/fonts/Montserrat/Montserrat-Bold.ttf b/themes/tps/assets/new/fonts/Montserrat/Montserrat-Bold.ttf new file mode 100644 index 0000000..0992ac9 Binary files /dev/null and b/themes/tps/assets/new/fonts/Montserrat/Montserrat-Bold.ttf differ diff --git a/themes/tps/assets/new/fonts/Montserrat/Montserrat-Bold.woff b/themes/tps/assets/new/fonts/Montserrat/Montserrat-Bold.woff new file mode 100644 index 0000000..4a11270 Binary files /dev/null and b/themes/tps/assets/new/fonts/Montserrat/Montserrat-Bold.woff differ diff --git a/themes/tps/assets/new/fonts/Montserrat/Montserrat-Bold.woff2 b/themes/tps/assets/new/fonts/Montserrat/Montserrat-Bold.woff2 new file mode 100644 index 0000000..28948d3 Binary files /dev/null and b/themes/tps/assets/new/fonts/Montserrat/Montserrat-Bold.woff2 differ diff --git a/themes/tps/assets/new/fonts/Montserrat/Montserrat-BoldItalic.eot b/themes/tps/assets/new/fonts/Montserrat/Montserrat-BoldItalic.eot new file mode 100644 index 0000000..7823bea Binary files /dev/null and b/themes/tps/assets/new/fonts/Montserrat/Montserrat-BoldItalic.eot differ diff --git a/themes/tps/assets/new/fonts/Montserrat/Montserrat-BoldItalic.ttf b/themes/tps/assets/new/fonts/Montserrat/Montserrat-BoldItalic.ttf new file mode 100644 index 0000000..a6c15d3 Binary files /dev/null and b/themes/tps/assets/new/fonts/Montserrat/Montserrat-BoldItalic.ttf differ diff --git a/themes/tps/assets/new/fonts/Montserrat/Montserrat-BoldItalic.woff b/themes/tps/assets/new/fonts/Montserrat/Montserrat-BoldItalic.woff new file mode 100644 index 0000000..6a61b92 Binary files /dev/null and b/themes/tps/assets/new/fonts/Montserrat/Montserrat-BoldItalic.woff differ diff --git a/themes/tps/assets/new/fonts/Montserrat/Montserrat-BoldItalic.woff2 b/themes/tps/assets/new/fonts/Montserrat/Montserrat-BoldItalic.woff2 new file mode 100644 index 0000000..5f3ccdc Binary files /dev/null and b/themes/tps/assets/new/fonts/Montserrat/Montserrat-BoldItalic.woff2 differ diff --git a/themes/tps/assets/new/fonts/Montserrat/Montserrat-ExtraBold.eot b/themes/tps/assets/new/fonts/Montserrat/Montserrat-ExtraBold.eot new file mode 100644 index 0000000..c7a88dc Binary files /dev/null and b/themes/tps/assets/new/fonts/Montserrat/Montserrat-ExtraBold.eot differ diff --git a/themes/tps/assets/new/fonts/Montserrat/Montserrat-ExtraBold.ttf b/themes/tps/assets/new/fonts/Montserrat/Montserrat-ExtraBold.ttf new file mode 100644 index 0000000..328f7b0 Binary files /dev/null and b/themes/tps/assets/new/fonts/Montserrat/Montserrat-ExtraBold.ttf differ diff --git a/themes/tps/assets/new/fonts/Montserrat/Montserrat-ExtraBold.woff b/themes/tps/assets/new/fonts/Montserrat/Montserrat-ExtraBold.woff new file mode 100644 index 0000000..d0f9e40 Binary files /dev/null and b/themes/tps/assets/new/fonts/Montserrat/Montserrat-ExtraBold.woff differ diff --git a/themes/tps/assets/new/fonts/Montserrat/Montserrat-ExtraBold.woff2 b/themes/tps/assets/new/fonts/Montserrat/Montserrat-ExtraBold.woff2 new file mode 100644 index 0000000..5d361ce Binary files /dev/null and b/themes/tps/assets/new/fonts/Montserrat/Montserrat-ExtraBold.woff2 differ diff --git a/themes/tps/assets/new/fonts/Montserrat/Montserrat-ExtraBoldItalic.eot b/themes/tps/assets/new/fonts/Montserrat/Montserrat-ExtraBoldItalic.eot new file mode 100644 index 0000000..3d7a80f Binary files /dev/null and b/themes/tps/assets/new/fonts/Montserrat/Montserrat-ExtraBoldItalic.eot differ diff --git a/themes/tps/assets/new/fonts/Montserrat/Montserrat-ExtraBoldItalic.ttf b/themes/tps/assets/new/fonts/Montserrat/Montserrat-ExtraBoldItalic.ttf new file mode 100644 index 0000000..aa2047b Binary files /dev/null and b/themes/tps/assets/new/fonts/Montserrat/Montserrat-ExtraBoldItalic.ttf differ diff --git a/themes/tps/assets/new/fonts/Montserrat/Montserrat-ExtraBoldItalic.woff b/themes/tps/assets/new/fonts/Montserrat/Montserrat-ExtraBoldItalic.woff new file mode 100644 index 0000000..00bbb58 Binary files /dev/null and b/themes/tps/assets/new/fonts/Montserrat/Montserrat-ExtraBoldItalic.woff differ diff --git a/themes/tps/assets/new/fonts/Montserrat/Montserrat-ExtraBoldItalic.woff2 b/themes/tps/assets/new/fonts/Montserrat/Montserrat-ExtraBoldItalic.woff2 new file mode 100644 index 0000000..2082dea Binary files /dev/null and b/themes/tps/assets/new/fonts/Montserrat/Montserrat-ExtraBoldItalic.woff2 differ diff --git a/themes/tps/assets/new/fonts/Montserrat/Montserrat-ExtraLight.eot b/themes/tps/assets/new/fonts/Montserrat/Montserrat-ExtraLight.eot new file mode 100644 index 0000000..5a11131 Binary files /dev/null and b/themes/tps/assets/new/fonts/Montserrat/Montserrat-ExtraLight.eot differ diff --git a/themes/tps/assets/new/fonts/Montserrat/Montserrat-ExtraLight.ttf b/themes/tps/assets/new/fonts/Montserrat/Montserrat-ExtraLight.ttf new file mode 100644 index 0000000..c9e298e Binary files /dev/null and b/themes/tps/assets/new/fonts/Montserrat/Montserrat-ExtraLight.ttf differ diff --git a/themes/tps/assets/new/fonts/Montserrat/Montserrat-ExtraLight.woff b/themes/tps/assets/new/fonts/Montserrat/Montserrat-ExtraLight.woff new file mode 100644 index 0000000..96fca21 Binary files /dev/null and b/themes/tps/assets/new/fonts/Montserrat/Montserrat-ExtraLight.woff differ diff --git a/themes/tps/assets/new/fonts/Montserrat/Montserrat-ExtraLight.woff2 b/themes/tps/assets/new/fonts/Montserrat/Montserrat-ExtraLight.woff2 new file mode 100644 index 0000000..f01d3aa Binary files /dev/null and b/themes/tps/assets/new/fonts/Montserrat/Montserrat-ExtraLight.woff2 differ diff --git a/themes/tps/assets/new/fonts/Montserrat/Montserrat-ExtraLightItalic.eot b/themes/tps/assets/new/fonts/Montserrat/Montserrat-ExtraLightItalic.eot new file mode 100644 index 0000000..4abe341 Binary files /dev/null and b/themes/tps/assets/new/fonts/Montserrat/Montserrat-ExtraLightItalic.eot differ diff --git a/themes/tps/assets/new/fonts/Montserrat/Montserrat-ExtraLightItalic.ttf b/themes/tps/assets/new/fonts/Montserrat/Montserrat-ExtraLightItalic.ttf new file mode 100644 index 0000000..dc1ed8a Binary files /dev/null and b/themes/tps/assets/new/fonts/Montserrat/Montserrat-ExtraLightItalic.ttf differ diff --git a/themes/tps/assets/new/fonts/Montserrat/Montserrat-ExtraLightItalic.woff b/themes/tps/assets/new/fonts/Montserrat/Montserrat-ExtraLightItalic.woff new file mode 100644 index 0000000..5659d7c Binary files /dev/null and b/themes/tps/assets/new/fonts/Montserrat/Montserrat-ExtraLightItalic.woff differ diff --git a/themes/tps/assets/new/fonts/Montserrat/Montserrat-ExtraLightItalic.woff2 b/themes/tps/assets/new/fonts/Montserrat/Montserrat-ExtraLightItalic.woff2 new file mode 100644 index 0000000..4a5ce86 Binary files /dev/null and b/themes/tps/assets/new/fonts/Montserrat/Montserrat-ExtraLightItalic.woff2 differ diff --git a/themes/tps/assets/new/fonts/Montserrat/Montserrat-Italic.eot b/themes/tps/assets/new/fonts/Montserrat/Montserrat-Italic.eot new file mode 100644 index 0000000..445221e Binary files /dev/null and b/themes/tps/assets/new/fonts/Montserrat/Montserrat-Italic.eot differ diff --git a/themes/tps/assets/new/fonts/Montserrat/Montserrat-Italic.ttf b/themes/tps/assets/new/fonts/Montserrat/Montserrat-Italic.ttf new file mode 100644 index 0000000..bfd4ffa Binary files /dev/null and b/themes/tps/assets/new/fonts/Montserrat/Montserrat-Italic.ttf differ diff --git a/themes/tps/assets/new/fonts/Montserrat/Montserrat-Italic.woff b/themes/tps/assets/new/fonts/Montserrat/Montserrat-Italic.woff new file mode 100644 index 0000000..6fd9704 Binary files /dev/null and b/themes/tps/assets/new/fonts/Montserrat/Montserrat-Italic.woff differ diff --git a/themes/tps/assets/new/fonts/Montserrat/Montserrat-Italic.woff2 b/themes/tps/assets/new/fonts/Montserrat/Montserrat-Italic.woff2 new file mode 100644 index 0000000..851ee2a Binary files /dev/null and b/themes/tps/assets/new/fonts/Montserrat/Montserrat-Italic.woff2 differ diff --git a/themes/tps/assets/new/fonts/Montserrat/Montserrat-Light.eot b/themes/tps/assets/new/fonts/Montserrat/Montserrat-Light.eot new file mode 100644 index 0000000..c22e545 Binary files /dev/null and b/themes/tps/assets/new/fonts/Montserrat/Montserrat-Light.eot differ diff --git a/themes/tps/assets/new/fonts/Montserrat/Montserrat-Light.ttf b/themes/tps/assets/new/fonts/Montserrat/Montserrat-Light.ttf new file mode 100644 index 0000000..d8979fd Binary files /dev/null and b/themes/tps/assets/new/fonts/Montserrat/Montserrat-Light.ttf differ diff --git a/themes/tps/assets/new/fonts/Montserrat/Montserrat-Light.woff b/themes/tps/assets/new/fonts/Montserrat/Montserrat-Light.woff new file mode 100644 index 0000000..64949de Binary files /dev/null and b/themes/tps/assets/new/fonts/Montserrat/Montserrat-Light.woff differ diff --git a/themes/tps/assets/new/fonts/Montserrat/Montserrat-Light.woff2 b/themes/tps/assets/new/fonts/Montserrat/Montserrat-Light.woff2 new file mode 100644 index 0000000..f061772 Binary files /dev/null and b/themes/tps/assets/new/fonts/Montserrat/Montserrat-Light.woff2 differ diff --git a/themes/tps/assets/new/fonts/Montserrat/Montserrat-LightItalic.eot b/themes/tps/assets/new/fonts/Montserrat/Montserrat-LightItalic.eot new file mode 100644 index 0000000..82cc007 Binary files /dev/null and b/themes/tps/assets/new/fonts/Montserrat/Montserrat-LightItalic.eot differ diff --git a/themes/tps/assets/new/fonts/Montserrat/Montserrat-LightItalic.ttf b/themes/tps/assets/new/fonts/Montserrat/Montserrat-LightItalic.ttf new file mode 100644 index 0000000..a88b53a Binary files /dev/null and b/themes/tps/assets/new/fonts/Montserrat/Montserrat-LightItalic.ttf differ diff --git a/themes/tps/assets/new/fonts/Montserrat/Montserrat-LightItalic.woff b/themes/tps/assets/new/fonts/Montserrat/Montserrat-LightItalic.woff new file mode 100644 index 0000000..da0b763 Binary files /dev/null and b/themes/tps/assets/new/fonts/Montserrat/Montserrat-LightItalic.woff differ diff --git a/themes/tps/assets/new/fonts/Montserrat/Montserrat-LightItalic.woff2 b/themes/tps/assets/new/fonts/Montserrat/Montserrat-LightItalic.woff2 new file mode 100644 index 0000000..45411de Binary files /dev/null and b/themes/tps/assets/new/fonts/Montserrat/Montserrat-LightItalic.woff2 differ diff --git a/themes/tps/assets/new/fonts/Montserrat/Montserrat-Medium.eot b/themes/tps/assets/new/fonts/Montserrat/Montserrat-Medium.eot new file mode 100644 index 0000000..1ef6ceb Binary files /dev/null and b/themes/tps/assets/new/fonts/Montserrat/Montserrat-Medium.eot differ diff --git a/themes/tps/assets/new/fonts/Montserrat/Montserrat-Medium.ttf b/themes/tps/assets/new/fonts/Montserrat/Montserrat-Medium.ttf new file mode 100644 index 0000000..bde34c3 Binary files /dev/null and b/themes/tps/assets/new/fonts/Montserrat/Montserrat-Medium.ttf differ diff --git a/themes/tps/assets/new/fonts/Montserrat/Montserrat-Medium.woff b/themes/tps/assets/new/fonts/Montserrat/Montserrat-Medium.woff new file mode 100644 index 0000000..7df48cb Binary files /dev/null and b/themes/tps/assets/new/fonts/Montserrat/Montserrat-Medium.woff differ diff --git a/themes/tps/assets/new/fonts/Montserrat/Montserrat-Medium.woff2 b/themes/tps/assets/new/fonts/Montserrat/Montserrat-Medium.woff2 new file mode 100644 index 0000000..5e1afee Binary files /dev/null and b/themes/tps/assets/new/fonts/Montserrat/Montserrat-Medium.woff2 differ diff --git a/themes/tps/assets/new/fonts/Montserrat/Montserrat-MediumItalic.eot b/themes/tps/assets/new/fonts/Montserrat/Montserrat-MediumItalic.eot new file mode 100644 index 0000000..d8b3f62 Binary files /dev/null and b/themes/tps/assets/new/fonts/Montserrat/Montserrat-MediumItalic.eot differ diff --git a/themes/tps/assets/new/fonts/Montserrat/Montserrat-MediumItalic.ttf b/themes/tps/assets/new/fonts/Montserrat/Montserrat-MediumItalic.ttf new file mode 100644 index 0000000..830c1ba Binary files /dev/null and b/themes/tps/assets/new/fonts/Montserrat/Montserrat-MediumItalic.ttf differ diff --git a/themes/tps/assets/new/fonts/Montserrat/Montserrat-MediumItalic.woff b/themes/tps/assets/new/fonts/Montserrat/Montserrat-MediumItalic.woff new file mode 100644 index 0000000..0d2f46e Binary files /dev/null and b/themes/tps/assets/new/fonts/Montserrat/Montserrat-MediumItalic.woff differ diff --git a/themes/tps/assets/new/fonts/Montserrat/Montserrat-MediumItalic.woff2 b/themes/tps/assets/new/fonts/Montserrat/Montserrat-MediumItalic.woff2 new file mode 100644 index 0000000..5903ac8 Binary files /dev/null and b/themes/tps/assets/new/fonts/Montserrat/Montserrat-MediumItalic.woff2 differ diff --git a/themes/tps/assets/new/fonts/Montserrat/Montserrat-Regular.eot b/themes/tps/assets/new/fonts/Montserrat/Montserrat-Regular.eot new file mode 100644 index 0000000..28d59cf Binary files /dev/null and b/themes/tps/assets/new/fonts/Montserrat/Montserrat-Regular.eot differ diff --git a/themes/tps/assets/new/fonts/Montserrat/Montserrat-Regular.ttf b/themes/tps/assets/new/fonts/Montserrat/Montserrat-Regular.ttf new file mode 100644 index 0000000..751ba5d Binary files /dev/null and b/themes/tps/assets/new/fonts/Montserrat/Montserrat-Regular.ttf differ diff --git a/themes/tps/assets/new/fonts/Montserrat/Montserrat-Regular.woff b/themes/tps/assets/new/fonts/Montserrat/Montserrat-Regular.woff new file mode 100644 index 0000000..deda596 Binary files /dev/null and b/themes/tps/assets/new/fonts/Montserrat/Montserrat-Regular.woff differ diff --git a/themes/tps/assets/new/fonts/Montserrat/Montserrat-Regular.woff2 b/themes/tps/assets/new/fonts/Montserrat/Montserrat-Regular.woff2 new file mode 100644 index 0000000..3e9caa8 Binary files /dev/null and b/themes/tps/assets/new/fonts/Montserrat/Montserrat-Regular.woff2 differ diff --git a/themes/tps/assets/new/fonts/Montserrat/Montserrat-SemiBold.eot b/themes/tps/assets/new/fonts/Montserrat/Montserrat-SemiBold.eot new file mode 100644 index 0000000..adbf970 Binary files /dev/null and b/themes/tps/assets/new/fonts/Montserrat/Montserrat-SemiBold.eot differ diff --git a/themes/tps/assets/new/fonts/Montserrat/Montserrat-SemiBold.ttf b/themes/tps/assets/new/fonts/Montserrat/Montserrat-SemiBold.ttf new file mode 100644 index 0000000..601e352 Binary files /dev/null and b/themes/tps/assets/new/fonts/Montserrat/Montserrat-SemiBold.ttf differ diff --git a/themes/tps/assets/new/fonts/Montserrat/Montserrat-SemiBold.woff b/themes/tps/assets/new/fonts/Montserrat/Montserrat-SemiBold.woff new file mode 100644 index 0000000..e16c05c Binary files /dev/null and b/themes/tps/assets/new/fonts/Montserrat/Montserrat-SemiBold.woff differ diff --git a/themes/tps/assets/new/fonts/Montserrat/Montserrat-SemiBold.woff2 b/themes/tps/assets/new/fonts/Montserrat/Montserrat-SemiBold.woff2 new file mode 100644 index 0000000..655b171 Binary files /dev/null and b/themes/tps/assets/new/fonts/Montserrat/Montserrat-SemiBold.woff2 differ diff --git a/themes/tps/assets/new/fonts/Montserrat/Montserrat-SemiBoldItalic.eot b/themes/tps/assets/new/fonts/Montserrat/Montserrat-SemiBoldItalic.eot new file mode 100644 index 0000000..d6323fa Binary files /dev/null and b/themes/tps/assets/new/fonts/Montserrat/Montserrat-SemiBoldItalic.eot differ diff --git a/themes/tps/assets/new/fonts/Montserrat/Montserrat-SemiBoldItalic.ttf b/themes/tps/assets/new/fonts/Montserrat/Montserrat-SemiBoldItalic.ttf new file mode 100644 index 0000000..53e2f5a Binary files /dev/null and b/themes/tps/assets/new/fonts/Montserrat/Montserrat-SemiBoldItalic.ttf differ diff --git a/themes/tps/assets/new/fonts/Montserrat/Montserrat-SemiBoldItalic.woff b/themes/tps/assets/new/fonts/Montserrat/Montserrat-SemiBoldItalic.woff new file mode 100644 index 0000000..5bb0bd2 Binary files /dev/null and b/themes/tps/assets/new/fonts/Montserrat/Montserrat-SemiBoldItalic.woff differ diff --git a/themes/tps/assets/new/fonts/Montserrat/Montserrat-SemiBoldItalic.woff2 b/themes/tps/assets/new/fonts/Montserrat/Montserrat-SemiBoldItalic.woff2 new file mode 100644 index 0000000..879d16a Binary files /dev/null and b/themes/tps/assets/new/fonts/Montserrat/Montserrat-SemiBoldItalic.woff2 differ diff --git a/themes/tps/assets/new/fonts/Montserrat/Montserrat-Thin.eot b/themes/tps/assets/new/fonts/Montserrat/Montserrat-Thin.eot new file mode 100644 index 0000000..eea4920 Binary files /dev/null and b/themes/tps/assets/new/fonts/Montserrat/Montserrat-Thin.eot differ diff --git a/themes/tps/assets/new/fonts/Montserrat/Montserrat-Thin.ttf b/themes/tps/assets/new/fonts/Montserrat/Montserrat-Thin.ttf new file mode 100644 index 0000000..59f97c5 Binary files /dev/null and b/themes/tps/assets/new/fonts/Montserrat/Montserrat-Thin.ttf differ diff --git a/themes/tps/assets/new/fonts/Montserrat/Montserrat-Thin.woff b/themes/tps/assets/new/fonts/Montserrat/Montserrat-Thin.woff new file mode 100644 index 0000000..68fc7d5 Binary files /dev/null and b/themes/tps/assets/new/fonts/Montserrat/Montserrat-Thin.woff differ diff --git a/themes/tps/assets/new/fonts/Montserrat/Montserrat-Thin.woff2 b/themes/tps/assets/new/fonts/Montserrat/Montserrat-Thin.woff2 new file mode 100644 index 0000000..18c0982 Binary files /dev/null and b/themes/tps/assets/new/fonts/Montserrat/Montserrat-Thin.woff2 differ diff --git a/themes/tps/assets/new/fonts/Montserrat/Montserrat-ThinItalic.eot b/themes/tps/assets/new/fonts/Montserrat/Montserrat-ThinItalic.eot new file mode 100644 index 0000000..69b1915 Binary files /dev/null and b/themes/tps/assets/new/fonts/Montserrat/Montserrat-ThinItalic.eot differ diff --git a/themes/tps/assets/new/fonts/Montserrat/Montserrat-ThinItalic.ttf b/themes/tps/assets/new/fonts/Montserrat/Montserrat-ThinItalic.ttf new file mode 100644 index 0000000..aacd51a Binary files /dev/null and b/themes/tps/assets/new/fonts/Montserrat/Montserrat-ThinItalic.ttf differ diff --git a/themes/tps/assets/new/fonts/Montserrat/Montserrat-ThinItalic.woff b/themes/tps/assets/new/fonts/Montserrat/Montserrat-ThinItalic.woff new file mode 100644 index 0000000..fc892f8 Binary files /dev/null and b/themes/tps/assets/new/fonts/Montserrat/Montserrat-ThinItalic.woff differ diff --git a/themes/tps/assets/new/fonts/Montserrat/Montserrat-ThinItalic.woff2 b/themes/tps/assets/new/fonts/Montserrat/Montserrat-ThinItalic.woff2 new file mode 100644 index 0000000..1c2152f Binary files /dev/null and b/themes/tps/assets/new/fonts/Montserrat/Montserrat-ThinItalic.woff2 differ diff --git a/themes/tps/assets/new/fonts/Montserrat/demo.html b/themes/tps/assets/new/fonts/Montserrat/demo.html new file mode 100644 index 0000000..7785403 --- /dev/null +++ b/themes/tps/assets/new/fonts/Montserrat/demo.html @@ -0,0 +1,685 @@ + + + + + + + + +.your-style {
+ font-family: 'Montserrat';
+ font-weight: bold;
+ font-style: normal;
+}
+ +<link rel="preload" href="Montserrat-Bold.woff2" as="font" type="font/woff2" crossorigin>+
+ abcdefghijklmnopqrstuvwxyz
+ABCDEFGHIJKLMNOPQRSTUVWXYZ
+ 0123456789.:,;()*!?'@#<>$%&^+-=~
+
The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+.your-style {
+ font-family: 'Montserrat';
+ font-weight: 900;
+ font-style: italic;
+}
+ +<link rel="preload" href="Montserrat-BlackItalic.woff2" as="font" type="font/woff2" crossorigin>+
+ abcdefghijklmnopqrstuvwxyz
+ABCDEFGHIJKLMNOPQRSTUVWXYZ
+ 0123456789.:,;()*!?'@#<>$%&^+-=~
+
The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+.your-style {
+ font-family: 'Montserrat';
+ font-weight: 900;
+ font-style: normal;
+}
+ +<link rel="preload" href="Montserrat-Black.woff2" as="font" type="font/woff2" crossorigin>+
+ abcdefghijklmnopqrstuvwxyz
+ABCDEFGHIJKLMNOPQRSTUVWXYZ
+ 0123456789.:,;()*!?'@#<>$%&^+-=~
+
The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+.your-style {
+ font-family: 'Montserrat';
+ font-weight: bold;
+ font-style: italic;
+}
+ +<link rel="preload" href="Montserrat-BoldItalic.woff2" as="font" type="font/woff2" crossorigin>+
+ abcdefghijklmnopqrstuvwxyz
+ABCDEFGHIJKLMNOPQRSTUVWXYZ
+ 0123456789.:,;()*!?'@#<>$%&^+-=~
+
The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+.your-style {
+ font-family: 'Montserrat';
+ font-weight: bold;
+ font-style: normal;
+}
+ +<link rel="preload" href="Montserrat-ExtraBold.woff2" as="font" type="font/woff2" crossorigin>+
+ abcdefghijklmnopqrstuvwxyz
+ABCDEFGHIJKLMNOPQRSTUVWXYZ
+ 0123456789.:,;()*!?'@#<>$%&^+-=~
+
The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+.your-style {
+ font-family: 'Montserrat';
+ font-weight: bold;
+ font-style: italic;
+}
+ +<link rel="preload" href="Montserrat-ExtraBoldItalic.woff2" as="font" type="font/woff2" crossorigin>+
+ abcdefghijklmnopqrstuvwxyz
+ABCDEFGHIJKLMNOPQRSTUVWXYZ
+ 0123456789.:,;()*!?'@#<>$%&^+-=~
+
The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+.your-style {
+ font-family: 'Montserrat';
+ font-weight: normal;
+ font-style: italic;
+}
+ +<link rel="preload" href="Montserrat-Italic.woff2" as="font" type="font/woff2" crossorigin>+
+ abcdefghijklmnopqrstuvwxyz
+ABCDEFGHIJKLMNOPQRSTUVWXYZ
+ 0123456789.:,;()*!?'@#<>$%&^+-=~
+
The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+.your-style {
+ font-family: 'Montserrat';
+ font-weight: 200;
+ font-style: normal;
+}
+ +<link rel="preload" href="Montserrat-ExtraLight.woff2" as="font" type="font/woff2" crossorigin>+
+ abcdefghijklmnopqrstuvwxyz
+ABCDEFGHIJKLMNOPQRSTUVWXYZ
+ 0123456789.:,;()*!?'@#<>$%&^+-=~
+
The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+.your-style {
+ font-family: 'Montserrat';
+ font-weight: 200;
+ font-style: italic;
+}
+ +<link rel="preload" href="Montserrat-ExtraLightItalic.woff2" as="font" type="font/woff2" crossorigin>+
+ abcdefghijklmnopqrstuvwxyz
+ABCDEFGHIJKLMNOPQRSTUVWXYZ
+ 0123456789.:,;()*!?'@#<>$%&^+-=~
+
The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+.your-style {
+ font-family: 'Montserrat';
+ font-weight: 300;
+ font-style: normal;
+}
+ +<link rel="preload" href="Montserrat-Light.woff2" as="font" type="font/woff2" crossorigin>+
+ abcdefghijklmnopqrstuvwxyz
+ABCDEFGHIJKLMNOPQRSTUVWXYZ
+ 0123456789.:,;()*!?'@#<>$%&^+-=~
+
The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+.your-style {
+ font-family: 'Montserrat';
+ font-weight: 300;
+ font-style: italic;
+}
+ +<link rel="preload" href="Montserrat-LightItalic.woff2" as="font" type="font/woff2" crossorigin>+
+ abcdefghijklmnopqrstuvwxyz
+ABCDEFGHIJKLMNOPQRSTUVWXYZ
+ 0123456789.:,;()*!?'@#<>$%&^+-=~
+
The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+.your-style {
+ font-family: 'Montserrat';
+ font-weight: 500;
+ font-style: normal;
+}
+ +<link rel="preload" href="Montserrat-Medium.woff2" as="font" type="font/woff2" crossorigin>+
+ abcdefghijklmnopqrstuvwxyz
+ABCDEFGHIJKLMNOPQRSTUVWXYZ
+ 0123456789.:,;()*!?'@#<>$%&^+-=~
+
The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+.your-style {
+ font-family: 'Montserrat';
+ font-weight: normal;
+ font-style: normal;
+}
+ +<link rel="preload" href="Montserrat-Regular.woff2" as="font" type="font/woff2" crossorigin>+
+ abcdefghijklmnopqrstuvwxyz
+ABCDEFGHIJKLMNOPQRSTUVWXYZ
+ 0123456789.:,;()*!?'@#<>$%&^+-=~
+
The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+.your-style {
+ font-family: 'Montserrat';
+ font-weight: 500;
+ font-style: italic;
+}
+ +<link rel="preload" href="Montserrat-MediumItalic.woff2" as="font" type="font/woff2" crossorigin>+
+ abcdefghijklmnopqrstuvwxyz
+ABCDEFGHIJKLMNOPQRSTUVWXYZ
+ 0123456789.:,;()*!?'@#<>$%&^+-=~
+
The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+.your-style {
+ font-family: 'Montserrat';
+ font-weight: 600;
+ font-style: italic;
+}
+ +<link rel="preload" href="Montserrat-SemiBoldItalic.woff2" as="font" type="font/woff2" crossorigin>+
+ abcdefghijklmnopqrstuvwxyz
+ABCDEFGHIJKLMNOPQRSTUVWXYZ
+ 0123456789.:,;()*!?'@#<>$%&^+-=~
+
The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+.your-style {
+ font-family: 'Montserrat';
+ font-weight: 600;
+ font-style: normal;
+}
+ +<link rel="preload" href="Montserrat-SemiBold.woff2" as="font" type="font/woff2" crossorigin>+
+ abcdefghijklmnopqrstuvwxyz
+ABCDEFGHIJKLMNOPQRSTUVWXYZ
+ 0123456789.:,;()*!?'@#<>$%&^+-=~
+
The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+.your-style {
+ font-family: 'Montserrat';
+ font-weight: 100;
+ font-style: normal;
+}
+ +<link rel="preload" href="Montserrat-Thin.woff2" as="font" type="font/woff2" crossorigin>+
+ abcdefghijklmnopqrstuvwxyz
+ABCDEFGHIJKLMNOPQRSTUVWXYZ
+ 0123456789.:,;()*!?'@#<>$%&^+-=~
+
The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+.your-style {
+ font-family: 'Montserrat';
+ font-weight: 100;
+ font-style: italic;
+}
+ +<link rel="preload" href="Montserrat-ThinItalic.woff2" as="font" type="font/woff2" crossorigin>+
+ abcdefghijklmnopqrstuvwxyz
+ABCDEFGHIJKLMNOPQRSTUVWXYZ
+ 0123456789.:,;()*!?'@#<>$%&^+-=~
+
The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+The quick brown fox jumps over the lazy dog.
+{{ERROR}}
Partners' trust - we are an undisputed leader in Turkmenistan's advertising, marketing, and printing industry.
+Individual approach - we work with clients from different niches and with different advertising budgets.
+Loyalty program - becoming our regular client, you will receive discounts and special offers.
+Best advertising prices - we offer the most favorable price-to-quality ratio on the market.
+Any complexity of execution - our extensive experience and strong team allow us to take on any project.
+Innovation and success - we use modern technologies adapted to specific projects or campaigns.
+Receive quality services depending on your needs.
+Increase the efficiency and competitiveness of your business in the region.
+Learn the basics of successful promotion and brand building.
+Рекламное агентство «TPS» - многопрофильная компания в сфере рекламы, Digital-услуг, продвижения, организации мероприятий, полиграфии, производства, дизайна, маркетинговых исследований рынка и пр.
- -Наша миссия – влияние на рынок и создание эталона рекламно-маркетингового обслуживания в Туркменистане. Предоставить каждому клиенту возможность заявить о себе.
- -Индивидуальный подход к каждому клиенту обеспечил «TPS» крупными контрактами от ведущих национальных и международных компаний. Среди выполненных проектов – оформление ТРЦ «Ашхабад», оформление международного аэропорта г. Туркменабад, организация и оформление выставки нефтегазовых компаний, печать журнала «Лачин» и пр.
-Преимущества:
+Уникальность. Единственное агентство в стране, где предоставляются все рекламные услуги в одном месте.
+Доверие партнеров – мы - несомненный лидер в рекламной, маркетинговой и печатной индустрии Туркменистана.
20 лет опыта работы. Мы выполнили более 5 000 проектов для разных секторов и отраслей разной степени сложности, в том числе зарубежных клиентов.
+Индивидуальный подход – работаем с клиентами разных ниш и с разными рекламными бюджетами.
Полный цикл работ. Разработка дизайна, изготовление, размещение и обслуживание конструкций, стендов, рекламных проектов.
+Программа лояльности – став нашим постоянным клиентом, вы получите скидки и специальные предложения.
Большой охват. Владеем наибольшим количеством рекламных площадей столицы и крупных городов Туркменистана.
+Лучшие цены на рекламу – предлагаем самое выгодное соотношение цены и качества на рынке.
Гарантия размещения. Мы сотрудничаем с государственными органами и соблюдаем законодательство.
+Любая сложность исполнения – большой опыт работы и сильная команда позволяет браться за любой проект.
Рекламные носители. Большой выбор от простых мобильных до технически сложных мультимедийных конструкций.
+Инновации и успех – используем современные технологии, адаптированные под конкретный проект или кампанию.
Почему стоит выбрать нашу компанию?
- -Доверие партнеров – мы - несомненный лидер в рекламной, маркетинговой и печатной индустрии Туркменистана.
-Индивидуальный подход – работаем с клиентами разных ниш и с разными рекламными бюджетами.
-Программа лояльности – став нашим постоянным клиентом, вы получите скидки и специальные предложения.
-Лучшие цены на рекламу – предлагаем самое выгодное соотношение цены и качества на рынке.
-Любая сложность исполнения – большой опыт работы и сильная команда позволяет браться за любой проект.
-Инновации и успех – используем современные технологии, адаптированные под конкретный проект или кампанию.
-С нами вы можете:
+Hyzmatdaşlaryň ynamy – Türkmenistanyň mahabat, marketing we çaphana pudagynda biz – şübhesiz öňbaşçy.
+Şahsy çemeleşmeler – dürli ugurlaryň müşderileri we dürli mahabat býujetleri bilen işleýäris.
+Ygrarlylyk programmasy – hemişelik müşderimiz bolmak bilen, siz arzanladyşlary we ýörite teklipleri alarsyňyz.
+Mahabat üçin amatly bahalar – bazarda baha we hil babatynda iň amatly gatnaşygy hödürleýäris.
+Ýerine ýetirmegiň islendik çylşyrymlylygy – uly iş tejribesi we güýçli topar islendik taslamany amala aşyrmaga mümkinçilik berýär.
+Innowasiýa we üstünlik – anyk taslama ýa-da kampaniýa uýgunlaşdyrylan häzirki zaman tehnologiýalaryny ulanýarys.
+Isleglere baglylykda ýokary hilli hyzmatlary almak.
+Sebitde işewürligiň netijeliligini we bäsdeşlige ukyplylygyny ýokarlandyrmak
+Üstünlikli ilerletmegiň we geljegi uly marka nyşanlaryny döretmegiň esaslaryny öwrenmek.
+TPS Advertising Agency - a multi-profile company in the field of advertising, digital services, promotion, event organization, printing, production, design, and market research in Turkmenistan.
+ +Our mission is to influence the market and set the standard for advertising and marketing services in Turkmenistan. Provide every client with the opportunity to make themselves known.
+ +An individual approach to each client has secured "TPS" large contracts from leading national and international companies. Among the completed projects are the design of the "Ashgabat" international airport, the organization and decoration of the oil and gas company exhibition, and the printing of the "Lachin" magazine, etc.
+ +Рекламное агентство «TPS» - многопрофильная компания в сфере рекламы, Digital-услуг, продвижения, организации мероприятий, полиграфии, производства, дизайна, маркетинговых исследований рынка и пр.
+ +Наша миссия – влияние на рынок и создание эталона рекламно-маркетингового обслуживания в Туркменистане. Предоставить каждому клиенту возможность заявить о себе.
+ +Индивидуальный подход к каждому клиенту обеспечил «TPS» крупными контрактами от ведущих национальных и международных компаний. Среди выполненных проектов – оформление международного аэропорта «Ашхабад», организация и оформление выставки нефтегазовых компаний, печать журнала «Лачин» и пр.
+ +“TPS” Mahabat agentligi – mahabat, sanly hyzmatlar, ilerletmek, çäreleri guramak, poligrafiýa, önümçilik, dizaýn, bazaryň marketing barlaglary we ş.m. pudaklarynda köp ugurly kompaniýa.
+ +Biziň missiýamyz – Türkmenistanda bazara täsir etmek we mahabat-marketing hyzmat ediş etalonyny döretmek. Her bir müşderä özi barada aýtmaga mümkinçilik bermek.
+ +Her bir müşderä aýratyn çemeleşmegi “TPS” öňdebaryjy milli we halkara kompaniýalardan iri şertnamalar bilen üpjün etdi. Ýerine ýetirilen taslamalaryň arasynda – Aşgabat halkara howa menzilini bezemek, nebitgaz kompaniýalarynyň sergisini guramak we bezemek, “Laçyn” žurnalynyň çap edilmegi we ş.m.
+ +The only agency in the country where all advertising services are provided in one place.
+We have completed more than... projects for various sectors and industries, including foreign clients.
+Development, manufacturing, placement, and maintenance of structures, stands, and advertising projects.
+We have the largest number of advertising spaces in the capital and major cities of Turkmenistan.
+We cooperate with government agencies and comply with the law.
+A wide selection from simple mobile to technically complex multimedia structures.
+Единственное агентство в стране, где предоставляются все рекламные услуги в одном месте.
+Мы выполнили более 300 проектов для разных секторов и отраслей, в том числе зарубежных клиентов.
+Разработка, изготовление, размещение и обслуживание конструкций, стендов, рекламных проектов.
+Владеем наибольшим количеством рекламных площадей столицы и крупных городов Туркменистана.
+Мы сотрудничаем с государственными органами и соблюдаем законодательство.
+Большой выбор от простых мобильных до технически сложных мультимедийных конструкций.
+Ýurtda ähli mahabat hyzmatlaryny bir ýerde hödürleýän ýeke-täk agentlik.
+Dürli ugurlar we pudaklar üçin, şol sanda daşary ýurt müşderileri üçin ...-den gowrak taslamalary ýerine ýetirdik.
+Gurluşlary, stendleri, mahabat taslamalaryny işläp taýýarlamak, öndürmek, ýerleşdirmek we hyzmat etmek.
+Biz Türkmenistanyň paýtagtynda we iri şäherlerinde mahabat ýerleriniň iň köp sanyna eýe bolup durýarys.
+Döwlet edaralary bilen hyzmatdaşlyk edýäris we kanunlary berjaý edýäris.
+Ýönekeý öýjükli tehniki taýdan çylşyrymly multimediýa gurluşlaryna çenli uly saýlaw.
+Outdoor advertising is the most effective brand promotion tool in Turkmenistan today. With its help, clients can promote products and services, increase brand recognition, and ensure customer loyalty. Designers will develop a unique advertising project, specialists will assist in choosing its placement, manufacture and install structures quickly, and provide a warranty for the work done. Trivisions, lightboxes, signs, banners, facades, or RGB advertising - a wide range of media options depending on the client's needs. We offer placement on areas from 2 to 60 square meters. Your advertising will appear in shopping centers, airports, on airplanes, and central city avenues.
+
+
Advantages: wide audience coverage, frequency and flexibility in placement, long-term impact on the audience, a large number of advertising contacts.
+
+
How we work:
+
1. Meeting with the client. Completion of the brief - defining the goals of the advertising campaign.
+
2. Development of the advertising budget.
+
3. Signing the contract. Payment.
+
4. Market research, identifying the target audience.
+
5. Development of the advertising strategy. Media planning.
+
6. Product creation (if necessary).
+
7. Approval with the client.
+
8. Placement of advertising on media.
+
9. Reporting.
+
10. Technical support and maintenance of structures (by agreement).
Daşarky mahabat – häzirki wagtda Türkmenistanda haryt nyşanyny tanatmak üçin iň täsirli guraldyr. Onuň kömegi bilen müşderi harytlary we hyzmatlary ilerledip, harytlary we hyzmatlary ilerledip, haryt nyşany bilen tanyşlygy ýokarlandyrar we müşderiniň ygrarlygyny üpjün eder. Dizaýnerler özboluşly mahabat taslamasyny işäp taýýarlar, hünärmenler ony ýerleşdirilmegiň ýerini saýlamaga kömek eder, taýýarlar we gysga wagtda gurluşlaryny gurnap berer we ýerine ýetirilen iş üçin kepillik berer. Triwiženler, laýtbokslar, atýazgylar we bannerler, fasadlar ýa-da RGB mahabaty – müşderiniň isleglerine baglylykda göterijileriň uly saýlawy beriş serişdeleri. 2 inedördül metrden 60 inedördül metre çenli meýdanlarda ýerleşdirmegi hödürleýäris. Mahabatyňyz söwda merkezlerinde, howa menzillerinde, uçarlarda we şäheriň merkezi şaýollarynda peýda bolar.
+
+
Artykmaçlyklary: giň auditoriýa, ýerleşdirmegiň ýygylygy we çeýeligi, auditoriýa uzak möhletleýin täsiri, mahabat aragatnaşyklarynyň uly mukdary.
+
+
Biz nähili işleýäris?
+
1. Müşderi bilen duşuşmak. Brif doldurmak – mahabat kampaniýasynyň maksatlaryny kesgitlemek.
+
2. Mahabat býujetini işläp taýýarlamak.
+
3. Şertnama gol çekmek. Töleg tölemek.
+
4. Bazar barlaglary, maksatly auditoriýany kesgitlemek.
+
5. Mahabat strategiýasyny işläp taýýarlamak. Mediýa taýdan meýilleşdirmek.
+
6. Önümleri döretmek (zerur ýagdaýynda).
+
7. Müşderi bilen ylalaşmak.
+
8. Göterijilerde mahabaty ýerleşdirmek.
+
9. Hasabatlylyk.
+
10. Gurluşlara tehniki goldaw we hyzmat etmek (ylalaşyk boýunça).
Outdoor advertising is the most effective brand promotion tool in Turkmenistan today. With its help, clients can promote products and services, increase brand recognition, and ensure customer loyalty. Designers will develop a unique advertising project, specialists will assist in choosing its placement, manufacture and install structures quickly, and provide a warranty for the work done. Trivisions, lightboxes, signs, banners, facades, or RGB advertising - a wide range of media options depending on the client's needs. We offer placement on areas from 2 to 60 square meters. Your advertising will appear in shopping centers, airports, on airplanes, and central city avenues.
+ +Advantages: wide audience coverage, frequency and flexibility in placement, long-term impact on the audience, a large number of advertising contacts.
+ +
+
+
+
+
Meeting with the client. Completion of the brief - defining the goals of the advertising campaign.
+Development of the advertising budget.
+Signing the contract. Payment.
+Market research, identifying the target audience.
+Development of the advertising strategy. Media planning.
+Product creation (if necessary).
+Approval with the client.
+Placement of advertising on media.
+Reporting.
+Technical support and maintenance of structures (by agreement).
+
+
+
Преимущества: широкий охват аудитории, частота и гибкость в размещении, долговременность воздействия на аудиторию, большое количество рекламных контактов.
-
+
+
+
+
Daşarky mahabat – häzirki wagtda Türkmenistanda haryt nyşanyny tanatmak üçin iň täsirli guraldyr. Onuň kömegi bilen müşderi harytlary we hyzmatlary ilerledip, harytlary we hyzmatlary ilerledip, haryt nyşany bilen tanyşlygy ýokarlandyrar we müşderiniň ygrarlygyny üpjün eder. Dizaýnerler özboluşly mahabat taslamasyny işäp taýýarlar, hünärmenler ony ýerleşdirilmegiň ýerini saýlamaga kömek eder, taýýarlar we gysga wagtda gurluşlaryny gurnap berer we ýerine ýetirilen iş üçin kepillik berer. Triwiženler, laýtbokslar, atýazgylar we bannerler, fasadlar ýa-da RGB mahabaty – müşderiniň isleglerine baglylykda göterijileriň uly saýlawy beriş serişdeleri. 2 inedördül metrden 60 inedördül metre çenli meýdanlarda ýerleşdirmegi hödürleýäris. Mahabatyňyz söwda merkezlerinde, howa menzillerinde, uçarlarda we şäheriň merkezi şaýollarynda peýda bolar.
+ +Artykmaçlyklary: giň auditoriýa, ýerleşdirmegiň ýygylygy we çeýeligi, auditoriýa uzak möhletleýin täsiri, mahabat aragatnaşyklarynyň uly mukdary.
+ +
+
+
+
+
Müşderi bilen duşuşmak. Brif doldurmak – mahabat kampaniýasynyň maksatlaryny kesgitlemek.
+Mahabat býujetini işläp taýýarlamak.
+Şertnama gol çekmek. Töleg tölemek.
+Bazar barlaglary, maksatly auditoriýany kesgitlemek.
+Mahabat strategiýasyny işläp taýýarlamak. Mediýa taýdan meýilleşdirmek.
+Önümleri döretmek (zerur ýagdaýynda).
+Müşderi bilen ylalaşmak.
+Göterijilerde mahabaty ýerleşdirmek.
+Hasabatlylyk.
+Gurluşlara tehniki goldaw we hyzmat etmek (ylalaşyk boýunça).
+According to statistics, people spend twice as much time in the presence of indoor advertising media compared to outdoor ones. Indoor advertising is effective, profitable, generates revenue, and attracts new customers.
+ +Advantages: the ability to place advertisements in point-of-sale locations, a large flow of people in both shopping and entertainment centers, weather protection, close-up visibility of advertising messages, sound transmission capability, targeting a specific audience and loyal viewership.
+ +Our company offers advertising placement in all major shopping malls in the capital and provinces, as well as at the Ashgabat International Airport.
+ +
+
+
+
+
Office meeting. Completion of a brief by the client to define campaign goals.
+Compilation of the advertising budget, presented to the client.
+Contract signing and payment.
+Market situation analysis. Audience profiling.
+Defining strategic advertising objectives and creative ideas. Preparation of a media plan.
+Creating advertising materials.
+Approval with the client.
+Placement.
+Providing a report.
+Technical support and maintenance (as agreed).
+
+
+
Наша компания предлагает размещение рекламы во всех крупных ТРЦ столицы и велаятов, а также в Международном аэропорту «Ашхабад».
-
+
+
+
+
Statistika görä, adamlar daşarky bilen deňeşdirilende, içerki mahabat göterijileriniň bolan zolaklarynda 2 esse köp wagt geçirýärler. Içerki mahabat – netijeli, girdejili bolup, peýda we täze müşderileri getirýär.
+ +Artykmaçlyklary: satuw nokatlarynda mahabat etmek ukyby, söwda we dynç alyş merkezlerinde adamlaryň uly akymy, howanyň täsirinden goramak, mahabat habarlaryny ýakyndan görüp bolýar, sesi ýaýlyma bermek mümkinçiligi, maksatly auditoriýa we hemişelik müşderilere gönükdirilenligi, tomaşaçylaryň ygrarlygy.
+ +Biziň kompaniýamyz paýtagtyň we welaýatlaryň ähli iri söwda merkezlerinde, şeýle hem “Aşgabat” Halkara howa menzilinde mahabaty ýerleşdirmegi teklip edýär.
+ +
+
+
+
+
Ofisde duşuşmak. Brif doldurmak – mahabat kampaniýasynyň maksatlaryny kesgitlemek.
+Mahabat býujetini işläp taýýarlamak, müşderä görkezmek.
+Şertnama gol çekmek we töleg tölemek.
+Bazarda ýagdaýy seljermek. Auditoriýa görnüşini kesgitlemek.
+Strategiki mahabat maksatlaryny we döredijilik ideýalaryny kesgitlemek.
+Mediýa taýdan meýilnamany taýýarlamak.
+Mahabat önümlerini döretmek.
+Müşderi bilen ylalaşmak.
+Ýerleşdirmek.
+Hasabatlylygy bermek.
+Tehniki goldaw we hyzmat etmek (ylalaşyk boýunça).
+Advertising agency 'TPS Advertising' was the first to offer services for manufacturing and installing individual and collective exhibition stands and displays in Turkmenistan. Service packages are designed for clients from various market segments and financial capabilities, from government institutions to small private entrepreneurs just starting their businesses in Turkmenistan. All work, from order intake to project completion, is meticulously planned and delivered on time. 'TPS' annually organizes local and international conferences in various industries.
+ +To date, the company has successfully completed over 500 major exhibition stands. Regardless of your choice, our specialists will devote maximum time and attention to your project. The agency's task is to create the best project for you and bring it to life.
+ +
+
+
+
+
Briefing - Initial discussions with the client, task definition for the designer.
+Cost estimate preparation, contract signing, and payment.
+Design project - The main stage of work: creating the design, concept, 3D modeling.
+Engineering - Creating technical drawings and visualization.
+Project approval with the client.
+Development stage - Stand creation.
+Installation - Assembly and installation, equipment, furniture, materials, and technologies.
+Advertising consulting: printing, souvenirs, promotional staff (by agreement).
+Technical support throughout the event.
+Dismantling.
+На сегодняшний день компания успешно реализовала более 500 крупных выставочных стендов. Независимо от того, какой вы выберете – специалисты уделят максимум времени и внимания. Задача агентства – создать для вас лучший проект и воплотить его в реальность.
-
+
+
+
+
“TPS Advertising” Mahabat agentligi şahsy we toparlaýyn sergi stendlerini we ekspozisiýalaryny öndürmek we gurnama boýunça hyzmatlary Türkmenistanda ilkinji bolup teklip etmäge başlady.
+ +Hyzmatlaryň bukjalary dürli bazar segmentleriniň we maliýe taýdan tölege ukyply müşderileri üçin, ýagny döwlet edaralaryndan başlap, Türkmenistanda işine täze başlan kiçi hususy telekeçilere çenli niýetlenendir. Sargyt almakdan başlap, obýekti tabşyrmaga çenli ähli işler anyk meýilleşdirilýär, şonuň üçin wagtynda tamamlanýar.
+ +“TPS” her ýyl dürli pudaklarda ýerli we halkara maslahatary guramaçysy bolup çykyş edýär.
+ +Häzirki wagta çenli kompaniýa 500-den gowrak iri sergi stendlerini üstünlikli durmuşa geçirdi. Haýsy birini saýlasaňyzam, hünärmenlerimiz size aňryçäk wagtyny we ünsüni sarp ederler. Agentligiň wezipesi – siziň üçin iň gowy taslamany döretmek we ony hakykata öwürmek.
+ +
+
+
+
+
Brifing – müşderi bilen başlangyç gepleşikler. Wezipeleri ara alyp maslahatlaşmak we dizaýner üçin tehniki tabşyrygy düzmek.
+Çenlik düzmek. Şertnama gol çekmek, töleg tölemek.
+Dizaýn taslamasy – işiň esasy tapgyrydyr. Dizaýn, konsepsiýa, 3D-modelleme döretmek.
+Taslamalaşdyrmak. Tehniki çyzgylary döretmek. Wizuallaşdyrmak.
+Taslamany müşderi bilen ylalaşmak.
+Işläp taýýarlamak tapgyry – stend döretmek.
+Gurnamak – ýygnamak we gurnamak. Enjamlar, mebel, materiallar we tehnologiýalar bilen toplumlaşdyrmak.
+Mahabat konsaltingi: çap etmek, ýadygärlik sowgatlary, promo işgärleri (ylalaşyk boýunça).
+Tutuş çäräniň dowamynda tehniki hyzmat.
+Sökmek.
+Comprehensive event organization "turnkey": private, corporate, and official, in any format and time. Specialists will develop the idea of your event, from hotel bookings to catering services.
+ +Allow yourself to relax and enjoy the event, without spending time on organizational matters. The company will take care of all the concerns related to the accommodation of participants and the conduct of the event, working 24 hours a day.
+ +
+
+
+
+
Development of the event concept: program creation, stylistic choice, budget formation.
+Choosing the event location and venue, considering geography, seating capacity, and comfort.
+Working with speakers and moderators: invitation and organization of their activities.
+Audience management: inviting participants, their registration, and support.
+Media handling: accreditation, advertising, press release preparation and publication.
+Providing souvenir and printed materials, branding materials.
+Additional services: translation, support, document processing, and more.
+Services: catering, accommodation, transportation.
+Позвольте себе расслабиться и получать удовольствие от события, а не уделять время организационным вопросам. Все заботы, связанные с проживанием участников и проведением мероприятия, компания возьмет на себя, работая 24 часа в сутки.
-
+
+
+
+
Çäreleri dolulygyna toplumlaýyn guramak: islendik formatda we wagtda hususy, korporatiw we resmi. Hünärmenler myhmanhanany bronlamakdan başlap, naharhana hyzmatlaryna çenli çäräňiz üçin pikiri işläp taýýarlar.
+ +Guramaçylyk meselelerine wagt sarp etmegiň ýerine dynç almaga we çäreden lezzet almaga rugsat beriň. Kompaniýa gije-gündiziň dowamynda 24 sagat işlemek bilen gatnaşyjylaryň ýerleşmegi we çäräniň geçirilmegi bilen baglanyşykly ähli aladalary öz üstüne alar.
+ +
+
+
+
+
Çäräniň konsepsiýasyny işläp taýýarlamak: programmany düzmek, stilistikany saýlamak, býujet döretmek.
+Geografiýany, oturylýan ýerleriň sanyny we zalyň amatlylygyny göz öňünde tutmak bilen ýeri we meýdançany saýlamak.
+Spikerler we moderatorlar bilen işlemek: çakylyk we işi guramak.
+Auditoriýa bilen işlemek: gatnaşyjylary çagyrmak, olary hasaba almak we olaryň goldawyny amala aşyrmak.
+Köpçülikleýin habar beriş serişdeleri bilen işlemek: akkreditasiýa, mahabat, press-relizleri taýýarlamak we çap etmek.
+Ýadygärlik sowgatlary we çap önümleri, haryt nyşany bolan materiallary bilen üpjün etmek.
+Goşmaça hyzmatlar: terjime, goldaw, resminamalary resmileşdirmek we beýl.
+Hyzmat ediş: iýmitlendirmek, ýaşaýyş ýeri bilen üpjün etmek, geçirmek.
+Today, television holds one of the key positions in advertising budgets. Advertisers are attracted to the high effectiveness of TV advertising, especially when the message is aimed at a broad audience. Advantages include a wide audience reach, powerful visual and auditory impact, and prestige.
+ +The main advantage of radio advertising is the widest reach of listeners, audience stability, and the ability to listen to broadcasts without being distracted from other activities. Radio is listened to at home, at work, in the car, and in establishments providing household services.
+ +We offer advertising placement services on all mass media channels in Turkmenistan with the greatest benefit for you.
+ +
+
+
+
+
Meeting with the client: filling out a brief – determining the advertiser's goals.
+Creating an advertising budget.
+Signing a cooperation agreement.
+Assessing the target audience and transmission channel.
+Developing an advertising strategy. Creating a media plan.
+Creating advertising materials.
+Coordination and approval with the client.
+Publishing advertising in the media.
+Providing reports.
+Мы предлагаем услуги по размещению рекламы на всех каналах средств массовой информации Туркменистана с наибольшей выгодой для вас.
-
+
+
+
+
Häzirki wagtda mahabat býujetlerinde telewideniýe esasy ýerlerden birini eýeleýär. Telewizion mahabatyň ýokary netijeliligini mahabat berijileri özüne çekýär, esasanam, habar giň auditoriýa üçin niýetlenen bolsa. Artykmaçlyklary: giň auditoriýa ýetmek, şekiliň we sesiň güýçli täsiri, abraýlylyk.
+ +Radioda mahabatyň esasy artykmaçlygy – diňleýjileriň iň giň elýeterliligi, diňleýjileriň durnuklylygy we beýleki işlerden daşlaşman, gepleşikleri diňlemek ukybydyr. Radio öýde, işde, awtoulagda we sarp ediş hyzmat kärhanalarynda diňlenýär.
+ +Siziň üçin aňryçäk derejede peýda bilen Türkmenistandaky köpçülikleýin habar beriş serişdeleriniň ähli kanallarynda mahabat hyzmatlaryny teklip edýäris.
+ +
+
+
+
+
Müşderi bilen duşuşmak: brif doldurmak – mahabat berijiniň maksatlaryny kesgitlemek.
+Mahabata býujeti düzmek.
+Hyzmatdaşlyk şertnamasyny düzmek.
+Maksatly auditoriýa we ýaýlym kanalyna baha bermek.
+Mahabat strategiýasyny gurmak. Mediýa meýilnamasyny düzmek.
+Mahabat önümini döretmek.
+Müşderi bilen ylalaşmak we tassyklamak.
+Köpçülikleýin habar beriş serişdelerinde mahabaty çap etmek.
+Hasabatlylygy bermek.
+The optimal combination of technology, materials, and design.
+ +With the advancement of technology, outdoor advertising becomes more accessible for companies with any budget. Our company offers a range of materials for production and lighting equipment that includes over a thousand items.
+ +We manufacture various advertising structures, from strict metal constructions to bright and dynamic signs. We will bring any of your ideas to life or, if you lack ideas, help create the most advantageous advertising campaign.
\ No newline at end of file diff --git a/themes/tps/content/servicePageContent6Dropdown.tm.htm b/themes/tps/content/servicePageContent6Dropdown.tm.htm new file mode 100755 index 0000000..6effe11 --- /dev/null +++ b/themes/tps/content/servicePageContent6Dropdown.tm.htm @@ -0,0 +1,3 @@ +Tehnologiýalaryň ösmegi bilen, daşarky mahabat islendik býujetli kompaniýalar üçin has elýeterli bolýar. Kompaniýamyzyň önümçilik we yşyklandyryş enjamlary üçin materiallaryň görnüşliligi müňden gowrak pozisiýany öz içine alýar.
+ +Biz islendik mahabat gurluşlaryny öndürýäris: berk metal gurluşlardan açyk we dinamiki atýazgylara çenli. Siziň islän pikirleriňizi durmuşa geçireris ýa-da pikirleriňiz ýok bolsa, aňryçäk girdejili mahabat kampaniýasyny döretmäge kömek ederis.
\ No newline at end of file diff --git a/themes/tps/layouts/master.htm b/themes/tps/layouts/master.htm index ddc1f42..21fbf37 100755 --- a/themes/tps/layouts/master.htm +++ b/themes/tps/layouts/master.htm @@ -15,7 +15,13 @@ forceUrl = 1 - + + + + + {% styles %} + + + + + +