/* Typography */
body {
    color: #000;
    font-family: 'Rubik', sans-serif !important;  
    font-weight: 300;
    padding-top: 90px;
}
h1, h2, h3 {
    font-weight: 700;
}

h1 {
    font-size: 40px;
    line-height: 120%;
    margin-bottom: 16px;
}

h2 {
    font-size: 32px;
    line-height: 120%;
    margin-bottom: 24px;
}

.center {
    text-align: center;
}

h3 {
    font-size: 28px;
    line-height: 120%;
    margin-bottom: 16px;
}

h4 {
    font-size: 24px;
    line-height: 180%;
    margin-top: 16px;
}

h5 {
    font-size: 20px;
    line-height: 180%;
    margin-top: 16px;
}

p, ul {
    font-size: 18px;
    line-height: 150%;
    margin-bottom: 24px;
    font-family: 'Rubik', sans-serif !important; 
}

ul li { 
    line-height: 120%;
    margin-bottom: 16px;
}

caption {
    text-align: center;
    margin: 10px 0 30px 0 !important;
}

.caption {
    color: #666;
    display: block;
    font-size: 14px;
    text-align: center;
    margin: 0 0 32px 0;
}

/* Structure */
.row {margin-bottom: 32px;}

img {
    margin-bottom: 16px;
}

.span6, .span2 img {
    width: 100%;
}

.subtitle {
    color: #666;
    margin-top: -16px;
}

/* Header */ 
.brand-area { 
    float: left;
    margin-top: 8px;
}

.brand-area p {
    color: #000 !important;
    font-size: 14px;
    margin-bottom: 0;
}

.brand {
    color: #000 !important;
    float: none !important;
    font-weight: 700 !important;
    padding-bottom: 4px !important;
}

.navbar .nav {
    float: right;
}

.navbar-inner{
    height: 70px;
    background: #F8C139 !important;
    box-shadow: none !important;
}

.navbar .nav>li>a {
    color: #000;
    line-height: 50px;
    text-shadow: none !important;
}

.navbar .nav>li>a:active {
    color: #fff !important;
}

.btn:first-child {
    margin-right: 16px;
}

/* Skills */
.skills {
    background-color: #f6f6f6;
    margin-bottom: 24px;
    padding: 24px 0;
}
.skills h4 {
    font-size: 18px;
    text-align: center;
}

.works img {
    border: 1px solid #ccc !important;
}

/* Work details page */
.cover {
    background-position: center;
    text-align: center;
    background-size: contain;
    height: 500px;
    margin-bottom: 32px;
    margin-top: -20px;
    background-image: url("../img/hero-image-bg.png"); background-repeat: repeat-x;
}

.cover img {height: 500px; margin: 0 auto;}



/* Persona */

.persona ul {list-style: none;}
.persona ul li {padding: 24px; float: left;}
.persona ul li img {float: left; }
.persona ul li p {float: left;}
p.headline {font-style: italic;}

/* Graphene */
.graphene .cover {
    background-image: url("../img/graphene/header.png");
}

/* Workflow 
.workflow .cover {
    background-image: url("../tridion-workflow-management/assets/Hero_workflow.png");
}*/

/* Button */
.button {
    border: 2px solid #000;
    display: inline-block;
    padding: 8px 16px;
    border-radius: 100px;
    font-size: 20px;
    font-weight: 700;
    color: #000;
    margin-right: 16px;
   }
   
.button:hover {
    background-color: #000;
    color: #fff;
    text-decoration: none;
}

.small {
    font-size: 16px;
    padding: 4px 8px; 
}

/* Footer */
footer {
    text-align: center;
}

footer p {
    font-size: 16px;
}

@media (max-width: 767px) {
    .hero {
        margin-left: -20px;
        margin-right: -20px;
        margin-top: 0;
    }
}

@media (max-width: 979px) {
    .navbar-fixed-top {
        margin-bottom: 0px !important;
    }
}