/******************************************* -------------------------- THEME SNIPPETS 01. Space 02. 4 Blocks 03. 3 Blocks 04. Text Two images 05. Text - Image - Button 06. Text - Image - 2 07. Slider Style 1 08. Slider Style 2 09. Slider Style 4 10. Slider Style 5 11. Slider Style 6 12. Slider Style 7 13. Slider Style 8 14. Header Offer Text 15. Social share 16. Employee And Customers Snippet 17. Team 1 18. Team 2 19. Team 3 20. Customer 1 21. Customer 2 22. 3 Columns (Style-1, Style-2) 23. 3 Columns (Style 3) 24. 3 Columns (Style 4) 25. 3 Columns (Style 5) 26. 3 Columns (Style 7) 27. 3 Columns (Icon Style 1) 28. 3 Columns (Icon Style 2) 29. Offer Snippet 30. Offer (style 1) 31. Offer (style 2) 32. Offer (style 3) 33. Offer (style 4) 34. Offer (style 5) 35. Offer Timer 36. Payment icons 37. 404 Error snippet 38. 4 Columns Pricing 39. Slider Style 9 40. 3 Columns (Style 8) 41. Team 4 42. Team 5 43. Team 6 44. Team 7 45. 4 Column Icon Style 46. 2 Column Style 1 47. 3 Column Style 9 48. 3 Column Price 49. 3 Columns (Icon Style 3) 50. Text-Image Style 4 51. Customer Style 3 52. Customer Style 4 53. 3 Column Style 11 54. 2 Column Style 2 55. Offer Style 6 56. Offer Style 7 57. 2 Column Style 3 58. Offer Timer Style 2 59. Offer Style 8 60. 3 Column Style 12 61. Slider Style 10 62. Slider Style 11 63. Offer style 9 64. Offer style 10 65. Slider Style 13 66. Timeline Style 1 67. Timeline Style 2 68. Title style 1 69. Title style 2 70. 4 columns style 5 71. 4 columns style 6 72. 4 columns style 7 72. 2 columns style 4 73. 2 columns style 5 74. Offer Timer Style 3 75. Banner with slider 76. Offer Timer Style 3 77. Title style 3 78. Slider Style 14 79. Title style 4 80. Slider Style 14 81. 2 Column Style 6 82. Customer Style 5 83. Banner Style 3 84. Coming Soon Style 1 85. 3 Column Style 13 86. Counting Numbers 87. Category Slider 88. Title style 5 ---------------------------------------------------------- ODOO SNIPPETS 01. Title Snippet 02. Picture 03. Features (Three Columns) 04. Accordion 05. Tabs Snippet 06. Features Grid 07. Pricing (Beginner/Professional/Expert) 4(Columns) 08. Effect [Parallax] 09. Effect [Quotes] 10. Banner 11. Carousel *********************************************/ /*==================== THEME SNIPPETS START ============================*/ /*================= 01. Space ==========================*/ .te_space_style { display:inline-block; width:100%; } /*=================== 02. 4 Blocks =====================*/ .te_block_heading { @include style(7,28); @include media-breakpoint-down(sm) { font-size:nth($f_sizes,3); } } .te_block_numbers { @include style(15,28,inherit) @include media-breakpoint-down(sm) { font-size:nth($f_sizes,16); } } .te_block_hover { .te_block_indide_div { @include transition(all,0.5s,ease) &:hover { @include transform(translateY(-30%)) } } @include media-breakpoint-down(md) { border: 1px solid $border-color; } } /*==================== 03. 3 Blocks ==================*/ .te_max_width_3_blocks { // @include width(90%,1170px) @include width(100%,auto) @include media-breakpoint-down(sm) { .col-md-4 { margin-bottom:10px; } } .te_three_blocks_icon { @include position(absolute,5px,auto,auto,50%) } .te_icon_styling { color: nth($f_color,19);/*(for v13)*/ } .te_span_icon_block { width: 80px; height: 80px; @include box-shadow(0 0 0 5px nth($f_color,18)) line-height: 80px; @include transform(translateX(-50%)) } .card{ border:0; height:100%; } } /*====================== 04. Text Two images =========================*/ .te_txt_two_img img{ max-height: 383px; } /*=================== 05. Text - Image - Button ==========================*/ .te_title_t{ @include spacing(3px,null); } .te_bold_text{ font-weight: 700; } .te_h_bottom_s { padding-bottom:20px; @include media-breakpoint-down(md) { padding-bottom: 6px; } } .te_button_inline{ display: inline-block; } .te_image_size { img { max-height: 500px; } } /*==================== 06. Text - Image - 2 ==========================*/ .te_title_text_2{ line-height: 2.6; font-weight: 600; } .te_sub_title_text_2{ font-weight: 700; } .te_conteant_text_2{ font-size:nth($f_sizes,2); } .te_left_arrow_2{ margin: 0; padding: inherit; text-indent: -1em; li{ list-style: none; @include style(1,20,inherit,1.7,null); @include position(relative,null,null,null,null); padding: 5px 0 5px 0; cursor: pointer; a { color: nth($f_color,20); } &:before{ content: "\f101"; font: normal normal normal 14px/1 FontAwesome; @include style(7,6); vertical-align: text-top; } } } .te_img_size1 { padding-top: 16px; img { max-height: 467px; } } /*============================ All Sliders Style =============================*/ /*==================== 07. Slider Style 1 ========================*/ .s_carousel.s_carousel_default .te_arrow_small .carousel-control-prev-icon::before,.s_carousel.s_carousel_default .te_arrow_small .carousel-control-next-icon::before{ text-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.2); } @include media-breakpoint-down(sm) { .s_carousel.s_carousel_default .te_arrow_small .carousel-control-prev-icon::before { @include style(4,5); margin-left: 0.5rem; } .s_carousel.s_carousel_default .te_arrow_small .carousel-control-next-icon::before { @include style(4,5); margin-right: 0.5rem; } } .carousel-control-prev, .carousel-control-next { opacity: 1; color: nth($f_color,28); } /*======================== 08. Slider Style 2 ================================*/ @include media-breakpoint-down(sm) { .te_t_slider_all_social_icon .te_t_slider_social_icon { padding: 8px; line-height: 0.5rem; width:auto; height: auto; } } .te_slider_style_2{ .carousel-control-prev,.carousel-control-next{ @include media-breakpoint-down(xs) { display:block !important; top: 19%; } } } /*======================= 09. Slider Style 4 ===========================*/ .carousel-item.oe_img_bg { background-position: center; } .te_t_carousel_text { padding-left: 0; font-weight: bold; } .te_t_carousel_subtext { @include style(3,28,null,null); } @include media-breakpoint-down(md) { .te_t_text_img_left_right { .carousel-content { text-align:center; } } } .te_t_text_img_left_right img{ max-height:500px; } /*===================== 10. Slider Style 5 ============================*/ .te_t_shop_title_text { .te_t_slider_5_txt { @include media-breakpoint-down(md) { margin-top:20px; .te_t_good_product_text { color: nth($f_color,12); } } } img{ max-height:700px; } } @include media-breakpoint-down(xs) { .te_arrow_top { padding-bottom:52px; } } /*========================== 11. Slider Style 6 ========================*/ .te_t_s_cover_content { margin: 0px auto; background-color: nth($f_color,8); opacity: 0.7; } @include media-breakpoint-down(xs) { .te_t_res_button { padding-left: 12px; padding-right: 12px; } } /*================== 12. Slider Style 7 ========================*/ .te_t_slider_prod_img { max-height:300px; } .te_s8_title { text-align: center; } .te_slider_s3_img img{ max-height:660px; } /*================== 13. Slider Style 8 ========================*/ .te_slider_right_content { text-align: center; .te_sub_title { @include style(7,28,inherit,36px); letter-spacing: 3px; font-weight: 600; margin-bottom: 8px; @include animation(1.2s, 1s, animateslideInDown,ease-in,null,both); } .te_main_title { @include style(13,28); margin-bottom: 30px; font-weight: 600; margin-top: 10px; @include animation(1.5s, 1.3s,fadeIn,ease-in,null,both); @include media-breakpoint-down(md) { font-size:nth($f_sizes,15); margin-bottom: 5px; } @include media-breakpoint-down(sm) { margin-top: 0px; font-size:nth($f_sizes,12); } } .te_slider_9_btn { margin-top: 16px; @include animation(1.2s, 1s, animateslideInUp,ease-in,null,both); @include media-breakpoint-down(sm) { margin-top: 10px; } } } .te_slider_left_content { img { @include animation(1s, 2s, animatezoomIn,ease-in,null,both); @include media-breakpoint-up(md) { float:right; } max-height:500px; } @include media-breakpoint-down(md) { text-align: center; margin-bottom: 15px; } } @keyframes animatezoomIn { from { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } @keyframes animateslideInUp { from { -webkit-transform: translate3d(0, 50%, 0); transform: translate3d(0, 50%, 0); opacity: 0; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes animateslideInDown { from { -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); opacity: 0; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* Common Change For Indicators */ .s_carousel.s_carousel_default .carousel-indicators li { box-shadow:none; } /*========================= Inner Snippets ===========================*/ /*================= 14. Header Offer Text =======================*/ .te_s_header_offer_text { & ul { list-style-type: none; padding: 0; width: auto; @include container; > li { display: inline-block; padding:0 0.5em; font-size:nth($f_sizes,3); color: $theme-extra-color; } } } /*================ 15. Social share =====================*/ .te_header_w_share { > a { padding: 0rem 0.675rem; } } /*=========================== 16. Employee And Customers Snippet =============================*/ /*--------------- Employee And Customers Common Style ------------------*/ @include media-breakpoint-down(sm) { .te_team_arrow { width:6% !important; } } .te_team_img { @include position(relative) display: block; margin: 0px auto; @include media-breakpoint-down(lg) { display: block; margin: 0px auto; } @include media-breakpoint-down(xs) { display: block; margin: 26px auto; } } .te_social_icon_inline { display: inline-block; } .te_employee_name { font-weight: 600; } .te_employee_job_title { font-size: nth($f_sizes,3); @include width(100%,90%) } .carousel-control-prev, .carousel-control-next { cursor: pointer; } /*================= 17. Team 1 ======================*/ .te_social_icon { a { @include style(18,2); @include border-radius(50%) margin: 10px 2px; padding: 5px 5px 1px 5px; @include border(1px,17,solid) width: 30px; height: 30px; @include transition(all,.6s,ease) display: block; &:hover { background-color:nth($f_color,19); border-color:nth($f_color,19); color:nth($f_color,5); } } } .te_designation_border { width: 10%; @include border(1px,24,solid) padding: 0; margin-top: 10px; margin-bottom: 6px; } /*================ 18. Team 2 =====================*/ .te_team_2_design { @include position(absolute,null,25px,-56px,25px) Padding: 4px 2px 4px 2px; @include border-radius(10px) background-color: nth($f_color,5); @include border(1px,8,solid); .te_social_2_icon { a { @include style(18,2); @include border-radius(50%) margin: 10px 2px; padding: 6px 5px 1px 5px; width: 30px; height: 30px; background-color:nth($f_color,8); cursor: pointer; @include transition(all,.6s,ease) display: block; &:hover{ background-color:nth($f_color,19); border-color:nth($f_color,19); text-decoration: none; color:nth($f_color,5); } } } } /*================= 19. Team 3 ==================*/ .te_team_3_row { padding-bottom: 50px; } .te_team_img:hover .te_team_3_design { opacity: 1; bottom: -30px; @include box-shadow(rgba(58, 78, 95, 0.2) 0 10px 16px) } .te_team_3_design { @include position(absolute,null,25px,20px,25px) padding-top: 4px; padding-bottom: 4px; padding-left: 2px; padding-right: 2px; @include border-radius(10px) background-color: nth($f_color,5); opacity: 0; @include transition(all,0.4s,ease) .te_social_icon_3 { padding: 0; a { @include style(18,2); @include border-radius(50%) margin: 10px 2px; padding: 6px 5px 1px 5px; width: 30px; height: 30px; cursor: pointer; display: block; } a.te_team_3_facebook{ background-color: #3b5998; /*This color is not used in variables*/ color:nth($f_color,5); &:hover{ opacity: 0.8; } } a.te_team_3_twitter{ background-color: #00aced; /*This color is not used in variables*/ color:nth($f_color,5); &:hover{ opacity: 0.8; } } a.te_team_3_google-plus{ background-color: #dc4a38; /*This color is not used in variables*/ color:nth($f_color,5); &:hover{ opacity: 0.8; } } a.te_team_3_linkedin{ background-color: #007bb6; /*This color is not used in variables*/ color:nth($f_color,5); &:hover{ opacity: 0.8; } } } @include media-breakpoint-down(lg) { opacity: 1; bottom: -45px; @include border(1px,8,solid) z-index: 6; } } /*==================== 20. Customer 1 ===================*/ .te_emp_img /* This Class use as (Customer 1, Customer 2, 3 Columans Style 7)*/ { @include border-radius(50%) } .te_emp_name { padding-left:10px; } .te_emp_content { @include style(2,28,null,null,null); text-align: center; @include media-breakpoint-down(xs) { @include style(18,9,null,null,null); } } /*======================= 21. Customer 2 =======================*/ @include media-breakpoint-down(sm) { .te_carousel_arrow_set { .te_arrow_set{ width:90% !important; } } } .te_carousel-control_left { @include position(absolute,0,null,0,25px); @include transition(all,0.4s,ease); width: 0; @include media-breakpoint-down(sm) { @include position(absolute,0,null,0,18px); } .te_left_arrow { @include style(15,3); @include transition(all,0.3s,ease); line-height: 35px; &:hover { font-size:nth($f_sizes,14); } } } .te_carousel-control_right { @extend .te_carousel-control_left; right:25px; left:unset; @include media-breakpoint-down(sm){ right:18px; } } @include media-breakpoint-down(xs) { .te_emp_img_name { text-align:center; } } .te_carousel_arrow_set { .te_next_prev { background: nth($f_color,05); @include border(1px,11,solid) @include transition(all,.4s); padding: 4px 12px; font-size: 1.6rem; box-shadow: 0 1px 10px #ccc; @include media-breakpoint-down(sm) { padding: 4px 9px; } &:hover { @include border(1px,19,solid) i { color: nth($f_color,19); } } i { font-weight: 600; } } } .te_employee_main { .te_cust_img { max-height: 80px; width: auto; max-width: 100%; border-radius: 50%; @include media-breakpoint-down(md) { margin-bottom: 20px; } } .te_c_employee_name { padding: 0; margin: 0; font-weight: 600; } .te_icon_content { display: inline-flex; .te_quotes_icon { color: nth($f_color,8); @include position(absolute,-10px,null,null,-1rem); z-index: -1; @include media-breakpoint-down(md) { font-size:nth($f_sizes,13); @include position(absolute,-1rem,null,null,0); } } .te_quotes_icon_right { @include position(absolute,null,-0.8rem,1rem,null); color: nth($f_color,11); @include media-breakpoint-down(md) { @include position(absolute,null,0,1rem,null); } } p { @include style(7,28); margin-top: 15px; z-index: 98; position: relative; } } } /*=============================== 3 Columans ===================================*/ /*================ 22. 3 Columns (Style-1, Style-2) =======================*/ // This class is use as ( 3 Columns all style and Mega Menus Style 6 ) snippet //(This Class is use style-1, style-2) .te_three_columns_heading { @include style(8,28) font-weight: bold; @include media-breakpoint-down(md) { font-size: nth($f_sizes,1); } } .te_3_column_left_heading { text-align: left; border:0; img{ max-height: 500px; } } .te_3_column_center_heading { text-align: center; border:0; } //(This Class is use style-1, style-2) .te_three_columns_para { @include style(2,28,inherit) } //(This Class is use 3 Columns all Style use ) .te_feature_image { @include container; @include width(auto,100%); } /*=================== 3 Columns Comman (Icon Style) ================*/ .te_sub_text { @include style(3,28); } /*================= 23. 3 Columns (Style 3) ==================*/ .te_slide_border{ @include border(1px,8,solid) @include box-shadow(0px 0px 3px 0px rgba(0,0,0,0.2)) @include media-breakpoint-down(xs){ margin-bottom: 10px; } } /*==================== 24. 3 Columns (Style 4) =====================*/ .te_t3_col_bg_div { &:hover .te_title_text { bottom:10px; } @include media-breakpoint-down(sm) { margin-bottom: 10px; } } .te_bgimage { background-size: cover; opacity: 0.9; height: 100vh !important; max-height: 500px; background-position: center; .te_title_text { @include position(absolute,null,4px,0px,4px) padding:30px; background-color: rgba(234, 234, 234, 0.7); @include transition(bottom,0.5s,ease) } } /*=============== 25. 3 Columns (Style 5) =======================*/ .te_col_ind { &:hover .te_image_overflow img { @include transform(scale(1.1)) } @include media-breakpoint-down(sm) { margin-bottom:16px; } .te_image_overflow { overflow:hidden; @include position(relative) img { @include transition(all,.4s,ease-out) } } .te_center_position { @include position(relative,null,null,null,null); padding-top: 0px; min-height: 65px; } img{ max-height: 424px; } .te_button_position { @include position(absolute,null,null,-0,5%); background-color:nth($f_color,19); padding: 5%; width:90%; h6{ .te_fix_content_h3 { font-weight: bold; color: nth($f_color,5); } } span { @include style(3,5); display: block; padding: 0.5rem 0; } @include media-breakpoint-down(sm) { width: 70%; left: 15%; } @include media-breakpoint-down(xs) { width: 90%; left: 5%; } } } /*================ 3 Columns (Style 6) =======================*/ .te_img_height_3col6 img { max-height: 130px; } /*================ 26. 3 Columns (Style 7) ======================*/ .te_three_col_text{ @include style(7,28,null,1.6,null); @include media-breakpoint-down(sm) { font-size: nth($f_sizes,1); } @include media-breakpoint-down(xs) { font-size: nth($f_sizes,2); } } .te_img_emp{ padding: 0px; } .te_employee_img { display: inline-block; vertical-align: middle; } .te_space_emp{ padding-left: 10px; .te_name_name { font-family: inherit; } .te_name_designation { font-size:nth($f_sizes,1); } } @include media-breakpoint-down(md) { .te_3_col_b_space { padding-bottom: 8px } .te_3_col_t_space { padding-top:8px; } } /*================= 27. 3 Columns (Icon Style 1) ========================*/ .te_menu_flip_box { .te_icon_1 { display: inline-block; text-align: center; @include media-breakpoint-up(lg) { vertical-align: middle; } @include media-breakpoint-down(md) { display: block; } } .te_icon_1_before { @include position(relative); .te_dashed_border { height: 70px; width: 70px; @include border(1px,19,dashed); @include border-radius(50%); line-height: 70px; @include transition(all,0.5s,ease); color:nth($f_color,19); } &:before { content: ''; height: 10px; width: 10px; background-color:nth($f_color,19); @include position(absolute,0,0,0,0); margin: auto; @include border-radius(50%); opacity: 0; @include transition(all,0.5s,ease); z-index: -1; } } &:hover { .te_dashed_border { color:nth($f_color,5); } .te_icon_1_before { &:before { opacity:1; height: 50px; width: 50px; } } } } .te_title_tex { text-align: left; padding-top:10px; padding-left:10px; display: inline-block; @include media-breakpoint-up(lg) { width: 70%; vertical-align: middle; } @include media-breakpoint-down(md) { display: block; text-align: center; padding-top:15px; } .te_icon_title_1 { font-size:nth($f_sizes,5); font-weight: 600; &:hover { color:nth($f_color,19); } } } /*=============== 28. 3 Columns (Icon Style 2) =================*/ .te_menu_flip_box { @include media-breakpoint-down(xs) { margin-bottom: 25px; } .te_icon_border { .fa { background-color: nth($f_color,8); height: 70px; width: 70px; @include border-radius(50%); line-height: 70px; margin-bottom: 10px; @include transition(all,0.5s,ease); } } &:hover { .te_icon_border .fa { transform: translateY(-10px); background:nth($f_color,11); } } } .te_icon_title_2 { font-size:nth($f_sizes,5); } /*======================== 29. Offer Snippet ======================================*/ /*----------------------- Offer Snippet comman style ---------------------------*/ .te_offerleft_h { min-height: 500px; max-height: 500px; img { max-height: 500px; } } @include media-breakpoint-down(md) { .te_top_space { margin-top:32px; } } /*================== 30. Offer (style 1) ======================*/ .te_max_width_4_column { @include width(90%,1200px); p{ @include line-clamp(4,109px); margin-bottom: 13px !important; @include media-breakpoint-down(xs){ height: auto; } } div.text-center section.s_btn.o_colored_level{ @include media-breakpoint-down(xs){ margin-bottom: 10px; } } } .te_img_hover_light { &:hover { opacity: 0.7; @include transition(all,1.5s,ease) } } @include media-breakpoint-down(md) { .te_offer_middle_img { margin-bottom:16px; } } .te_offer_s1_1img img{ max-height:500px; width: 100%; } .te_offer_s1_2img img{ max-height:385px; } .te_offer_s1_3img img{ max-height:270px; } /*================ 31. Offer (style 2) =====================*/ .te_space_section { @include media-breakpoint-down(md) { margin-top:32px; } @include media-breakpoint-down(xs) { text-align:center; } img{ max-height:460px; } } .te_offer_2_left_txt { & h2 { font-weight:bold; } & h5 { margin:0; span { @include style(15,19); font-weight:bold; } } .aos-init { overflow:hidden; } @include media-breakpoint-down(lg) { h5 { span { @include style(19,19); } } .te_top_bottom { margin: 8px 0px !important; } .te_btn_left_center { text-align:left; } } @include media-breakpoint-down(xs) { h2, h5, .te_btn_left_center, p { text-align:center; } } } /*================== 32. Offer (style 3) =====================*/ @include media-breakpoint-down(sm) { .te_set_res { .te_offerleft_h { min-height: auto; max-height: 100%; img{ max-height: 490px; } } .te_offer_3_text_left { margin-top: 16px; text-align: center; margin-bottom: 16px; .te_btn_r_space { margin-top: 16px; } } .te_top_space img{ max-height:139px; } } } .te_offer_3_text_left { & p { font-size:nth($f_sizes,3); span { @include style(7,19); } } .te_btn_r_space { margin-top: 32px; } } .te_offerright_h { min-height: 234px; max-height: 234px; img { max-height: 139px; } } .te_offerright_txt { margin-top: 16px; & h4 { margin:0; } & p { font-size:nth($f_sizes,18); } } @include media-breakpoint-down(xs) { .te_top_box_space { margin-top:32px; } } /*===================== 33. Offer (style 4) =============================*/ .te_promo_txt { margin-top: 16px; @include media-breakpoint-down(sm) { margin-top:0; } .te_label_text { @include style(18,5,inherit,normal,null); background-color: nth($f_color,3); padding: 4px; font-weight: bold; float: left; cursor: pointer; } } .te_offer_bg_2 img{ max-height:150px; } .offer_3_main .card { border: 0; display: inline-block; width: 100%; } @include media-breakpoint-down(xs) { .te_top_space_chair { margin-top:32px; } } .te_offer_bg_section_4{ background-color:nth($f_color,3); } .te_shop_text { @include border(1px,5,solid) padding: 78px 4px; h2{ color: nth($f_color,5); text-align:center; cursor: pointer; } p{ @include style(18,5); text-align:center; text-decoration: underline; cursor: pointer; } } .te_sale_desi .te_sale_text { @include border(1px,3,solid) padding: 70px 4px; .te_special_text { @include style(18,6,inherit,normal); cursor: pointer; padding: 4px; background-color: #FFF9D9; /*This color is not used in variables*/ @include spacing(1px,null) display: inline-block; } .te_sale_text_1{ color: nth($f_color,3); cursor: pointer; } .te_off_text{ @include style(9,6); cursor: pointer; @include spacing(1px,null) } } @include media-breakpoint-down(lg) { .te_sale_desi .te_sale_text .te_special_text { @include style(9,6); } } /*====================== 34. Offer (style 5) ======================*/ .offer_5_bg { background-color:nth($f_color,18); } @include media-breakpoint-down(sm) { .te_offer_img_center { text-align: center; } } .te_left_to_right { .te_text_middle { display: inline-block; max-height:300px; img{ max-height:240px; } } .te_left_side { display: inline-block; @include media-breakpoint-down(sm) { text-align: center; } } } .te_offer_5_text_left { h2 { @include spacing(0.6rem,null); } } /*================= 35. Offer Timer ===============================*/ .te_offer_bg { @media (min-width:1400px) { height: unset; } img{ max-height:330px; } } .te_offer_title { font-weight: bold; text-align: left; } .te_offer_para { text-align: left; } .te_days_hr_min_sec_digit { font-size:nth($f_sizes,7); // @include style(7,3); @include spacing(1px,null); @include media-breakpoint-down(lg) { @include style(2,3); } } .te_days_hr_min_sec { @include style(9,3,null,null,none); } .rounded_digit { background: nth($f_color,5); @include border(1px,11,solid) @include border-radius(50%) font-weight: bold; width: 80px; height: 80px; box-shadow: 0px 3px 10px 0 rgba(50, 50, 93, 0.1); @include media-breakpoint-down(lg) { width: 65px; height: 65px; padding: 12px 0 !important; > span:last-child { font-size: 0.8125rem; } } @include media-breakpoint-down(md) { margin: 0px auto; } } .snippet_right_timer_div { @include media-breakpoint-down(lg) { text-align: center !important; } > span { @include media-breakpoint-down(md) { max-width: 15%; } @include media-breakpoint-down(xs) { max-width: 20%; } } } /*================= 36. Payment icons ===============================*/ .te_payment_list { span { display: inline-block; margin-bottom: 3px; vertical-align: middle; img { max-height: 30px; } } } /*================= 37. 404 Error snippet ===========================*/ .te_404_snippet { h2 { text-align: center; } p { text-align: center; font-size:nth($f_sizes,19) } } /*======================== 38. 4 Columns Pricing ========================*/ .te_price_main { @include transition(all,.3s); overflow: visible !important; @include media-breakpoint-down(xs){ margin-bottom:10px; } &:hover { @include border(1px,19,solid); transform: scale(1.03); box-shadow: 0 3px 12px #ccc; @include media-breakpoint-down(xs){ transform: unset; } } ul { padding: 1.5rem; >li { padding: 10px; >.fa { margin-left: 8px; } } } .te_price_head { text-align: center; background: nth($f_color,19); padding: 10px; color: nth($f_color,5); } .te_price_btn { @include position(relative); a { @include position(absolute,auto,-8px,-12px); @include border-radius(3px); padding: 7px; font-size: 15px; line-height: 15px; &:after { content: ""; display: block; @include position(absolute,auto,0,-6px); width: 0; height: 0; border-bottom: 8px solid nth($f_color,27); border-left: 8px solid nth($f_color,19); } } } .te_only_price { padding: 1.5rem; border-bottom: 4px double #ededed; .te_sign { font-size:nth($f_sizes,7); } .te_price { font-size:nth($f_sizes,15); } } } /*================== 39. Slider Style 9 ========================*/ .editor_enable { .te_slider_10_bg { @include media-breakpoint-up(md) { background-size: calc(100% - 250px); } } } .te_slider_10_bg { background-size: 80%; background-position: left !important; @include media-breakpoint-down(md) { background-size: 100%; } .te_slider_text_content { margin-left: auto; background-color: nth($f_color,5); width:40%; @include box-shadow(0px 1px 20px 0 rgba(174, 174, 174, 0.2)) margin-right: 16px; padding: 30px; @include media-breakpoint-down(md) { margin: 0px; width: 100%; background-color: unset; box-shadow: none; } .te_slider_heading { @include style(7,28); padding-bottom: 10px; @include media-breakpoint-down(xs) { font-size:nth($f_sizes,18); } } .te_slider_main_heading { @include style(15,28); padding-bottom: 20px; @media (max-width: 1366px) and (min-width: 992px) { font-size:1.510rem; } @include media-breakpoint-down(md) { font-size:nth($f_sizes,12); } @include media-breakpoint-down(sm) { font-size:nth($f_sizes,10); } @include media-breakpoint-down(xs) { font-size:nth($f_sizes,7); } } } } /*================ 40. 3 Columns (Style 8) ======================*/ .te_3_column_style_8 { @include media-breakpoint-down(lg) { padding-bottom: 56px !important; } @include media-breakpoint-down(md) { padding-bottom: 32px !important; } @include media-breakpoint-down(sm) { padding-top: 0px !important; padding-bottom: 0px !important; } .te_3_col_section:nth-child(2){ .te_3_col_block{ margin-bottom: 1rem !important; @include media-breakpoint-down(xs){ margin-bottom: 0.5rem !important; } } } } .te_3_col_section { .te_3_col_img { overflow: hidden; @include position(relative); @include media-breakpoint-down(xs){ margin-bottom: 0rem !important; } img { @include transition(all,.4s,ease-out); max-height: 424px; } } .te_3_col_block { .te_3_col_content { background-color: nth($f_color,19); @include transition(all,.4s,ease-out) @include border(2px,19,solid) span { @include style(3,5); display: block; padding: 0.5rem 0; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; max-width: 90%; margin: 0px auto; } &:hover { background-color: nth($f_color,27); span,.te_fix_content_h3 { color: nth($f_color,3); } } .te_fix_content_h3 { font-weight: 600; color: nth($f_color,5); &:hover { color: nth($f_color,19); } } } } &:hover { .te_3_col_img img { @include transform(scale(1.1)) } } @include media-breakpoint-down(sm) { padding-bottom: 25px; text-align: center; } } /*================= 41. Team 4 ==================*/ .te_team_4_title { font-size: nth($f_sizes,15); text-align: center; } .te_team_4_desc { text-align: center; width: 70%; } .te_team_4_img { overflow: hidden; position: relative; img { border-radius:100%; max-height:265px; } &:hover { &:before { animation: effect_shine 1s; } } &:before { @include position(absolute,0,auto,auto,-100%); content: ""; z-index: 1; display: block; width: 50%; height: 100%; background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%); -webkit-transform: skewX(-25deg); -moz-transform: skewX(-25deg); -ms-transform: skewX(-25deg); -o-transform: skewX(-25deg); transform: skewX(-25deg); } } /*================= 42. Team 5 ==================*/ .te_team_5_content { position: relative; top: 50%; transform: translateY(-50%); } .te_team_5_img { @include transition(all,0.4s,ease) &:hover { box-shadow: 0 3px 12px #ccc; } img{ max-height:500px; } } /*================= 43. Team 6 ==================*/ .te_team_6_bg { background-color: rgb(244, 246, 247); .te_team_6_img img { @include border(2px,11,solid) padding: 5px; border-radius: 100%; max-height:144px; } } .te_team_6_col { @include transition(all,0.4s,ease) &:hover { background:nth($f_color,5); box-shadow: 0 3px 12px#ccc; .te_team_6_img img { filter: brightness(0.7); @include transition(all,0.4s,ease) } } } /*================= 44. Team 7 ==================*/ .te_team_7_section { &:hover { .te_team_7_social_icon { opacity:1; } .te_team_7_content { border-bottom: 10px solid nth($f_color,19); } } } .te_team_7_img { @include position(relative); img{ max-height:424px; } .te_team_7_social_icon { @include position(absolute,0); width: 30px; height: 100%; background: rgba(44,62,80,.75); opacity:0; @include transition(all,0.4s,ease) .fa { color:nth($f_color,5); } a { padding: 5px 5px 1px 5px; } @include media-breakpoint-down(md) { @include position(relative,null,null,0); width: 100%; opacity: 1; section { display: inline-block !important; padding: 10px !important; } } } } .te_team_7_content { border:1px solid $border-color; border-bottom: 10px solid #ccc; } /*===================== 45. 4 Column Icon Style ==================*/ .te_4_col_heading { text-align:center; } .te_4_col_icon { text-align: center; @include media-breakpoint-down(md) { padding-bottom: 20px; } .te_4_col_section { img.o_we_custom_image { max-width: 50px; } padding: 25px 0; background-color:nth($f_color,5); overflow:hidden; box-shadow: 0 0 4px 5px #ededed; .fa { @include transition(all,0.4s,ease); overflow:hidden; } } .te_4_col_readmore { border-bottom: 2px solid nth($f_color,19); color: nth($f_color,19); padding-bottom: 3px; } &:hover { .te_4_col_section .fa { animation: toTopFromBottom .3s forwards; } } .te_4_col_discreption { width: 90%; } } @keyframes toTopFromBottom { 49% { -webkit-transform: translateY(-100%); } 50% { opacity: 0; -webkit-transform: translateY(100%); } 51% { opacity: 1; } } /*========================= 46. 2 Column Style 1 ====================*/ .te_2_col_bg { .te_2_col_section { @include position(absolute,0); padding:10%; } img{ max-height: 425px; } } /*====================== 47. 3 Column Style 9 ===================*/ .te_3_col_section1, .te_3_col_section3 { @include position(absolute,0,null,null,0); text-align: center; padding: 40px; width: 100%; } .te_3_col_section2 { @include position(absolute,null,null,0,0); text-align: center; padding: 40px; width: 100%; } .te_3_col_readmore { border-bottom: 2px solid nth($f_color,19); color: nth($f_color,19); padding-bottom: 3px; } .te_3_col_image { >div { &:before, &:after { content: ""; @include position(absolute,0,0,0,0); @include transition(all,0.5s,ease-out); } } &:hover { >div:after { background-color:rgba(nth($f_color,5),0.2); top: 50%; bottom: 50%; } >div:before { background-color:rgba(nth($f_color,5),0.2); right: 50%; left: 50%; } } img{ max-height: 410px; } } /*===================== 48. 3 Column Price ======================*/ .te_3_col_price_heading { text-align: center; } .te_3_col_price { border: 1px solid $border-color; background-color: nth($f_color,5); .te_big_price { @include border-radius(50%) width: 130px; height: 130px; background-color: nth($f_color,5); color:nth($f_color,3); margin: 0px auto; box-shadow: 0 0 4px 5px #ededed; position: relative; @include transition(all,0.4s,ease); .te_price_fsize { font-size: 2.5rem; .te_3_col_price_currency { @include position(absolute,0,0); font-size: 18px; width: 36px; height: 36px; line-height: 36px; @include border-radius(50%) color:nth($f_color,5); z-index: 1; @include transition(all,0.3s,ease); background-color: nth($f_color,19); } } .te_days { font-size: nth($f_sizes,7); } } ul li { .fa { padding-right: 10px; } .fa-check { color: #5bd13c; } .fa-times { color: red; } } &:hover { .te_big_price { background-color: nth($f_color,19); color:nth($f_color,5); .te_price_fsize .te_3_col_price_currency { color:nth($f_color,3); background-color: nth($f_color,5); } } } } /*========================= 49. 3 Columns (Icon Style 3) ========================*/ .te_icon_section_main { .te_icon_section { padding:15%; box-shadow: 0 0 15px -5px #ddd; @include transition(all,0.3s,ease); .te_icon_animation { @include transition(all,0.7s,ease); } } &:hover { .te_icon_animation { transform: rotateY(360deg); } .te_icon_section { box-shadow: 0 0 15px 0 #aaa; } } } /*========================== 50. Text-Image Style 4 ======================*/ .te_text_img_content { @include position(absolute,50%,-10%); background:nth($f_color,5); box-shadow: 29px 0px 51px rgba(0,0,0,0.24); padding: 40px 70px; transform: translateY(-50%); z-index: 9; @include media-breakpoint-down(md) { @include position(unset,null,null); transform:unset; box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.24); margin-bottom: 15px; text-align: center; } } /*========================== 51. Customer Style 3 ======================*/ .te_quote_section { background-color: #f6f7f8; border-radius: 5%; padding: 35px; transform: perspective(1px) translateZ(0); @include transition(all,0.4s,ease); @include position(relative); overflow: hidden; .te_quote_text { font-size: 1rem; color: inherit; z-index: 99; position: relative; .fa { opacity: 0.1; @include position(absolute,-25px); z-index: -1; } } .te_employee_img { color:nth($f_color,19); } &:before { content: ""; @include position(absolute,0,0,0,0); z-index: -1; background: rgba(nth($f_color,3),0.3); transform: scaleY(0); transform-origin: center bottom; @include transition(transform,0.3s,ease-out); border-radius: 5%; } &:hover { .te_employee_img { color:nth($f_color,5); } &:before { transform-origin: center top; transform: scaleY(1); } .te_quote_text { color:nth($f_color,5); } } } /*========================== 52. Customer Style 4 ======================*/ .te_customer_4_section { box-shadow: 0px 2px 10px 3px #f6f6f6; padding: 20px; @include position(relative); @include transition(all,0.4s,ease); .fa { font-size:nth($f_sizes,15); opacity: 0.2; } .te_emp_img { padding:0; } .te_name_designation { display: inline-block; padding-left: 15px; vertical-align: middle; } &:hover { .te_emp_img { filter: brightness(0.7); @include transition(all,0.4s,ease); } box-shadow: 0 0 15px 0 #aaa; } } /*========================== 53. 3 Column Style 11 ======================*/ .te_3_s11_content { @include position(absolute,50%,18%,null,18%); transform: translateY(-50%); padding: 40px; @include transition(all,0.5s,ease); @include media-breakpoint-down(md) { left:50%; transform: translate(-50%, -50%); padding:0; right: unset; } &:before, &:after { @include position(absolute,0,0,0,0); content: ''; transition: opacity 0.35s,transform 0.35s; opacity: 0; z-index: -1; } &:before { border-top: 2px solid nth($f_color,3); border-bottom: 2px solid nth($f_color,3); @include transform(scale(0, 1)); } &:after { border-right: 2px solid nth($f_color,3); border-left: 2px solid nth($f_color,3); @include transform(scale(1, 0)); } a { border-bottom: 1px solid nth($f_color,3); padding-bottom:5px; color:nth($f_color,3); } } .te_3_s11_image { &:before { @include position(absolute,0,0,0,0); content: ''; background: rgba(255,255,255,.7); opacity: 0; } @include media-breakpoint-up(lg) { &:hover { .te_3_s11_content { &:before, &:after { opacity: 1; transform: scale(1); } } &:before { opacity: 1; } } } img{ max-height: 290px; } } .o_editable { .te_3_s11_image:before { content:unset; } .te_offer_s3_img .te_offer_s3_img_before { z-index:1; left:-35px; } .te_offer_s2_img .te_offer_s2_img_before { z-index:0; left: -100px; top: -70px; } } /*========================== 54. 2 Column Style 2 ======================*/ .te_2_col_s2_section { @include position(absolute,50%); transform: translateY(-50%); padding: 70px; @include transition(all,0.5s,ease); z-index: 1; } .te_2col_s2_img img{ max-height: 425px; } /*========================== 55. Offer Style 6 ======================*/ .te_offer_main_content { @include position(absolute,null,null,0); background:nth($f_color,5); padding: 40px 30px; width: 50%; a { border-bottom: 1px solid nth($f_color,3); padding-bottom:5px; color:nth($f_color,3); } } .te_offer_right_content { p { font-size:nth($f_sizes,19); line-height: 1.5; padding: 5px 0 10px 0; } a { border-bottom: 1px solid nth($f_color,3); padding-bottom:5px; color:nth($f_color,3); } } .te_offer_s6_img_big img{ max-height:700px; } .te_offer_s6_img_small img{ max-height:451px; } /*========================== 56. Offer Style 7 ======================*/ .te_offer_big_img_content { @include position(absolute,0); padding: 30px; width: 60%; } .te_offer_big_img2_content { @include position(absolute,0); padding: 30px; width: 60%; } .te_offer_small_img_content { @include position(absolute,0); padding: 20px; } .te_offer_img { position: relative; img { @include transition(all,0.5s,ease); } &:hover { @include media-breakpoint-up(lg) { img { transform: scale(1.1); } } } } .te_offer_s7_right { padding-bottom: 30px; @include media-breakpoint-down(xs) { padding-bottom: 15px; >div { &:first-child { padding-bottom: 15px; } } } } .te_offer_s7_left { padding-top: 30px; @include media-breakpoint-down(xs) { padding-top: 15px; >div { &:first-child { padding-bottom: 15px; } } } } .te_offer_s7_img_big img{ max-height:700px; } .te_offer_s7_img_small img{ max-height:451px; } /*========================== 57. 2 Column Style 3 ======================*/ .te_2_col_s3_content { margin: 10%; text-align: center; @include position(absolute,0,0,0,0); @include media-breakpoint-down(xs) { margin: 5%; } } .te_2_col_s3_section { img { max-height:425px; @media (min-width: 767.98px) and (max-width: 991.98px) { min-height:250px; } @include media-breakpoint-down(xs) { min-height:200px; } } } /*========================== 58. Offer Timer Style 2 ======================*/ .te_offer_s2_img { @include position(relative); @include media-breakpoint-down(md){ display: inline-block; } img, img[data-src] { max-width: 600px; margin-left: 50px !important; @include media-breakpoint-down(lg) { max-width: 490px; } @include media-breakpoint-down(xs) { max-width: 300px; } @media (max-width:400px) { margin-left: auto !important; } } .te_offer_s2_img_before { background-color: nth($f_color,19); display: block; @include position(absolute,-40px,null,null,10px); width: 440px; height: 100%; z-index: -1; @include media-breakpoint-down(lg) { width: 400px; } @include media-breakpoint-down(xs) { max-width: 250px; } } } .te_offer_s2_section { @include media-breakpoint-down(md) { padding-top: 15px; section { text-align: center; } .s_hr_solid { margin: 0 auto; } } } .o_rtl { .te_offer_s2_img img { transform: scale(-1,1); } } /*======================= 59. Offer Style 8 =================*/ .te_offer_s8_left_content { @include position(absolute,0,null,null,5%); padding: 30px; @include media-breakpoint-down(md) { left: 14%; } @include media-breakpoint-down(sm) { left: 5%; } } .te_offer_s8_rigth_content { @include position(absolute,0,null,null,5%); padding: 30px; img { @media (min-width: 1400px) { min-height: 300px; min-width: 670px; } } } .te_offer_s8_img { overflow: hidden; img { @include transition(all,0.5s,ease); @media (min-width: 1400px) { min-height: 300px; min-width: 670px; } } &:hover { @include media-breakpoint-up(lg) { img { transform: scale(1.1); } } } } /*======================= 60. 3 Column Style 12 =================*/ .te_price_s4 { font-size: nth($f_sizes,13); sup { font-size: nth($f_sizes,13); top:unset; } } .te_3_col_price_section { border: 1px solid $border-color; border-radius: 10px; @include transition(all,0.5s,ease); &:hover { background-color: nth($f_color,5); box-shadow: 0 0 4px 5px #ededed; } } .te_3_col_price_section_2 { background-color: nth($f_color,5); box-shadow: 0 0 4px 5px #ededed; border: 1px solid $border-color; border-radius: 10px; } /*======================= 61. Slider Style 10 =================*/ .te_slider_10 { @include position(absolute,50%); transform: translateY(-50%); .te_slider_10_title { @include animation(1.8s, 0s,textAnimation,null,null,both); visibility: hidden; z-index: 9; } .s_title { display: inline-block; overflow: hidden; @include position(relative); &:before{ content:''; background-color: rgba(nth($f_color,5),0.5); @include position(absolute,0,0,0,0); width: 0; @include animation(0.5s, 2.9s,bgLeft,null,null); z-index: 999; } } .te_slider_10_content { display: inline-block; overflow: hidden; @include position(relative); p { font-size: nth($f_sizes,15); line-height: unset; @include animation(1.8s, 0s,textAnimation,null,null,both); visibility: hidden; z-index: 9; @include media-breakpoint-down(xs) { font-size: nth($f_sizes,4); } } &:before{ content:''; background-color: rgba(nth($f_color,5),0.5); @include position(absolute,0,0,0,0); width: 100%; opacity: 0; @include animation(0.5s, 2.9s,bgRight,null,null); z-index: 999; } } .te_theme_button { @include animation(1.8s, 2.3s,fadeInUp,null,null,both); } } .te_s_slider_10 { .oe_custom_bg { width: 100%; min-height: 100vh !important; vertical-align: middle; background-position: 100%; @include animation(0s, 1.5s,fadeIn,null,null,both); } } .s_carousel_default.te_s_slider_10 .carousel-indicators { li { border-radius: 50%; width: 1rem; height: 1rem; } } @keyframes textAnimation { 0% { opacity: 0; visibility: hidden; } 25% { opacity: 0.5; visibility: hidden; } 50% { opacity: 1; visibility: visible; } 75% { opacity: 1; visibility: visible; } 100% { opacity: 1; visibility: visible; } } @keyframes bgLeft { 0% { opacity: 0; width: 0; transform: translate3d(-100%, 0, 0) translate3d(-1px, 0, 0); } 25% { opacity: 1; } 50% { opacity: 1; width: 100%; transform: translate3d(0, 0, 0) translate3d(0, 0, 0); } 75% { opacity: 1; } 100% { opacity: 0; width: 100%; transform: translate3d(100%, 0, 0) translate3d(1px, 0, 0); } } @keyframes bgRight { 0% { opacity: 0; width: 100%; transform: translate3d(100%, 0, 0) translate3d(1px, 0, 0); } 25% { opacity: 1; width: 100%; } 50% { opacity: 1; width: 100%; transform: translate3d(0, 0, 0) translate3d(0, 0, 0); } 75% { opacity: 1; } 100% { opacity: 0; width: 0%; transform: translate3d(-100%, 0, 0) translate3d(-1px, 0, 0); } } @keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } /*======================= 62. Slider Style 11 =================*/ .te_slider_11 { @include position(absolute,50%); transform: translateY(-50%); text-align:center; @include media-breakpoint-down(sm) { text-align:left; } .s_title { overflow: hidden; .te_slider_11_title { font-size: nth($f_sizes,13); @include animation(0.4s, 1.5s,slideInDown,null,null,both); @include media-breakpoint-down(md) { font-size: nth($f_sizes,14); } @include media-breakpoint-down(xs) { font-size: nth($f_sizes,12); } } } .te_slider_11_content { overflow: hidden; p { font-size: nth($f_sizes,7); @include animation(0.8s, 1.5s,slideInDown,null,null,both); @include media-breakpoint-down(xs){ font-size: nth($f_sizes,2); } } @include media-breakpoint-down(xs) { padding-bottom: 20px !important; } } .s_btn { overflow: hidden; .te_theme_button { @include animation(1.5s, 1.5s,slideInDown,null,null,both); } } } .te_ts_style_11_inner .oe_img_bg { height: 75vh !important; min-height: 100% !important; @include media-breakpoint-down(md) { height: 50vh !important; } @include media-breakpoint-down(sm) { height: 40vh !important; } @include media-breakpoint-down(xs) { height: 55vh !important; } } .s_carousel_default.te_s_slider_11 { .carousel-indicators { top:40%; display: inline-block; margin-right: 2%; margin-left: 0; left: unset; li { border-radius: 50%; width: 0.8rem; height: 0.8rem; border: 1px solid #000; background-color:transparent; margin: 10px 0; } li:hover:not(.active) { background-color: rgba(nth($f_color,3),0.8);; } .active { background-color:#000; } } } @keyframes slideInDown { from { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); opacity: 0; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } /*========================= 63. Offer style 9 =====================*/ .te_trending_two { img { max-height: 750px; } } .te_banner_box { @include position(relative,null,null,null,null) } .te_banner_box.te_banner_offer { .te_fix { top: 21%; bottom: 18%; } .te_banner_inner img{ max-height:750px; } .te_banner_info { @include position(absolute,30%,null,25%,0) @include justify-content(center) @include align-items(center) width: 100%; @include display(flex) -webkit-box-direction: normal; -webkit-box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; z-index: 1; @include media-breakpoint-down(lg) { bottom: 40%; } @include media-breakpoint-down(md) { top:10%; bottom: 12%; } @include media-breakpoint-down(sm) { bottom: 6%; } @include media-breakpoint-down(xs) { top:16%; bottom: 8.5%; } .te_banner_info_inner { text-align: center; .te_banner_title_1 { @include style(8,5,inherit,null,uppercase) @include spacing(10px,null) font-weight: 700; @include media-breakpoint-down(md) { @include spacing(1,null) } @include media-breakpoint-down(xs) { @include spacing(0,null) } } .te_banner_title_4 { font-weight: bold; @include spacing(5px,null) font-size:nth($f_sizes,12); @include border(3px,5,solid) display: inline-block; vertical-align: middle; line-height: 1; margin: 15px 0; @include media-breakpoint-down(xs) { font-size:nth($f_sizes,19); @include spacing(2px,null) } span:first-child { color:nth($f_color,3); background: nth($f_color,5); } span:last-child { color:nth($f_color,5); } span { padding: 15px 18px 15px 17px; width: 50%; float: left; font-family: inherit; @include media-breakpoint-down(xs) { padding: 11px 11px 11px 16px; } } } .te_banner_title_5 { @include style(3,5); margin-bottom: 44px; font-weight: 300; @include spacing(7px,null) @include media-breakpoint-down(lg) { margin-bottom: 26px; } @include media-breakpoint-down(md) { margin-bottom: 26px; @include spacing(6,null) } @include media-breakpoint-down(sm) { margin-bottom: 26px; @include spacing(0,null) } } .te_heading_bigger { color:nth($f_color,5); font-family: inherit; line-height:1; margin-bottom: 4px; font { $f_size: 3.75rem; font-size:$f_size; @include media-breakpoint-down(md) { @if $f_size == 3.75rem { font-size:nth($f_sizes,14); } margin-top: 8px; } @include media-breakpoint-down(sm) { @if $f_size == 3.75rem { font-size:nth($f_sizes,13); } } @include media-breakpoint-down(xs) { @if $f_size == 3.75rem { font-size:nth($f_sizes,15); } } } } .te_banner_title_6 { @include style(19,5) font-weight: 700; margin-bottom: 12px; @include media-breakpoint-down(xs) { font-size:nth($f_sizes,4); margin-bottom: 8px; margin-top: 16px; } } .te_letter_s { @include spacing(1px,null); margin-bottom: 44px; @include media-breakpoint-down(lg) { margin-bottom: 36px; } } } } } /*========================= 64. Offer style 10 =====================*/ .te_trending_three { .te_banner_box { @include position(relative,null,null,null,null) line-height: 0px; .t_img_hover_1 { .te_trending_img_h { max-height:490px; background-size: cover; background-position: center; padding: 44%; } .te_banner_info { @include position(absolute,null,null,0,0) width: 100%; z-index: 6; text-align: left; padding-left: 50px; padding-bottom: 50px; @include media-breakpoint-down(md) { padding-left: 20px; padding-bottom: 20px; } @include transition(all,250ms,ease-out) .te_banner_title_one { @include style(8,5,inherit,null,uppercase) margin: 0 0; @include spacing(13px,null) @include media-breakpoint-down(lg) { @include spacing(3px,null) } } .te_banner_title_two { color:nth($f_color,5); line-height: 1; margin-bottom: 0; } .te_title_strong { font-weight: 700; } } } } .te_banner_box.te_banner_offer_three_one { .te_banner_info { visibility: visible; opacity: 1; } } .t_img_hover_1 { display: block; @include media-breakpoint-down(sm) { overflow: unset !important; } } } .te_content_3images .te_image_box_hover_effect:hover { .t_img_hover_1 { &::after { background-color: rgba(0, 0, 0, 0.2); } } } .o_editable { .te_trending_three { .te_banner_effect_three { .t_img_hover_1 { &::after { position: unset; } } } } } .te_title_b_border { border-top:2px solid nth($f_color,19); width: 50px; margin: 25px auto 0 auto; } /*======================== 65. Slider Style 13 ===================*/ .te_slider13_sub_heading{ opacity:0; @include animation(0s, 1.5s, scale_rotate, ease-in-out, 1,both); } .te_slider13_heading { font-weight: bold; opacity:0; @include animation(0s, 2s, scale_rotate, ease-in-out, 1,both); } .te_slider13_text{ opacity:0; @include animation(0.5s, 1.5s, scale_rotate_text, ease-in-out, 1,both); } .te_slider13_button{ opacity:0; @include animation(0.75s, 1.5s, rotate_btn, ease-in-out, 1,both); } .te_slider13_img{ @include animation(0s, 3s, fade, ease-in-out, 1,both); img{ max-height:500px; } } @include media-breakpoint-down(lg) { .te_slider13_content { text-align:center; } } @keyframes scale_rotate { from { opacity:0; transform: scale(3); } to { opacity:1; transform: scale(1); } } @keyframes scale_rotate_text { from { opacity:0; transform: scale(0); } to { opacity:1; transform: scale(1); } } @keyframes rotate_btn { from { opacity:0; transform: rotate(90deg); } to { opacity:1; transform: rotate(0deg); } } /*======================== 66. Timeline ===================*/ .te_timeline_block { z-index: 1; @include position(relative); &:before { content: ""; @include position(absolute,null,null,null,50%); height: calc(100% - 30px); width: 1px; background-color:nth($f_color,3); display: inline-block; top: 90px; margin-top: 0; @include media-breakpoint-down(sm) { left: 4%; } } } .te_timeline_year { font-weight:600; text-align: center; padding: 20px; font-size:nth($f_sizes,12); @include media-breakpoint-down(sm) { text-align: left; } } .te_timeline_event { background-color: #ededed; padding: 25px; margin: 60px 20px; width: 300px; @include position(relative); border-radius: 4px; @include transition(all,0.4s,ease); &:before { content: ""; @include position(absolute,calc(50% - 8px),null,null,null); width: 16px; height: 16px; border-radius: 50%; background-color: nth($f_color,5); box-shadow: 0 4px 20px -4px rgba(64, 64, 64, 0.8); display: inline-block; } @include media-breakpoint-down(sm) { max-width: 100%; width: auto; &:nth-child(odd) { margin-left: calc(100% - 90%) !important; &:before { right: calc(50% + 55%) !important; } } &:nth-child(even) { margin-left: calc(100% - 90%) !important; &:before { left: calc(50% - 58.1%) !important; } } } &:nth-child(odd) { margin-left: calc(50% + 20px); &:before { right: calc(100% + 11px); } } &:nth-child(even) { margin-left: calc(50% - 321px); &:before { left: calc(100% + 14px); } } &:hover { box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.12); } } /*======================== 67. Timeline Style 2 ===================*/ .te_timeline_s2 { @include position(relative); &::before { content: ''; background: rgba(nth($f_color,19),0.4); width: 5px; height: 95%; @include position(absolute,null,null,null,50%); transform: translateX(-50%); @include media-breakpoint-down(sm) { left: 7%; } } } .te_timeline_item { margin: 60px 20px; width: 500px; @include position(relative); border-radius: 4px; @include media-breakpoint-down(lg) { width: 320px; } @include media-breakpoint-down(sm) { max-width:100%; width:auto; &:nth-child(odd) { margin-left: calc(100% - 88%) !important; &:before { left: calc(50% - 60.1%) !important; } } &:nth-child(even) { margin-left: calc(100% - 88%) !important; &:before { right: calc(50% + 55.4%) !important; } .te_timeline_date { right: 0 !important; left: auto !important; } } .te_timeline_content { &::after { left: -15px; border-width: 10px 15px 10px 0; border-color: transparent #f5f5f5 transparent transparent; } } } @include media-breakpoint-down(xs) { &:nth-child(odd) { &:before { left: calc(50% - 63.1%) !important; } } } &:nth-child(odd) { margin-left: calc(50% - 545px); &:before { left: calc(100% + 30px); } @include media-breakpoint-down(lg) { margin-left: calc(50% - 364px); } } &:nth-child(even) { margin-left: calc(50% + 45px); &:before { right: calc(100% + 30px); } } &:before { content: ''; width: 30px; height: 30px; background: nth($f_color,5); border-radius: 50%; @include position(absolute); margin-top: 25px; box-shadow: 0 4px 20px -4px rgba(64, 64, 64, 0.8); } &:nth-child(even) { .te_timeline_content { .te_timeline_date { right: auto; left: 0; } &::after { content: ''; @include position(absolute,30px,null,null,-15px); border-style: solid; width: 0; height: 0; border-width: 10px 15px 10px 0; border-color: transparent #f5f5f5 transparent transparent; } } } } .te_timeline_content { @include position(relative); padding:30px; border-radius: 4px; background: nth($f_color,18); box-shadow: 0 20px 25px -15px rgba(0, 0, 0, .3); &::after { content: ''; @include position(absolute,30px,-15px); border-style: solid; width: 0; height: 0; border-width: 10px 0 10px 15px; border-color: transparent transparent transparent #f5f5f5; } h2 { margin-top: 15px; } } .te_timeline_card { padding: 0 0 25px 0 !important; p { padding: 0 20px; } a { margin-left: 20px; } } .te_timeline_img_header { height: 200px; @include position(relative); margin-bottom: 20px; h2 { color: nth($f_color,5); @include position(absolute,null,null,5px,20px); } .te_timeline_bgimg { background-position:center; @media (min-width: 1999.98px){ height: 22vh !important; } @media (min-width: 1799.98px) and (max-width: 1999.98px){ height: 25vh !important; } @media (min-width: 1699.98px) and (max-width: 1799.98px){ height: 28vh !important; } @media (min-width: 1399.98px) and (max-width: 1699.98px){ height: 28vh !important; } @media (min-width: 319.98px) and (max-width: 1399.98px){ height: 35vh !important; } } } .te_timeline_date { background: rgba(nth($f_color,19),0.8); display: inline-block; color: nth($f_color,5); padding: 10px; @include position(absolute,0,0); } /*========================== 68. Title style 1 ==========================*/ .te_title_1 { text-align: center; .te_title_style1 { position: relative; display: inline-block; padding-bottom: 10px; &:before { content: ""; @include position(absolute,null,30%,0,30%); height: 3px; background: -webkit-gradient(linear,left top,right top,from($btn-gradient-2),to($btn-gradient-1)); background: linear-gradient(90deg,$btn-gradient-2,$btn-gradient-1); } } } /*========================== 69. Title style 2 ==========================*/ .te_title_2 { text-align: center; .te_title_sub_div { position: relative; display: inline-block; padding-left: 70px; &:before, &:after { content: ''; background:nth($f_color,19); position: absolute; top: 15px; height: 2px; left: 0; } &:before { width: 30px; margin-top: 6px; left: 20px; } &:after { width: 50px; } } .te_title_style2 { position: relative; display: block; padding-bottom: 10px; padding-right: 70px; &:before, &:after { content: ''; background:nth($f_color,19); position: absolute; top: 15px; height: 2px; right: 0; } &:before { width: 30px; margin-top: 6px; right: 20px; } &:after { width: 50px; } } } /*========================== 70. 4 columns style 5 ==========================*/ .te_col_5_title { margin-bottom: 0; font-weight: 600; letter-spacing: 1px; padding-left: 1.75rem; @include media-breakpoint-down(xs) { padding-left: 0px; margin-bottom: 0.5rem; } } .te_col_5_sub_title { line-height: 1; margin-bottom: 1rem; letter-spacing: 1px; padding-left: 1.75rem; } .te_col_5_main { padding: 0 20px; margin-bottom: 10px; img{ max-height:500px; } .te_4_col_content { text-align: center; background:nth($f_color,5); width: 85%; padding: 10px; margin: -30px auto 0; position: relative; @include transition(all, 0.3s); top:0; .te_s_5_img { @include transition(transform, 0.6s); transform-style: preserve-3d; img { max-height: 40px; } } p { line-height: 1.5; margin: 5px 0; @include line-clamp(2,45px); } .te_extra_btn { @include style(9,23,inherit,unset,uppercase); display: inline-block; i { margin-right:5px; } a { color:nth($f_color,23); } } } &:hover { .te_s_5_img { transform: rotateY(180deg); } .te_4_col_content { top:-4%; /* margin-top: -50px; @include media-breakpoint-down(md){ margin-top: -30px; } */ } } } /*========================== 71. 4 columns style 6 ==========================*/ .o_editable { .te_s_6_img_sec:before { content:unset !important; } } .te_col_6_main { img{ max-height: 300px; } >div { padding: 0 20px; margin-bottom: 10px; text-align: center; } .te_4_col2_content { text-align: left; padding: 0.5rem 1.5rem; span { @include style(9,23,inherit,unset,uppercase); } p { line-height: 1.5; font-weight: 600; font-size:nth($f_sizes,8); // @include line-clamp(2,53px); @include line-clamp(2,auto); } .te_extra_btn { @include style(9,23,inherit,unset,uppercase); display: inline-block; a { color:nth($f_color,23); } } } } /*========================== 72. 4 columns style 7 ==========================*/ .te_col_7_main { img{ max-height: 500px; } >div { padding: 0 20px; margin-bottom: 10px; } .te_4_col3_content { position: relative; .te_sub_div { position: absolute; bottom: 0; padding: 1rem; span { @include style(9,5,inherit,unset,uppercase); } p { line-height: 1.5; @include style(7,5); @include line-clamp(2,46px); } .te_extra_btn { @include style(9,5,inherit,unset,uppercase); display: inline-block; a { color:nth($f_color,5); } } } } } /*========================== 73. 2 columns style 4 ==========================*/ .te_2_col_style_4 { >section:first-child { @include animation(0s, 0.7s, fadeInLeft,ease-in,null,both); @include media-breakpoint-down(xs) { display: flex; padding: 0; margin-bottom: 20px; align-items: center !important; animation: unset; } } .te_s_4_img { img { max-height: 515px; } @include media-breakpoint-down(xs) { max-width: 50%; flex: 0 0 50%; padding: 0 15px; img { max-height: 211px; } } } .te_main_content { @include position(absolute, 35%, auto, auto, 15%); padding: 0 20px; width: 250px; @include media-breakpoint-down(xs) { max-width: 50%; flex: 0 0 50%; padding: 0 15px; @include position(relative, 0, auto, auto, 0); } .te_extra_btn, .te_extra_btn a, h4, p { color:nth($f_color,5); @include media-breakpoint-down(xs) { color:nth($f_color,3); } } } .te_img_txt { margin-bottom:30px; @include media-breakpoint-down(lg) { margin-bottom:20px; } &:first-child { @include animation(0s, 0.7s, animateslideInDown,ease-in,null,both); } &:last-child { margin-bottom:0; @include animation(0s, 0.7s, animateslideInUp,ease-in,null,both); } img { max-height: 242px; @include media-breakpoint-down(lg) { max-height: 220px; } } @include media-breakpoint-down(xs) { animation: unset !important; } } h4 { margin-bottom: 16px; font-weight: 600; } p { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.5; margin-bottom: 16px; } .te_extra_btn { @include style(18,6,inherit,null,uppercase); i { margin-right: 5px; font-size:nth($f_sizes,9); } a { color: nth($f_color,6); } } } @keyframes fadeInLeft { from { opacity: 0; transform: translate3d(-100%, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } /*========================== 74. 2 columns style 5 ==========================*/ .te_2_col_style_5 { >section:first-child { @include media-breakpoint-down(xs) { display: flex; padding: 0; margin-bottom: 20px; align-items: center !important; } } .te_s_5_img { img { max-height: 680px; } @include media-breakpoint-down(xs) { flex: 0 0 58.33%; max-width: 58.33%; padding: 0 15px; img { max-height: 280px; } } } .te_main_content { @include position(absolute,10%,10%,auto,10%); padding: 0 20px; text-align: center; @include media-breakpoint-down(xs) { flex: 0 0 41.67%; max-width: 41.67%; padding: 0 15px; @include position(relative, 0, auto, auto, 0); text-align: left; } .te_extra_btn, .te_extra_btn a, h4, p { color:nth($f_color,5); @include media-breakpoint-down(xs) { color:nth($f_color,3); } } } .te_img_txt { margin-bottom:25px; img { max-height: 210px; } @include media-breakpoint-down(xs) { margin-bottom:20px; img { max-height: 150px; } } &:last-child { margin-bottom:0; } } h4 { margin-bottom: 16px; font-weight: 600; } p { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.5; margin-bottom: 16px; } .te_extra_btn { @include style(18,6,inherit,null,uppercase); i { margin-right: 5px; font-size: nth($f_sizes,9); } a { color: nth($f_color,6); } } } /*===================== 75. Banner with slider =====================*/ .te_banner_slider { .te_banner_heading_small { font-size:nth($f_sizes,10); font-weight: 600; @include media-breakpoint-down(xs) { font-size:nth($f_sizes,7); } } .te_banner_heading_big { font-size:nth($f_sizes,13); @include media-breakpoint-down(sm) { font-size: 2.5rem; } @include media-breakpoint-down(xs) { // font-size:nth($f_sizes,15); font-size:1.44rem; } } .te_banner_content { font-size:nth($f_sizes,7); @include media-breakpoint-down(xs) { font-size:nth($f_sizes,2); display:none; } } .te_banner_slider_info { text-align: center; } .te_banner_slider_content { @include position(relative); .owl-nav { @include position(absolute,null,null,0); .owl-prev,.owl-next { background: nth($f_color,22); color:nth($f_color,5); width: 30px; .fa { font-size:nth($f_sizes,15); font-weight: 600; } } } } } /*==================== 76. Offer Timer Style 3 ====================*/ .te_offer_s3_section { text-align: center; background-position: center; background-repeat: no-repeat; background-size: auto; .te_offer_s3_heading { font-size:nth($f_sizes,15); @include position(relative); padding-bottom: 15px; @include media-breakpoint-down(xs) { font-size:nth($f_sizes,12); } &:after { content: ""; @include position(absolute,unset,0,0,0); border: 1px solid $border-color; width: 15%; text-align: center; margin: 0px auto; @include media-breakpoint-down(xs){ bottom: 15px; } } } .te_offer_s3_text { font-size:nth($f_sizes,19); display: inline-block; } .te_offer_s3_discount { display: inline-block; @include style(7,4); text-decoration: line-through; padding-left: 5px; } .js_timer_div { .rounded_digit { border: 0; border-radius: unset; font-weight: unset; width: unset; height: unset; box-shadow: unset; background: nth($f_color,27); .te_days_hr_min_sec_digit { font-size:nth($f_sizes,15); @include media-breakpoint-down(xs) { font-size:nth($f_sizes,12); } } } .snippet_right_timer_div { text-align: center !important; .col-lg-3.col-md-2 { max-width: 15%; @include media-breakpoint-down(xs) { max-width: 25%; } .rounded_digit::before { content: ':'; float: right; font-size:nth($f_sizes,19); padding-top: 15px; @include media-breakpoint-down(xs) { padding-top:5px; } } &:last-child { .rounded_digit:before { content:unset; } } } } } @include media-breakpoint-down(md) { margin-top:25px; } } .te_offer_div { .row{ padding-top: 0px !important; padding-bottom: 0px !important; } } .te_offer_s3_img { position: relative; .te_offer_s3_img_before { background: rgba(nth($f_color,19),0.2); display: block; @include position(absolute,12%,null,12%,35px); width: 60%; z-index: -1; @media (min-width: 1499.98px){ left: 120px; } @include media-breakpoint-down(md) { left: 0px; } @include media-breakpoint-down(xs) { content:unset; } } img { max-height: 500px; @include media-breakpoint-up(lg) { margin-left: auto; } @include media-breakpoint-down(lg) { margin: 0px auto; } @include media-breakpoint-down(sm) { margin-left: auto; margin-right: 0; } @include media-breakpoint-down(xs) { margin: 0px auto; } } .te_vertical_line { transform: rotate(180deg); writing-mode: vertical-rl; @include position(absolute,0); font-size:nth($f_sizes,19); @media (min-width: 1499.98px){ left: 170px; } @media (min-width: 1299.98px) and (max-width: 1499.98px){ left: 65px; } @media (min-width: 1199.98px) and (max-width: 1299.98px){ left: 40px; } @media (min-width: 991.98px) and (max-width: 1199.98px){ left: -40px; } @include media-breakpoint-down(md) { left: 65px; } @include media-breakpoint-down(sm) { left: 50px; } @include media-breakpoint-down(xs) { display: none; } } } /*========================== 77. Title style 3 ==========================*/ .te_title_3 { text-align: center; .te_title_sub_div { position: relative; display: inline-block; padding-left: 70px; &:before, &:after { content: ''; background:nth($f_color,19); @include position(absolute,15px,null,null,0); height: 2px; } &:before { width: 30px; margin-top: 6px; left: 20px; } &:after { width: 50px; } } .te_title_style3 { position: relative; display: block; padding-bottom: 10px; padding-right: 70px; background: -webkit-gradient(linear,left top,right top,from($btn-gradient-2),to($btn-gradient-2)); background: linear-gradient(90deg,$btn-gradient-2,$btn-gradient-1); background-clip: border-box; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-box-decoration-break: clone; &:before, &:after { content: ''; background:nth($f_color,19); @include position(absolute,15px,0); height: 2px; } &:before { width: 30px; margin-top: 6px; right: 20px; } &:after { width: 50px; } } } /*======================== 78. Slider Style 14 ===================*/ .te_slider_13_main .te_slider_13_sub { width: 100%; min-height: 100vh !important; vertical-align: middle; background-position: 100%; } /*========================== 79. Title style 4 ==========================*/ .te_title_4 { text-align: center; .te_title_style4 { position: relative; display: inline-block; padding-bottom: 10px; &:before { content: ""; @include position(absolute,null,35%,0,35%); background:nth($f_color,19); height: 3px; } } } /*====================== =======================*/ .o_editable { .banner_video { pointer-events: none; } } /*======================== 80. Slider Style 14 ====================*/ .te_s14_img{ transform: scale(1.1); img{ max-height: 800px; margin-left:9%; @include media-breakpoint-down(md){ max-height: 450px; margin:0px auto; } @include media-breakpoint-down(xs){ max-height: 350px; } } } .slider_14_content{ @include media-breakpoint-down(md){ margin:0px auto; .s_btn{ padding-bottom:32px; } } .te_s14_small_heading{ &:after{ width: 90px; height: 2px; background:nth($f_color,19); margin-left: 15px; content: ''; display: inline-block; vertical-align: middle; @include media-breakpoint-down(sm){ width: 60px; } @include media-breakpoint-down(xs){ content: unset; } } } div{ font-size:3rem; text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.68); @include media-breakpoint-down(md){ font-size:2rem; } @include media-breakpoint-down(xs){ font-size:1.2rem; } } } .te_s14_banner_bg{ padding: 8% 0 5% 0; @include media-breakpoint-down(lg){ padding: 15% 0 7% 0; } @include media-breakpoint-down(md){ padding: 20% 0 12% 0; } @include media-breakpoint-down(xs){ padding: 25% 0 15% 0; } .container{ max-width: 1600px; } } /*===================== 81. 2 Column Style 6 =====================*/ .te_2_col_s6{ padding: 25px 0; border-bottom: 1px dashed #cccccc; position:relative; margin: 0 15px; &:last-child{ border:0; @include media-breakpoint-down(md){ border-bottom: 1px dashed #cccccc; } } .te_offer_s6_name{ color:nth($f_color,3); @include text-ellipsis; width: 75%; margin:0; } p{ display: inline-block; width: 80%; color:nth($f_color,15); } .te_offer_s6_price{ font-weight:600; font-size:nth($f_sizes,10); color:nth($f_color,19); float:right; @include media-breakpoint-down(xs){ font-size:nth($f_sizes,4); } } .label_inner_div{ padding: 0; @include position(absolute,33px,0); background: rgba(165, 128, 109, 0.7); z-index: 1; @include media-breakpoint-down(xs){ top:29px; } .te_offer_label_name{ font-size:nth($f_sizes,18); padding: 2px 8px !important; color:nth($f_color,5); .fa{ margin-right: 5px; font-size: 0.625rem; } } } } .te_2_col_main_heading_s6{ text-align: center; font-size: 2.5rem; padding-bottom: 10px; @include media-breakpoint-down(sm){ font-size: 2rem; } } .te_2_col_sub_heading_s6{ text-align: center; font-size: 1.5rem; padding-bottom: 5%; color:nth($f_color,15); @include media-breakpoint-down(sm){ font-size: 1rem; } } /*========================== 82. Customer Style 5 ===================*/ .te_customer_testimonial_s5{ text-align:center; background: #ededed; .te_customer_testimonial{ font-size:nth($f_sizes,12); color:nth($f_color,19); @include media-breakpoint-down(xs){ font-size:nth($f_sizes,21); } } .te_what_customer_saying_s5{ font-size:nth($f_sizes,15); color:nth($f_color,3); padding-top: 15px; font-weight: 600; @include media-breakpoint-down(xs){ font-size:nth($f_sizes,12); } } .te_customer_caption_s5{ font-size:nth($f_sizes,1); color:nth($f_color,4); padding-top: 20px; } .te_customer_testimonial_item{ padding-bottom:30px; .te_cutomer_item_bg{ background:nth($f_color,5); text-align: left; padding: 20px; @include media-breakpoint-down(xs){ padding: 20px 20px 60px 20px; .col-lg-3{ vertical-align: top; } } .col-lg-9{ float: right; padding-right: 0; } img{ max-height:130px; } p{ @include line-clamp(3,75px); margin-bottom: 10px; line-height: 165%; color:nth($f_color,14); @include media-breakpoint-down(sm){ height:68px; } } .te_customer_name_s5{ margin-bottom: 3px; } .te_customer_position_s5{ color:nth($f_color,19); } } } } /*==================== 83. Banner Style 3 ==================*/ .te_banner_s3{ .te_banner_s3_content{ margin: 10rem 0 12rem 0; @include media-breakpoint-down(xs){ margin: 0rem 0 0rem 0; } .te_banner_sub_heading{ font-size: 5rem; margin-bottom: 5px; @include media-breakpoint-down(sm){ font-size: 4rem; } @include media-breakpoint-down(xs){ font-size: 2.5rem; } } .te_banner_main_heading{ font-size: 5rem; margin-bottom: 15px; @include media-breakpoint-down(sm){ font-size: 4rem; } @include media-breakpoint-down(xs){ font-size: 2.5rem; } } p{ font-size: 1.2875rem; @include media-breakpoint-down(sm){ font-size: 1.1875rem; } @include media-breakpoint-down(xs){ font-size: 0.875rem; } } } .te_category_banner_block{ margin-top:-4.5%; margin-bottom: 32px; @include media-breakpoint-down(lg){ margin-top:5%; } .te_banner_categ_block{ background:#ededed; border-radius: 20px; @include transition(all,0.2s,ease); @include media-breakpoint-down(lg){ margin-bottom: 30px; } @include media-breakpoint-down(xs){ margin-bottom: 20px; } .te_categ_content{ background-position: 100%; border-radius: 20px; a{ padding: 40px 30px; display:block; font-size: inherit; font-weight: 600; vertical-align: middle; color:nth($f_color,3); text-decoration: none; @include media-breakpoint-down(lg){ padding: 50px 30px; } @include media-breakpoint-down(xs){ padding: 15px 30px; } .te_banner_categ_name{ @include media-breakpoint-down(xs){ line-height: 32px; vertical-align: middle; } } } } img{ max-height:60px; margin-right: 20px; @include media-breakpoint-down(xs){ vertical-align: middle; } } &:hover{ background:nth($f_color,5); box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.15); @include media-breakpoint-down(lg){ transform:unset; } } } } .container{ padding:0; @include media-breakpoint-down(sm){ width:90%; } } } /*================= 84. Coming Soon Style 1 ===============*/ .te_coming_soon_bg{ @include position(absolute,0,0,0,0); z-index: 1034; background-color:nth($f_color,5); .container{ height:100%; @include media-breakpoint-down(xs){ width:90%; } } .te_coming_soon_row{ align-items: center; height: 100%; .te_coming_soon_txt{ text-align: center; max-width: 650px; position: relative; display: inline-block; @include media-breakpoint-down(lg){ margin:0px auto; } .te_coming_soon_heading{ font-size:3rem; @include media-breakpoint-down(xs){ font-size: 2.5rem; } } .te_coming_soon_desc{ font-size:1.2875rem; padding-top: 25px; @include media-breakpoint-down(xs){ font-size: 1rem; } } .te_coming_soon_social_icon{ padding-top: 25px; .btn{ font-size: 1.5rem; padding: 0 15px; color: nth($f_color,19); @include media-breakpoint-down(xs){ padding: 0 10px; } @include transition(all,0.4s,ease); &:hover{ transform: scale(1.2); } } } .snippet_right_timer_div{ text-align: center !important; .col-lg-3.col-md-2{ max-width: 20%; @include media-breakpoint-down(xs){ max-width: 25%; } .rounded_digit{ border: 0; border-radius: unset; font-weight: unset; width: unset; height: unset; box-shadow: unset; background:transparent; &:before{ content: ':'; float: right; font-size: 1.5rem; padding-top: 15px; } } &:last-child { .rounded_digit:before { content:unset; } } .te_days_hr_min_sec_digit{ font-size:3rem; @include media-breakpoint-down(xs){ font-size: 2.5rem; } } } } } } } /*================== 85. 3 Column Style 13 =================*/ .te_3_col_s13{ padding: 120px 0; .te_left_img{ text-align: center; img{ max-height: 610px; } @include media-breakpoint-down(lg){ padding-bottom:8%; } } .te_right_img{ text-align: center; img{ max-height: 610px; } @include media-breakpoint-down(lg){ padding-top:10%; } } .te_middle_img{ padding: 0 25px; .te_middle_text_content{ padding: 9% 8% 15% 8%; text-align: center; box-shadow: 0 25px 50px 0 rgba(0,0,0,.08); position: relative; .te_sub_heading_s13{ font-size: 1.5rem; padding-bottom: 30px; } .te_main_heading_s13{ font-size: 2.3rem; font-weight: 600; line-height: 140%; @include media-breakpoint-down(xs){ font-size: 2rem; } } .te_txt_content_s13{ font-size: 1rem; line-height: 150%; padding-top: 35px; } .s_btn{ width: 100%; position: absolute; bottom: -8%; margin: 0px auto; right: 0; .btn{ padding: 0.9rem 2.2rem; .te_play_icon{ padding-right: 6px; } } } } } } /*===================== 86. Counting Numbers ===================*/ .te_numbers{ padding:100px 0; #te_counter { margin: 0px auto; display: inline-block; text-align: center; @include media-breakpoint-down(lg){ padding-bottom:15px; } .te_count_value { font-size: 2.5rem; line-height: 100px; } p{ font-size: 1.3rem; } } } /*=================== 87. Category Slider =====================*/ section.te_category_slider { @include media-breakpoint-down(xs){ padding-bottom: 16px !important; } } /*========================== 88. Title style 5 ==========================*/ .te_title_5 { text-align: center; .te_subtitle_top_style5{ margin-bottom: 0; color: #989898; } .te_title_style5 { color: #2d2a2a; margin-bottom: 0; } .te_subtitle_bottom_style5{ color: #777; } } /*======================= ODOO SNIPPETS ==================================*/ /*===================== 01. Title Snippet =================================*/ /*.te_s_title_default { font-weight: bold; }*/ /*=========================== 02. Picture =====================================*/ .te_picture_img img{ max-height: 450px; } @include media-breakpoint-down(sm) { .s_title > h2 > font > span { font-size: nth($f_sizes,19) !important; } } /*==================== 03. Features (Three Columns) ========================*/ .te_features_link { font-size:nth($f_sizes,4); display: block; } .te_feature_flip { @include media-breakpoint-down(sm) { text-align: center; margin-bottom: 20px; } .te_menu_flip_box_inner { color: nth($f_color,19); } .te_feature_content { @include media-breakpoint-down(sm) { width: 70%; margin:0px auto; } } .te_feature_btn { span { @include style(18,13); font-weight:600; padding-right: 8px; } i { @include transition(all,0.5s,ease); @include style(18,13); } &:hover { i { padding-left: 6px; color: nth($f_color,19); } span { color: nth($f_color,19); } } } } /*=================== 04. Accordion =================================*/ .te_section_accordion{ .card { border: nth($f_color,27); border-bottom: nth($f_color,27) !important; } .accordion .card .card-header { background-color: nth($f_color,27); padding: 16px 0px; font-size:nth($f_sizes,7); &:before { content: "\2012"; } } .accordion .card .card-header.collapsed::before{ content: "\002B"; } } /*====================== 05. Tabs Snippet ================================*/ .te_tabs_design { .card { border: nth($f_color,27); .card-header{ padding: 0px 9px 10px 10px; background-color: nth($f_color,27); } .nav-tabs .nav-item .nav-link { font-size:nth($f_sizes,2); border-left: 1px solid $border-color; border-right: 1px solid $border-color; border-top: 1px solid $border-color; cursor: pointer; &:hover{ border-bottom: nth($f_color,27); } } .nav-tabs .nav-link.active { border-bottom: 1px solid nth($f_color,5); border-left: 1px solid $border-color; border-right: 1px solid $border-color; border-top: 3px solid nth($f_color,19); } .card-body{ border-left: 1px solid $border-color; border-bottom: 1px solid $border-color; border-right: 1px solid $border-color; .tab-pane { h3{ border-bottom: 1px solid $border-color; padding-bottom: 16px; } p{ padding-top: 16px; } } } } } /*============================= 06. Features Grid ===============================*/ .te_features_design { h4{ margin-bottom: 2px; font-weight: bold; } h5{ border-bottom: 1px solid $border-color; padding-bottom: 4px; margin-bottom: 0; } .te_space_text { padding-bottom:20px; } .te_s_features_grid_content{ margin-top: 4px; overflow: hidden; vertical-align: middle; @media (max-width:438px) { margin-top: 12px; } h5{ font-weight:bold; border: nth($f_color,27); } p{ font-size:nth($f_sizes,2); line-height:normal; } } @include media-breakpoint-down(md) { .te_features_s { padding-top:20px; } } .fa.rounded.fa-2x,.fa.rounded-circle.fa-2x { width: 3rem; height: 3rem; line-height: 3rem; font-size: nth($f_sizes,4); } div[data-name="Box"] { padding-bottom: 8px !important; } } /*================= 07. Pricing (Beginner/Professional/Expert) 4(Columns) ========================*/ .pricing_snippet_heading { @include style(12,19,inherit,unset) @include spacing(0px,0px); } .te_pricing_title { color: nth($f_color,5); @include spacing(0px,0px); } .te_heading_price { @include style(11,3,null,null) } .te_price_currency { @include style(10,3,null) @include position(relative,unset,0,30px,10px) } .li_text { @include style(1,28,inherit) @include border(0 0 1px 0,17,dotted) } .te_cost_validity { @include style(7,28,inherit) } .te_common_border_bottom { @include border(0 0 2px 0,18,solid) } .pro_border_bottom { @include border(0 0 2px 0,19,solid) } .te_four_column_title { color: nth($f_color,21); @include spacing(0px,null); } .te_pricing_box { @include border-radius(5px) @include box-shadow(0 10px 30px rgba(0,0,0,.03)) @include transition(all,.3s) @include media-breakpoint-down(xs){ margin-bottom:15px; } &:hover { @include border(1px,19,solid) transform: scale(1.03); box-shadow: 0 3px 12px #ccc; @include media-breakpoint-down(xs){ transform: unset; } } } /*============================ 08. Effect [Parallax] ==============================*/ .te_slide_title { .te_slide_title_text { @include style(20,5); @include media-breakpoint-down(xs) { @include style(15,5); } } .te_slide_sub_title_text { @include style(4,5); } hr{ border-top: 1px solid nth($f_color,5); width: 5%; } } /*========================== 09. Effect [Quotes] ========================================*/ .te_quotes_design { p{ padding-bottom:20px; } } /*============================ 10. Banner ========================================*/ .te_banner_heading { font-family: inherit; font { $f_size: 1.125rem; font-size:$f_size; @include media-breakpoint-down(sm) { @if $f_size == 1.125rem { @include style(4,10); line-height: 180%; } } } } .te_banner_subheading { font-size:nth($f_sizes,2); } .te_banner_s2{ .te_img_hover_overflow { @include media-breakpoint-down(xs){ width:100%; } img{ max-height:366px; } } .te_img_height{ max-width: 500px; @include media-breakpoint-down(xs){ max-width: 100%; } } } .te_jumbotron_bg { box-shadow: 0 3px 9px #ccc; background-color:rgba(255, 255, 255, 0.9); } /*================= 11. Carousel ========================*/ .carousel_heading { color: nth($f_color,5); font-family: inherit; line-height: normal; @include spacing(0px,0px); } .carousel_content { font-size:nth($f_sizes,8); @include media-breakpoint-down(sm) { font-size:nth($f_sizes,2); } } .te_ts_style_7_inner { .oe_custom_bg { height: 65vh !important; width: 100%; min-height: 100vh !important; vertical-align: middle; background-position: 100%; @media (min-width:1600px) { height: 100vh !important; } @include media-breakpoint-down(md){ height: 50vh !important; } @include media-breakpoint-down(sm){ height: 40vh !important; } @include media-breakpoint-down(xs){ height: 20vh !important; } } .te_t_slider_sm_content { position: absolute; top:25%; transform: translateY(-50%); @include media-breakpoint-down(sm){ width:90%; margin:0px auto; top:18%; } .s_btn{ @include media-breakpoint-down(md){ padding-top:0 !important; } @include media-breakpoint-down(sm){ margin-top: 15px !important; } } } } /* Slider Style 7 inner content specific */ .te_ts_style_7_inner .oe_img_bg > * { position: unset; } /*================= 12. Text-Image ========================*/ .te_txt_img_s1 img{ max-height: 500px; } /*================= 13. Image-Text ========================*/ .te_img_txt_s1 img{ max-height: 407px; } /*================= 14. 3 Column ========================*/ .te_3col_img img{ max-height: 256px; } /*==================== ODOO SNIPPETS END ==========================*/ /*============================== CAROUSEL ANIMATION (FULL WIDTH CONTENT-IMAGE) =========================*/ @keyframes animatezoom{from{transform: scale(0); opacity: 0;}to{transform: scale(1); opacity: 1;}} /*====================== 3 COLUMNS ===========================*/ @media (max-width:767.98px) { .s_carousel.s_carousel_rounded .carousel-control-prev-icon::before, .s_carousel.s_carousel_rounded .carousel-control-next-icon::before, .s_quotes_carousel.s_carousel_rounded .carousel-control-prev-icon::before, .s_quotes_carousel.s_carousel_rounded .carousel-control-next-icon::before { width: 2rem; height: 2rem; line-height: 2rem; font-size:nth($f_sizes,2) } .s_carousel.s_carousel_rounded .carousel-control-prev, .s_quotes_carousel.s_carousel_rounded .carousel-control-prev { margin-left: 0.5rem; } .s_carousel.s_carousel_rounded .carousel-control-next, .s_quotes_carousel.s_carousel_rounded .carousel-control-next { margin-right: 0.5rem; } } /*============================= Customer Carousel 1 =====================================*/ /*--------------- STATIC CAROUSELS --------------*/ .common_carousel_emp .carousel-item{ margin-right: 0; } .common_carousel_emp:not(.carousel-fade){ .carousel-control-prev, .carousel-control-next { width :2%; } @media (min-width: 576px) and (max-width: 991.98px) { .carousel-inner { .active { display: block; + .carousel-item { display: block; + .carousel-item { display: block; } } } .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) { transition: none; + .carousel-item { transition: none; + .carousel-item { transition: none; } } } .carousel-item-next { @include position(relative); @include transform(translate3d(0, 0, 0)) } .active.carousel-item + .carousel-item + .carousel-item { @include position(absolute,0,-50%); z-index: -1; display: block; visibility: visible; } } /* left or forward direction */ .active.carousel-item-left + .carousel-item-next.carousel-item-left { @include position(relative); @include transform(translate3d(-100%, 0, 0)) visibility: visible; } .carousel-item-next.carousel-item-left + .carousel-item { @include position(relative); @include transition(transform,0.6s,ease) @include transform(translate3d(-100%, 0, 0)) visibility: visible; } /* for thest right hidden item must be also position for animations */ .carousel-inner .carousel-item-prev.carousel-item-right { @include position(absolute,0,unset,unset,0); z-index: -1; display: block; visibility: visible; } .active.carousel-item-right + .carousel-item-prev.carousel-item-right { @include position(relative); @include transform(translate3d(100%, 0, 0)) visibility: visible; display: block; } .carousel-item-prev.carousel-item-right + .carousel-item, .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item { @include position(relative); @include transition(transform,0.6s,ease) @include transform(translate3d(100%, 0, 0)) visibility: visible; display: block; } } @media (min-width: 992px) { .carousel-inner { .active { display: block; + .carousel-item { display: block; + .carousel-item { display: block; + .carousel-item { display: block; } } } } .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) { transition: none; + .carousel-item { transition: none; + .carousel-item { transition: none; + .carousel-item { transition: none; } } } } .carousel-item-next { @include position(relative); @include transform(translate3d(0, 0, 0)) } .active.carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item { @include position(absolute,0,-25%) z-index: -1; display: block; visibility: visible; } } .active.carousel-item-left + .carousel-item-next.carousel-item-left { @include position(relative); @include transition(transform,0.6s,ease) @include transform(translate3d(-100%, 0, 0)) visibility: visible; } .carousel-item-next.carousel-item-left + .carousel-item, .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item, .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item, .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item + .carousel-item, { @include position(relative); @include transition(transform,0.6s,ease) @include transform(translate3d(-100%, 0, 0)) visibility: visible; } .carousel-inner .carousel-item-prev.carousel-item-right { @include position(absolute,0,unset,unset,0) z-index: -1; display: block; visibility: visible; } .active.carousel-item-right + .carousel-item-prev.carousel-item-right { @include position(relative); @include transition(transform,0.6s,ease) @include transform(translate3d(100%, 0, 0)) visibility: visible; display: block; } .carousel-item-prev.carousel-item-right + .carousel-item, .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item, .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item, .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item { @include position(relative); @include transition(transform,0.6s,ease) @include transform(translate3d(100%, 0, 0)) visibility: visible; display: block; } .carousel-item.active ~ .carousel-item-prev.carousel-item-right { text-align: left !important; } } } .common_carousel_emp.carousel.carousel-fade { .carousel-control-prev, .carousel-control-next { width :2%; } .carousel-item.active, .carousel-item.active + .carousel-item, .carousel-item.active + .carousel-item + .carousel-item, .carousel-item.active + .carousel-item + .carousel-item + .carousel-item, { @include transform(translateX(0)) @include transform(translate3d(0, 0, 0)) } @media (min-width: 576px) and (max-width: 991.98px) { .carousel-inner { .carousel-item.active { display: block; + .carousel-item { display: block; opacity: 1; } } } .carousel-item-prev.carousel-item-right + .carousel-item, .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item { opacity: 0; transition-duration: 100ms; transition-property: opacity; } .active.carousel-item-left, .active.carousel-item-left + .carousel-item-next.carousel-item-left{ opacity: 0; transition-duration: 100ms; transition-property: opacity; } } @media (min-width: 992px) { .carousel-inner { .carousel-item.active { display: block; + .carousel-item { display: block; opacity: 1; + .carousel-item { display: block; opacity: 1; + .carousel-item { display: block; opacity: 1; } } } } } .carousel-item-prev.carousel-item-right + .carousel-item, .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item, .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item, .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item { opacity: 0; transition-duration: 100ms; transition-property: opacity; } .active.carousel-item-left, .active.carousel-item-left + .carousel-item-next.carousel-item-left, .active.carousel-item-left + .carousel-item-next.carousel-item-left + .carousel-item, .active.carousel-item-left + .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item { opacity: 0; transition-duration: 100ms; transition-property: opacity; } } } .te_animation_ept { we-collapse { overflow: scroll !important; } } /* For snippet animation */ body { overflow-x:hidden; } .te_footer_map { max-height: 220px; max-width: 240px; overflow: hidden; @include media-breakpoint-down(sm){ max-width:300px; } #map { padding-top: 0 !important; padding-bottom: 0 !important; } .mapouter { max-height: 220px; max-width: 240px; padding:5px; width:auto; @media (min-width: 992px) and (max-width: 1200px) { max-width: 190px; } @include media-breakpoint-down(sm){ max-width:300px; } } } .te_s3_map { &.te_footer_map { max-width: 340px; max-height: 280px; overflow: hidden; margin-bottom: 10px; #map { padding-top: 0px !important; padding-bottom: 0px !important; } .mapouter { height: 290px; max-width: 340px; max-height: 280px; } @media (min-width: 1500px) { max-width: 400px; .mapouter { max-width: 400px; width:auto; } } } } .te_s6_map { &.te_footer_map { max-width: 360px; max-height: 290px; overflow: hidden; .mapouter { height: 300px; max-width: 360px; max-height: 290px; width:auto; } @media (min-width: 992px) and (max-width: 1300px) { max-width: 265px; .mapouter { max-width: 265px; } } } } // slider full screen 5 styles .te_slider_full_screen_5{ .carousel-control-prev,.carousel-control-next{ @include media-breakpoint-down(xs) { display:block !important; top: 27%; } } } // slider full screen 1 styles .te_slider_full_screen_1{ .oe_custom_bg{ @include media-breakpoint-down(xs) { background-size: contain; padding: 20px 0 !important; } } } // slider full screen 2 styles .te_slider_full_screen_2{ .oe_custom_bg{ @include media-breakpoint-down(xs) { background-size: contain; padding: 20px 0 !important; } } }