/*------------------------------------- PAGE TITLE ---------------------------------------*/ #page-title { width: 100%; position: relative; overflow: hidden; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } /*Page Title*/ .page-title-wrap { color: @page_title_color; background-color: @page_title_bg_color; } .page-title-inner { padding-top: @page_title_padding_top; padding-bottom: @page_title_padding_bottom; } .page-title-margin { margin-bottom: @page_title_margin_bottom; } /*Single Blog*/ .single-blog-title-wrap { color: @single_blog_title_color; background-color: @single_blog_title_bg_color; } .single-blog-title-inner { padding-top: @single_blog_title_padding_top; padding-bottom: @single_blog_title_padding_bottom; } .single-blog-title-margin { margin-bottom: @single_blog_title_margin_bottom; } /*Single Product*/ .single-product-title-wrap { color: @single_product_title_color; background-color: @single_product_title_bg_color; } .single-product-title-inner { padding-top: @single_product_title_padding_top; padding-bottom: @single_product_title_padding_bottom; } .single-product-title-margin { margin-bottom: @single_product_title_margin_bottom; } /*Single Event*/ .single-event-title-wrap{ color: @single_event_title_color; background-color: @single_event_title_bg_color; } .single-event-title-inner { padding-top: @single_event_title_padding_top; padding-bottom: @single_event_title_padding_bottom; } .single-event-title-margin { margin-bottom: @single_event_title_margin_bottom; } /*Blog*/ .archive-title-wrap { color: @archive_title_color; background-color: @archive_title_bg_color; } .archive-title-inner { padding-top: @archive_title_padding_top; padding-bottom: @archive_title_padding_bottom; } .archive-title-margin { margin-bottom: @archive_title_margin_bottom; } /*Product*/ .archive-product-title-wrap { color: @archive_product_title_color; background-color: @archive_product_title_bg_color; } .archive-product-title-inner { padding-top: @archive_product_title_padding_top; padding-bottom: @archive_product_title_padding_bottom; } .archive-product-title-margin { margin-bottom: @archive_product_title_margin_bottom; } /*Event*/ .archive-event-title-wrap { color: @archive_event_title_color; background-color: @archive_event_title_bg_color; } .archive-event-title-inner { padding-top: @archive_event_title_padding_top; padding-bottom: @archive_event_title_padding_bottom; } .archive-event-title-margin { margin-bottom: @archive_event_title_margin_bottom; } #page-title .container { position: relative; } #page-title .pt-center .m-title{ h2{ font-size: 42px; margin-bottom: 15px; } p.s-font{ font-size: 14px; letter-spacing: 0.2em; } } #page-title .pt-bottom .m-title{ width: 375px; text-transform: uppercase; display: inline-block; vertical-align: middle; background-color: @p_color; color: #fff; padding: 20px 0; position: relative; bottom: 0; left: 15px; z-index: 2; min-height: 88px; h2{ position: relative; z-index: 3; } &:before{ content: ""; display: block; position: absolute; background-color: @p_color; height: 100%; top: 0; bottom: 0; left: -9999px; right: 100%; } &:after{ content: ""; display: block; width: 80px; position: absolute; background-color: @p_color; height: 100%; top: 0; bottom: 0; right: -35px; transform: skewX(25deg); } } #page-title h2 { margin: 0; font-size: 32px; font-weight: 500; letter-spacing: 0.05em; line-height: 48px; max-height: 96px; overflow: hidden; -ms-word-wrap: break-word; word-wrap: break-word; } #page-title p { letter-spacing: 0.1em; line-height: 1.2; margin-bottom: 0; } .page-title-size-lg h2 { font-size: 60px; font-weight: bold; } .page-title-size-lg p { font-size: 20px; margin-top: 10px; } .page-title-size-md h2 { font-size: 32px; font-weight: 400; } .page-title-size-md p { font-size: 15px; margin-top: 15px; } .page-title-wrap-bg { background-repeat: no-repeat; background-position: center center; background-size: cover; position: absolute; width: 100%; height: 100%; z-index: -2; top:0; left: 0; } .page-title-parallax { background-repeat: no-repeat; background-size: cover; position: absolute; width: 100%; height: 100%; z-index: -2; top: 0; left:0; } .page-title-border-bottom { border-bottom: 1px solid @border_color; } /*------------------------------------- BREADCRUMB ---------------------------------------*/ ul.breadcrumbs { margin: 0; list-style-type: none; display: inline-block; padding: 0; vertical-align: middle; font-size: 0; text-transform: uppercase; i{ font-size: 15px; } } ul.breadcrumbs li { display: inline; } ul.breadcrumbs li:last-child span{ color: @p_color; } ul.breadcrumbs li a, ul.breadcrumbs li span { line-height: 1.2; font-size: 15px; letter-spacing: 0.02em; vertical-align: middle; color: #fff; } ul.breadcrumbs li + li:before { font: normal normal normal 14px/1 FontAwesome; content: "\f105"; display: inline; padding: 0 15px; font-size: 13px; vertical-align: middle; color: #fff; } .pt-center .breadcrumbs-wrap { position: absolute; bottom: 0; left: 15px; padding: 5px 15px; background-color: rgba(0,0,0,.2); ul.breadcrumbs { i{ color: @s_color; } } ul.breadcrumbs li:last-child span{ color: @s_color; } } .pt-bottom .breadcrumbs-wrap { font-size: 0; display: inline-block; background-color: @s_color; z-index: 1; position: absolute; bottom: 0; padding: 20px 0px 20px 88px; left: 375px; right: 65px; max-height: 88px; &:after{ content: ""; display: block; position: absolute; right: -25px; width: 55px; background-color: @s_color; height: 100%; top: 0; bottom: 0; transform: skewX(30deg); } .breadcrumbs-inner{ position: relative; z-index: 2; } } .breadcrumbs-inner { display: inline-block; } .breadcrumbs-wrap label { text-transform: uppercase; font-weight: bold; margin: 0 10px 0 0; vertical-align: middle; font-size: 13px; } .breadcrumbs-wrap.float .breadcrumbs-inner { background-color: rgba(0,0,0,0.6); padding: 10px 15px; } .breadcrumbs-wrap.float label:before { content: ""; display: inline-block; width: 8px; height: 8px; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; margin-right: 10px; vertical-align: middle; margin-top: -2px; } .page-title-size-lg .breadcrumbs-wrap.normal { margin-top: 25px; } .page-title-size-md .breadcrumbs-wrap.normal { margin-top: 20px; } #page-title .breadcrumbs-wrap h1{ line-height: 1.2; font-size: 15px; letter-spacing: 0.02em; vertical-align: middle; color: #fff; font-weight: inherit; max-height: none; overflow: inherit; font-family: inherit; display: inline-block; color: @p_color; margin: inherit; } @media (max-width: 991px) { #page-title .pt-bottom .m-title{ position: relative; left: 0; } #page-title .pt-bottom{ .breadcrumbs-wrap{ left: inherit!important; position: relative!important; padding-left: 68px!important; width: 100%; &:before{ content: ""; display: block; position: absolute; height: 100%; width: 999px; top: 0; right: 100%; background-color: @s_color; } } } } @media (max-width: 767px) { .page-title-size-lg h2 { font-size: 32px; } .page-title-size-lg p { font-size: 15px; } .page-title-breadcrumbs-float .page-title-inner, .page-title-breadcrumbs-float .archive-title-inner, .page-title-breadcrumbs-float .archive-product-title-inner{ padding-top: 70px !important; padding-bottom: 40px !important; } .page-title-breadcrumbs-normal .page-title-inner, .page-title-breadcrumbs-normal .archive-title-inner, .page-title-breadcrumbs-normal .archive-product-title-inner{ padding: 70px 0; } .page-title-size-lg .breadcrumbs-wrap.normal { margin-top: 15px; } .archive-title-margin, .archive-product-title-margin, .page-title-margin { margin-bottom: 60px; } .page-title-parallax { background-position: center center !important; } #page-title .pt-bottom{ .m-title{ width: 100%!important; &:after{ left: 100%!important; transform: skewX(0)!important; background-color: rgba(red(@p_color), green(@p_color), blue(@p_color), 0.9)!important; } background-color: rgba(red(@p_color), green(@p_color), blue(@p_color), 0.9)!important; } .breadcrumbs-wrap{ left: inherit!important; right: inherit!important; position: relative!important; padding: 20px 20px 20px 0!important; background-color: @s_color; width: 100%; max-height: 136px!important; &:after{ left: 100%!important; transform: skewX(0)!important; background-color: @s_color; } } } } @media (max-width: 480px) { .breadcrumbs-wrap label { display: none; } }