/*
    Colors
    Blue: #3bcffa
    Green: #c9fb19

*/

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

ul, ol {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

html, body {
    margin: 0;
    padding: 0;
    border: 0;
    color: #2b2b2b;
    font: 16px/24px "PT Mono", sans-serif;
    background-color: #fafaf9;
}

::selection {
  background: #3bcffa; /* WebKit/Blink Browsers */
}
::-moz-selection {
  background: #3bcffa;
}

h1, h2, h3, .date {
    font-weight: normal;
    font-family: "PT Mono", sans-serif;
    line-height: 1.5em;
}

a {
    color: #3bcffa;
    text-decoration: none;
    transition: color 0.1s;
}
a:hover {
    color: #33b2d7;
}

.wrapper {
    /*width: 1024px;*/
    margin: 0 auto;
    position: relative;
}

.header-container {
    font-size: 0.875em;
    position: relative;
    background-color: #525251;
    border-bottom: 2px solid #3bcffa;
    /*padding: 10px 0;*/
}
    .header-container .titles {
        float: left;
    }
    .header-container .title {
        font-size: 50px;
        font-weight: bold;
        color: #3bcffa;
        line-height: 1em;
        margin: 10px 0;


        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;

        background: transparent url('../img/cryborg_b.png') no-repeat;
        background-size: contain;

        width: 318px;
        height: 84px;
        opacity: 0.85;
    }
    .header-container .sub-title {
        color: #fff;
        font-weight: normal;
        margin-top: 0;
        opacity: 0.75;
    }
    .header-container nav {
        float: right;
        text-align: right;
        padding-top: 15px;
        min-width: 150px;
    }
    .header-container nav a {
        opacity: 0.75;
        color: white;
        text-decoration: none;
        transition: color 0.1s;
    }
    .header-container nav li {
        padding: 0 10px;
        transition: background-color 0.2s;
    }
    .header-container nav li.active, .header-container nav li:hover {
        background-color: rgba(56, 56, 64, 0.85);
    }
    .header-container nav li.active {
        text-align: left;
        color: #3bcffa;
    }
    .header-container nav li:hover {
        color: #9e9e9d;
    }

.main-container {
    padding: 30px 0;
    border-top: 1px solid #9b9b90;
    /*font: 16px/24px "Noto Serif", serif;*/
    font-family: "Noto Serif", serif;
    font-weight: normal;
}

    .main-container a {
        color: #2d9cbc;
    }
    .main-container a:hover {
        color: #33b2d7;
    }
    .main-container img {
        max-width: 100%;
    }
    .main-container .date {
        /*float: right;*/
        font-weight: normal;
        font-size:0.875em;
        color: #515251;
        /*margin: 0;*/
        /*padding-left: 10px;*/
        /*line-height: 3em;*/
        display: block;
        margin: 0 0 3em;
    }
    .main-container h1 {
        font-size: 1.8em;
        /*margin: 1em 0 1.75em;*/
        margin: 1em 0 0;
    }
    .main-container h3 { 
        font-size: 1.5em;
        margin: 1.375em 0 1em;
    }
    .main-container p {
        letter-spacing: 0.01em;
        line-height: 1.8em;
        margin: 1em 0;
    }

    .main-container pre,
    .main-container blockquote {
        /*font-size: 1.5em;*/
        /*text-align: center;*/
        page-break-inside: avoid;
        /*margin: 50px 0;*/
        /*margin: 1.5em 0;*/
        margin: 0;
        padding: 0.1em 1em;
        border-left: 4px solid gray;
        font-size: 1.1em;
        /*font-style: italic;*/
        background-color: #f4f4f5;
    }

    .main-container li {
        margin-left: 1.25em;
    } 
    .main-container ul li {
        list-style: square;
        padding: 0.25em;
    }
    .main-container ol li {
        list-style: decimal;
    }

.footer-container {
    font-size: 0.875em;
    color: white;
    text-align: center;
    background-color: #2b2b2b;
    /*padding-top: 150px;*/
    padding-top: 50px;
    padding-bottom: 20px;
    border-top: 1px solid black;
}
    .footer-container h3 {
        font-size: 1.5em;
        letter-spacing: 0.1em;
        font-weight: normal;
    }


    .footer-container .links {
        margin-bottom: 80px;
        text-align: left;
    }
    .footer-container .links ul {

    }
    .footer-container .links a {

    }



.bg1 { 
    background: url("../img/imagedoc-darknoise.png"), -moz-linear-gradient(top, #525251 0, #4b4b4b 100%);
    background: url("../img/imagedoc-darknoise.png"), linear-gradient(top, #525251 0, #4b4b4b 100%);
    background: url("../img/imagedoc-darknoise.png"), -webkit-linear-gradient(top, #4b4b4b 0, #525251 100%);
}

.bg2 {
    background: url("../img/imagedoc-darknoise.png"), -moz-linear-gradient(top, #2b2b2a 0, #212120 100%);
    background: url("../img/imagedoc-darknoise.png"), linear-gradient(top, #2b2b2a 0, #212120 100%);
    background: url("../img/imagedoc-darknoise.png"), -webkit-linear-gradient(top, #2b2b2a 0, #212120 100%);
}

.bg-circuit {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: url("../img/circuit_1.png") left no-repeat;
    background-size: contain;
}

.leftg {
    background: -moz-linear-gradient(left center , rgba(43, 43, 43, 0.1) 0%, rgba(0, 0, 0, 0) 30%) repeat scroll 0 0 rgba(0, 0, 0, 0);
}
.rightg {
    background: -moz-linear-gradient(right center , rgba(43, 43, 43, 0.1) 0%, rgba(0, 0, 0, 0) 30%) repeat scroll 0 0 rgba(0, 0, 0, 0);
}



/*
    Media Rules
*/

@media only screen and (max-width: 767px) {
    .wrapper {
        width: 480px;
    }

    .bg-circuit {
        background-size: cover;
    }
    .header-container .title { max-width: 100%; }
    .header-container .sub-title { display: none; }
    
    .header-container .titles, .header-container nav {
        margin-bottom: 4px;
    }

    .header-container nav a {
        display: block;
    }
    .main-container {
        font-size: 0.875em;
    }

    .main-container .date {
        /*float: none;*/
        /*padding: 0;*/
        line-height: 1em;
    }


}

@media only screen and (max-width: 499px) {
    .wrapper {
        width: 300px;
    }

    .header-container .titles, .header-container nav {
        float: none;
        padding: 0;
    }
}

@media only screen and (min-width: 768px) {
/* and (max-width: 1139px) {*/
    .wrapper {
        width: 720px;
    }
}
/*
@media only screen and (min-width: 1140px) {
    .wrapper {
        width: 1024px;
    }
}
*/