libretime/docs/css/creative.min.css

259 lines
8.2 KiB
CSS
Executable File

/*!
* Start Bootstrap - Libretime v1.0.0 ()
* Copyright 2013-2018
* Licensed under MIT (https://github.com/BlackrockDigital/libretime-website/blob/master/LICENSE)
*/
body,html{
width:100%;height:100%
}
body{
font-family:Merriweather,'Helvetica Neue',Arial,sans-serif;
padding-top: 57px;
}
hr{
max-width:50px;border-width:3px;border-color:#f05f40
}
hr.light{
border-color:#fff
}
img{
width:100%;
max-width: 600px;
}
a{
color:#f05f40;
-webkit-transition:all .2s;
transition:all .2s
}
a:hover{
color:#f05f40
}
h1,h2,h3,h4,h5,h6{
font-family:'Open Sans','Helvetica Neue',Arial,sans-serif
}
.bg-primary{
background-color:#f05f40!important
}
.bg-dark{
background-color:#212529!important
}
.text-faded{
color:rgba(255,255,255,.9)
}
div.text-footer{
text-align: center;
}
section{padding:8rem 0}
.section-heading{margin-top:0}
::-moz-selection{color:#fff;background:#212529;text-shadow:none}
::selection{color:#fff;background:#212529;text-shadow:none}
img::-moz-selection{color:#fff;background:0 0}
img::selection{color:#fff;background:0 0}
img::-moz-selection{color:#fff;background:0 0}
#mainNav{
border-bottom:1px solid rgba(33,37,41,.1);background-color:#fff;font-family:'Open Sans','Helvetica Neue',Arial,sans-serif;-webkit-transition:all .2s;transition:all .2s
}
#mainNav .navbar-brand{
font-weight:700;
text-transform:uppercase;
color:#f05f40;
font-family:'Open Sans','Helvetica Neue',Arial,sans-serif
}
#mainNav .navbar-brand:focus,
#mainNav .navbar-brand:hover{color:#f05f40}
#mainNav .navbar-nav>li.nav-item>a.nav-link,
#mainNav .navbar-nav>li.nav-item>a.nav-link:focus{
font-size:.9rem;font-weight:700;text-transform:uppercase;color:#212529
}
#mainNav .navbar-nav>li.nav-item>a.nav-link:focus:hover,
#mainNav .navbar-nav>li.nav-item>a.nav-link:hover{color:#f05f40}
#mainNav .navbar-nav>li.nav-item>a.nav-link.active,
#mainNav .navbar-nav>li.nav-item>a.nav-link:focus.active{color:#f05f40!important;background-color:transparent}
#mainNav .navbar-nav>li.nav-item>a.nav-link.active:hover,
#mainNav .navbar-nav>li.nav-item>a.nav-link:focus.active:hover{background-color:transparent}
@media (min-width:992px){
#mainNav{border-color:transparent;background-color:transparent
}
#mainNav .navbar-brand{color:rgba(255,255,255,.7)}
#mainNav .navbar-brand:focus,#mainNav .navbar-brand:hover{color:#fff}
#mainNav .navbar-nav>li.nav-item>a.nav-link{padding:.5rem 1rem}
#mainNav .navbar-nav>li.nav-item>a.nav-link,
#mainNav .navbar-nav>li.nav-item>a.nav-link:focus{color:rgba(255,255,255,.7)}
#mainNav .navbar-nav>li.nav-item>a.nav-link:focus:hover,
#mainNav .navbar-nav>li.nav-item>a.nav-link:hover{color:#fff}
#mainNav.navbar-shrink{border-bottom:1px solid rgba(33,37,41,.1);background-color:#fff}
#mainNav.navbar-shrink .navbar-brand{color:#f05f40}
#mainNav.navbar-shrink .navbar-brand:focus,
#mainNav.navbar-shrink .navbar-brand:hover{color:#f05f40}
#mainNav.navbar-shrink .navbar-nav>li.nav-item>a.nav-link,
#mainNav.navbar-shrink .navbar-nav>li.nav-item>a.nav-link:focus{color:#212529}
#mainNav.navbar-shrink .navbar-nav>li.nav-item>a.nav-link:focus:hover,
#mainNav.navbar-shrink .navbar-nav>li.nav-item>a.nav-link:hover{color:#f05f40}}
/* CSS for docs navbar*/
#docsNav{
border-bottom:1px solid rgba(33,37,41,.1);
background-color:#fff;
font-family:'Open Sans','Helvetica Neue',Arial,sans-serif;
-webkit-transition:all .2s;
transition:all .2s
}
#docsNav .navbar-brand{
font-weight:650;
text-transform:uppercase;
color:#f05f40;
font-family:'Open Sans','Helvetica Neue',Arial,sans-serif
}
#docsNav .navbar-brand:focus,
#docsNav .navbar-brand:hover{color:#f05f40}
#docsNav .navbar-nav>li.nav-item>a.nav-link,
#docsNav .navbar-nav>li.nav-item>a.nav-link:focus{
font-size:.8rem;font-weight:650;text-transform:uppercase;color:#212529
}
#docsNav .navbar-nav>li.nav-item>a.nav-link:focus:hover,
#docsNav .navbar-nav>li.nav-item>a.nav-link:hover{color:#f05f40}
#docsNav .navbar-nav>li.nav-item>a.nav-link.active,
#docsNav .navbar-nav>li.nav-item>a.nav-link:focus.active{color:#f05f40!important;background-color:transparent}
#docsNav .navbar-nav>li.nav-item>a.nav-link.active:hover,
#docsNav .navbar-nav>li.nav-item>a.nav-link:focus.active:hover{background-color:transparent}
@media (min-width:992px){
#docsNav{border-color:transparent;background-color:transparent
}
#docsNav .navbar-brand{color:rgba(255,255,255,.7)}
#docsNav .navbar-brand:focus,#docsNav .navbar-brand:hover{color:#fff}
#docsNav .navbar-nav>li.nav-item>a.nav-link{padding:.5rem 1rem}
#docsNav .navbar-nav>li.nav-item>a.nav-link,
#docsNav .navbar-nav>li.nav-item>a.nav-link:focus{color:rgba(255,255,255,.7)}
#docsNav .navbar-nav>li.nav-item>a.nav-link:focus:hover,
#docsNav .navbar-nav>li.nav-item>a.nav-link:hover{color:#fff}
#docsNav.navbar-shrink{border-bottom:1px solid rgba(33,37,41,.1);background-color:#fff}
#docsNav.navbar-shrink .navbar-brand{color:#f05f40}
#docsNav.navbar-shrink .navbar-brand:focus,
#docsNav.navbar-shrink .navbar-brand:hover{color:#f05f40}
#docsNav.navbar-shrink .navbar-nav>li.nav-item>a.nav-link,
#docsNav.navbar-shrink .navbar-nav>li.nav-item>a.nav-link:focus{color:#212529}
#docsNav.navbar-shrink .navbar-nav>li.nav-item>a.nav-link:focus:hover,
#docsNav.navbar-shrink .navbar-nav>li.nav-item>a.nav-link:hover{color:#f05f40}}
header.masthead{
padding-top:10rem;padding-bottom:calc(10rem - 56px);
background-image:url(../img/header.jpg);
background-position:center center;
background-size:cover
}
header.masthead hr{
margin-top:30px;
margin-bottom:30px
}
header.masthead h1{font-size:2rem}
header.masthead p{font-weight:300}
@media (min-width:768px){
header.masthead p{font-size:1.15rem}
}
@media (min-width:992px){
header.masthead{
height:100vh;min-height:650px;padding-top:0;padding-bottom:0
}
header.masthead h1{font-size:3rem}
}
@media (min-width:1200px){
header.masthead h1{font-size:4rem}
}
.service-box{max-width:400px}
.portfolio-box{position:relative;display:block;max-width:650px;margin:0 auto}
.portfolio-box .portfolio-box-caption{
position:absolute;bottom:0;display:block;width:100%;height:100%;text-align:center;opacity:0;color:#fff;background:rgba(240,95,64,.9);-webkit-transition:all .2s;transition:all .2s
}
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content{
position:absolute;top:50%;width:100%;-webkit-transform:translateY(-50%);transform:translateY(-50%);text-align:center
}
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category,.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name{
padding:0 15px;font-family:'Open Sans','Helvetica Neue',Arial,sans-serif
}
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category{
font-size:14px;font-weight:600;text-transform:uppercase
}
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name{font-size:18px}.portfolio-box:hover .portfolio-box-caption{opacity:1}.portfolio-box:focus{outline:0}
@media (min-width:768px){
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category{font-size:16px}
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name{font-size:22px}
}
.text-primary{color:#f05f40!important}
.btn{
font-weight:700;text-transform:uppercase;border:none;border-radius:300px;font-family:'Open Sans','Helvetica Neue',Arial,sans-serif
}
.btn-xl{padding:1rem 2rem}
.btn-primary{background-color:#f05f40;border-color:#f05f40}
.btn-primary:active,.btn-primary:focus,.btn-primary:hover{color:#fff;background-color:#ee4b28!important}
.btn-primary:active,.btn-primary:focus{
-webkit-box-shadow:0 0 0 .2rem rgba(240,95,64,.5)!important;box-shadow:0 0 0 .2rem rgba(240,95,64,.5)!important
}
.btn-outline-full-width{border:1px solid #888;margin:5px;width:100%}
/* Blockquotes */
blockquote {
border: 1px solid #212529;
border-left: 10px solid #f05f40;
border-radius: 0px;
background: #212529;
color: white;
font-size: .9rem;
margin: 10px;
padding: 10px 20px;
}
blockquote p {
margin: 0;
line-height: 30px;
padding-bottom: 20px;
}
blockquote .small {
display: block;
font-size: 80%;
color: brown;
text-align: right;
}
/* Sidebar */
#sidebar {
position: absolute;
top: 57px;
right: 0;
width: 20%;
height: 100%;
background-color: #fff
}