/*----------------------------------------------------------------------------------- pagetitle.less -----------------------------------------------------------------------------------*/ /* ---------------------------------------------------------------- Page Title -----------------------------------------------------------------*/ #page-title { position: relative; padding: @page-title-padding 0; background-color: @page-title-bg; border-bottom: 1px solid #EEE; .container { position: relative; } h1 { padding: 0; margin: 0; line-height: 1; font-weight: 600; letter-spacing: 1px; color: #333; font-size: @page-title-size; text-transform: uppercase; } span { display: block; margin-top: 10px; font-weight: 300; color: #777; font-size: @page-title-subtitle-size; } } .breadcrumb { position: absolute !important; width: auto !important; top: 50% !important; left: auto !important; right: 15px !important; margin: -10px 0 0 0 !important; background-color: transparent !important; padding: 0 !important; font-size: 12px; } body.stretched .container-fullwidth .breadcrumb { right: 60px !important; } #header.transparent-header + #page-title.page-title-parallax .breadcrumb { margin-top: 35px !important; } .breadcrumb { a { color: #555; &:hover { color: @theme-color; } } i { width: auto !important; } } /* Page Title - Dark -----------------------------------------------------------------*/ #page-title { &.page-title-dark { background-color: #333; text-shadow: 1px 1px 1px rgba(0,0,0,0.15) !important; border-bottom: none; h1 { color: rgba(255,255,255,0.9) !important; } span { color: rgba(255,255,255,0.7); } .breadcrumb > .active { color: rgba(255,255,255,0.6); } .breadcrumb a { color: rgba(255,255,255,0.8); } .breadcrumb a:hover { color: rgba(255,255,255,0.95); } } /* Page Title - Right Aligned -----------------------------------------------------------------*/ &.page-title-right { text-align: right; .breadcrumb { left: 15px !important; right: auto !important; } } /* Page Title - Center Aligned -----------------------------------------------------------------*/ &.page-title-center { text-align: center; span { max-width: 700px; margin-left: auto; margin-right: auto; } .breadcrumb { position: relative !important; top: 0 !important; left: 0 !important; right: 0 !important; margin: 20px 0 0 !important; justify-content: center; } } /* Page Title - Background Pattern -----------------------------------------------------------------*/ &.page-title-pattern { background-image: url('images/pattern.png'); background-repeat: repeat; background-attachment: fixed; } /* Page Title - Parallax Background -----------------------------------------------------------------*/ &.page-title-parallax { padding: @page-title-parallax-padding 0; text-shadow: none; border-bottom: none; background-color: transparent; background-image: url('images/parallax/parallax-bg.jpg'); background-attachment: fixed; background-position: 50% 0; background-repeat: no-repeat; h1 { font-size: @page-title-parallax-size; font-weight: 600; letter-spacing: 2px; } span { font-size: @page-title-parallax-subtitle-size; } .breadcrumb { font-size: 13px; } } /* Page Title - Mini -----------------------------------------------------------------*/ &.page-title-mini { padding: @page-title-mini-padding 0; h1 { font-weight: 600; font-size: @page-title-mini-size; color: #444; } span { display: none; } } /* Page Title - No Background -----------------------------------------------------------------*/ &.page-title-nobg { background: transparent !important; border-bottom: 1px solid #F5F5F5; } /* Page Title - Video -----------------------------------------------------------------*/ &.page-title-video { background: none; position: relative; overflow: hidden; .container { z-index: 3; } .video-wrap { position: absolute; width: 100%; height: 100%; top: 0; left: 0; video { width: 100%; } } } }