/** Page Header **************************************************************** **/ section.page-header { position: relative; padding: 50px 0 50px 0; border-top: 0; margin-top: 0; margin-bottom: 0 !important; background-color: rgba(0,0,0,0.05); border-bottom: rgba(0,0,0,0.05) 1px solid; -webkit-transition: all 0s; -moz-transition: all 0s; -o-transition: all 0s; transition: all 0s; } @media only screen and (max-width: 1024px) { section.page-header { background-position: center !important; background-attachment: inherit; -webkit-background-size: auto 100% !important; -moz-background-size: auto 100% !important; -o-background-size: auto 100% !important; background-size: auto 100% !important; -webkit-box-sizing: inherit !important; -moz-box-sizing: inherit !important; box-sizing: inherit !important; } } /* shadows */ section.page-header.shadow-after-1:before { content:' '; position:absolute; left:0; right:0; width:100%; height:60px; bottom:-60px; background-image:url("@{image-path}misc/shadow1.png"); background-size: 100% 100%; } section.page-header.shadow-after-2:before { content:' '; position:absolute; left:0; right:0; width:100%; height:60px; bottom:-60px; background-image:url("@{image-path}misc/shadow2.png"); background-size: 100% 100%; } section.page-header.shadow-after-3:before { content:' '; position:absolute; left:0; right:0; width:100%; height:60px; bottom:-60px; background-image:url("@{image-path}misc/shadow3.png"); background-size: 100% 100%; } section.dark.page-header { color:#fff; background-color:#151515; } section.light.page-header { color:#151515; background-color:transparent; border-top: rgba(0,0,0,0.05) 1px solid; } section.page-header.page-header-xs { padding: 20px 0 20px 0; } section.page-header.page-header-md { padding: 50px 0 50px 0; } section.page-header.page-header-lg { padding: 80px 0 80px 0; } section.page-header.page-header-xlg { padding: 130px 0 130px 0; } section.page-header.page-header-2xlg { padding: 250px 0 250px 0; } @media only screen and (max-width: 482px) { section.page-header.page-header-2xlg { padding: 130px 0 130px 0; } } /* page header tabs */ .page-header.page-header-xs ul.page-header-tabs { display:block; text-align:left; margin-bottom:-21px; margin-top:40px; } .page-header.page-header-md ul.page-header-tabs { display:block; text-align:left; margin-bottom:-51px; margin-top:70px; } .page-header.page-header-lg ul.page-header-tabs { display:block; text-align:left; margin-bottom:-81px; margin-top:80px; } .page-header.page-header-2xlg ul.page-header-tabs { display:block; text-align:left; margin-bottom:-250px; margin-top:143px; } .page-header ul.page-header-tabs>li { background-color: rgba(0,0,0,0.02); padding:0; -webkit-border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px; -moz-border-top-left-radius: 3px; -moz-border-top-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; } .page-header ul.page-header-tabs>li>a { display:inline-block; padding:6px 20px; color:#111; text-decoration:none; } .page-header.page-header-xs ul.page-header-tabs li a>span.label { padding:1px 5px; } .page-header.dark ul.page-header-tabs>li { background-color:rgba(255,255,255,0.1); -webkit-transition: all .300s; -moz-transition: all .300s; -o-transition: all .300s; transition: all .300s; } .page-header.dark ul.page-header-tabs>li:hover { background-color:rgba(255,255,255,0.2); } .page-header.dark ul.page-header-tabs>li>a { color:#fff; } .page-header ul.page-header-tabs>li:hover { background-color:rgba(0,0,0,0.03); } .page-header ul.page-header-tabs.dark>li:hover { background-color:rgba(0,0,0,0.1); } .page-header ul.page-header-tabs>li.active>a { color:#000; } .page-header.dark ul.page-header-tabs>li.active:hover, .page-header ul.page-header-tabs>li.active { font-weight:bold; background-color:#fff; } .page-header ul.page-header-tabs.dark>li.active>a { color:#fff; } .page-header ul.page-header-tabs.dark>li.active { background-color: #212121; } @media only screen and (max-width: 767px) { .page-header ul.page-header-tabs { background-color:rgba(0,0,0,0.03); padding:6px; margin-left:-15px; margin-right:-15px; } .page-header.page-header-2xlg ul.page-header-tabs { margin-top:143px; margin-bottom:-135px; } .page-header ul.page-header-tabs.dark { background-color:rgba(0,0,0,0.1); } .page-header ul.page-header-tabs>li, .page-header ul.page-header-tabs>li>a { display:block; float:none !important; text-align:center; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .page-header ul.page-header-tabs.dark>li { border:0; } } section.page-header h1 { margin:0; padding:0; font-size:26px; font-weight:300; } section.page-header .breadcrumb { position:absolute; font-size:12px; top:50%; left:0; margin-top:-15px; background:transparent; margin-bottom:0; z-index:10; } section.page-header .breadcrumb>li+li:before { content:"•"; } section.page-header .breadcrumb a { color:#333; } section.page-header.parallax .breadcrumb li.active, section.page-header.parallax .breadcrumb a { color:#fff; } section.page-header .breadcrumb { right:0; left:auto; } section.page-header .breadcrumb.breadcrumb-inverse { left:0; right:auto; } section.page-header .breadcrumb.breadcrumb-center { left:auto; right:auto; position:relative; margin-top:20px; } section.dark.page-header .breadcrumb a { color:#ccc; } @media only screen and (max-width: 767px) { section.page-header { text-align:center; } section.page-header .breadcrumb { position:relative; display:block; margin:0; } section.page-header .container.text-right, section.page-header .container.text-left { text-align:center; } } /* options - like buttons */ section.page-header ul.page-options { position:absolute; font-size:24px; top:50%; left:0; margin-top:-15px; background:transparent; margin-bottom:0; z-index:10; } section.page-header ul.page-options a { color:#333; text-decoration:none; } section.page-header.parallax ul.page-options li.active, section.page-header.parallax ul.page-options a { color:#fff; } section.page-header ul.page-options { right:0; left:auto; } section.page-header ul.page-options.page-options-inverse { left:0; right:auto; } section.page-header ul.page-options.page-options-center { left:auto; right:auto; position:relative; margin-top:20px; } section.dark.page-header ul.page-options a { color:#ccc; } @media only screen and (max-width: 767px) { section.page-header ul.page-options { position:relative; display:block; margin:0; margin-top:20px; font-size:28px; } }