/*$desktop:      1200px; !* Large Devices, Wide Screens *!*/
/*$laptop:       992px;  !* Medium Devices, Desktops *!*/
/*$tablet:       768px;  !* Small Devices, Tablets *!*/
/*$phone:        480px;  !* Extra Small Devices, Phones *!*/

/*larger-equal-than*/
/*@media screen and (min-width: ($device)) {}*/

/*smaller-than*/
/*@media screen and (max-width: ($device - 1)) {}*/

html {
    min-height: 100%;
    position: relative;
}
body {
    font-size: 16px;
    /* Margin bottom to support sticky footer */
    margin-bottom: 68px;
}

@media (max-width: 991px) {
    body {
        font-size: 14px;
    }
    pre {
        font-size: 12px;
    }
}
a:hover {
    transition: color ease .3s;
    text-decoration: none;
}
.btn-default {
    background: rgba(255, 255, 255, 0.08);
}
.btn {
    font-size: 16px;
}
h1, h2, h3, h4, h5, h6 {
  color: #3A4145;
}
section {
    margin-bottom: 30px;
}
li {
    margin-bottom: 3px;
}
img {
    max-width: 100%;
}

/*----------------------
       CONTENT
-----------------------*/
.container-fluid {
    max-width: 1500px;
}
.content {
    font-family: "Merriweather", serif;
    font-size: 16px;
    line-height: 28px;
    letter-spacing: 0.100000001490116px;
    color: #3A4145;
    font-weight: 300;
    text-align: justify;
}
#sidebar .text-muted {
    font-weight: 500;
}

/* OVERRIDE BOOTSTRAP */
pre {
    padding: 0;
}
.nav>li>a {
    padding: 5px 15px;
}

/*----------------------
       HEADER
-----------------------*/
.site-header {
    padding: 5% 0 5% 0;
    background: #303538;
    color: whitesmoke;
    text-align: center;
    margin-bottom: 2%;
    border-bottom: 2px solid #c0c0c0;
}
.site-header a {
    color: whitesmoke;
}
.site-header h2 {
  color: whitesmoke;
}
.site-header i {
    color: whitesmoke;
}

.site-header a:hover {
    color: #57a3e8;
}

.site-header .site-name {
    margin-top: 0;
    margin-bottom: 0.1rem;
    font-family: 'Open Sans',sans-serif;
    text-indent: -3px;
    letter-spacing: -2px;
    font-weight: bold;
    font-size: 56px;
}

.site-header .site-description  {
    padding: 0;
    font-size: 22px;
    font-weight: bold;
    font-family: 'Titillium Web', sans-serif;
}

.site-header .button-line {
    padding-top: 2.5%;
}
.site-header .button-line .btn {
    margin: 0 10px;
}

/*----------------------
       FOOTER
-----------------------*/
.site-footer {
    position: absolute;
    height: 68px;
    bottom: 0;
    width: 100%;
    background: 50% 50% repeat url("../img/footer_bg.png");
    color: #64b2df;
    border-top: 2px solid #c0c0c0;
}

.site-footer .top-bar-line {
    padding-top: 5px;
}

.site-footer .bottom-panel {
    color: #808080;
    background-color: #222222;
    padding: 20px 0;
}

.site-footer .bottom-panel a i { font-size: 24px; }
.site-footer .bottom-panel a:hover i { transform: scale(2); }


/* Desktop-First approach. General selectors and styles designed to make the site look good on DESKTOP screens go here.
But they affect all devices, and must be overridden by media queries targeting INCREASINGLY SMALLER screens */

@media (max-width: 979px) {
    /* Selectors and styles affecting screens UP TO 979px (Desktop) */
}

@media (max-width: 767px) {
    /* Selectors and styles affecting screens UP TO 767px (Tablet) */
}

@media (max-width: 480px) {
    /* Selectors and styles affecting screens UP TO 480px (Phone) */
    .site-header .site-name {
        font-size: 36px;
    }
    h2, h3 {
        font-size: 18px;
    }
    .content {
        font-size: 14px;
    }
}