websites_sum7-eu/static/css/style.css

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 100;
  src: url('../fonts/Lato-Hairline.eot'); /* IE9 Compat Modes */
  src: url('../fonts/Lato-Hairline.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
     url('../fonts/Lato-Hairline.woff2') format('woff2'), /* Modern Browsers */
     url('../fonts/Lato-Hairline.woff') format('woff'), /* Modern Browsers */
     url('../fonts/Lato-Hairline.ttf') format('truetype');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/Lato-Light.eot'); /* IE9 Compat Modes */
  src: url('../fonts/Lato-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
     url('../fonts/Lato-Light.woff2') format('woff2'), /* Modern Browsers */
     url('../fonts/Lato-Light.woff') format('woff'), /* Modern Browsers */
     url('../fonts/Lato-Light.ttf') format('truetype');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/Lato-Regular.eot'); /* IE9 Compat Modes */
  src: url('../fonts/Lato-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
     url('../fonts/Lato-Regular.woff2') format('woff2'), /* Modern Browsers */
     url('../fonts/Lato-Regular.woff') format('woff'), /* Modern Browsers */
     url('../fonts/Lato-Regular.ttf') format('truetype');
}

.lower label:hover,
.overlay label {
    cursor: pointer
}
a.moretag,
h2 a {
    text-decoration: none
}
.clear,
.clearfix {
    clear: both
}
footer {
    box-sizing: border-box
}
.overlay ul {
    list-style: none
}
#mainmenu,
#mainmenu li,
#site-title,
.lower label,
.overlay ul li a,
strong {
    text-transform: uppercase
}
#copyright,
#nav-below,
#nav-below a,
.footer-column,
.lower label,
.overlay nav,
.post-heading h1,
td {
    text-align: center
}
a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
var,
video {
    font: inherit;
    padding: 0;
    border: 0;
    margin: 0;
    vertical-align: baseline
}
.hljs-class .hljs-title:last-child,
.hljs-emphasis,
.hljs-strongemphasis,
em {
    font-style: italic
}
body,
button,
input,
select,
textarea {
    font-family: Lato, Avenir, HelveticaNeue-Light, "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    color: #3A3B3C;
    font-weight: 300;
    font-size: 1.125rem;
    line-height: 1.5;
    margin: 0;
    padding: 0
}
blockquote,
q {
    quotes: none
}
blockquote:after,
blockquote:before,
q:after,
q:before {
    content: '';
    content: none
}
aside,
details,
figcaption,
figure,
header,
hgroup,
menu,
nav,
section {
    display: block
}
pre {
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word
}
.alignright {
    float: right
}
.alignleft {
    float: left
}
h1,
h2,
h3 {
    letter-spacing: -.01em;
    word-spacing: .02em
}
h1,
h1 a,
h2,
h2 a,
h3,
h3 a {
    font-weight: 400
}
b,
strong {
    font-weight: 400
}
h1 {
    font-size: 2.2em
}
h2 {
    font-size: 1.7em
}
h2 a {
    color: inherit
}
h3,
legend {
    font-size: 1.37em
}
h5 {
    font-size: 1.03em
}
h6 {
    font-size: .95em
}
mark {
    background: #FDFFB6
}
abbr[title] {
    border-bottom: 1px dotted #D1D1D1
}
blockquote {
    background: #f9f9f9;
    border-left: 10px solid #ccc;
    margin: 1.5em 10px;
    padding: .5em 10px;
    quotes: "\201C""\201D""\2018""\2019"
}
blockquote:before {
    color: #ccc;
    content: open-quote;
    font-size: 4em;
    line-height: .1em;
    margin-right: .25em;
    vertical-align: -.4em
}
blockquote p {
    display: inline
}
hr {
    border: 0;
    border-bottom: 1px solid #D1D1D1;
    margin-top: 3.125rem;
    margin-bottom: 3.125rem
}
.post-title {
    margin-top: 80px
}
.post-date {
    color: #7A7B7C;
    font-size: .778em
}
a.moretag {
    font-weight: 400
}
a.moretag,
a.moretag:visited {
    color: #009DDC;
    border-bottom: 1px solid transparent
}
a.moretag:hover {
    text-decoration: underline
}
.smallcode {
    font-family: monospace;
    padding: .25em .5em;
    font-size: inherit;
    border-radius: 3px;
    background-color: #e5e5e5;
    white-space: nowrap;
    color: #c7254e
}
#branding,
#mainmenu li,
#site-title a {
    font-family: Lato, Avenir, HelveticaNeue-Light, "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif
}
article p {
    margin: 1.5rem 0;
    color: inherit
}
#content {
    width: 700px;
    margin: 0 auto 60px
}
footer {
    width: 100%;
    padding: 20px
}
#footer-container {
    width: 1000px;
    margin: 0 auto
}
.footer-column {
    width: 30%;
    float: left;
    color: #7A7B7C;
    padding: 0 1%;
    font-size: .85em
}
#nav-below,
.header {
    width: 100%;
    position: relative
}
footer a,
footer a:active {
    color: #7A7B7C;
    text-decoration: none;
    font-weight: 300
}
#mainmenu li,
#nav-below a {
    display: inline-block;
    font-weight: 400;
    cursor: pointer
}
footer a:hover {
    color: #fff;
    text-decoration: underline
}
#mainmenu a,
#nav-below a,
#site-title a,
.overlay ul li a {
    text-decoration: none
}
#branding {
    margin: 0 auto;
    height: 80px;
    max-width: 1000px;
    padding-left: 7%;
    padding-right: 7%;
}
#site-title {
    margin-top: 25px;
    float: left
}
#site-title a {
    font-size: 1.2em;
    color: #fff
}
#mainmenu {
    margin-top: 35px;
    float: right
}
#mainmenu a {
    color: #fff
}
#mainmenu a:hover {
    border-bottom: 1px solid #fff
}
#mainmenu li {
    float: left;
    margin-right: 5px;
    vertical-align: top;
    font-size: .667em;
    margin-left: 24px
}
.header {
    height: 200px;
    margin-bottom: 60px
}
.divider {
    margin-bottom: -30px;
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, .1), rgba(0, 0, 0, 0))
}
#nav-below {
    font-size: .875em;
    margin: 90px 0 75px
}
#nav-below a {
    width: 80%;
    color: #fff;
    border: 1px solid #5bb141;
    text-shadow: 0 1px 1px #5bb141;
    background: #6cbf52;
    border-radius: 2px;
    padding: 12px 18px;
    margin-bottom: 30px
}
#nav-below a,
#nav-below span {
    vertical-align: middle;
    font-size: .889em
}
#nav-below a:hover {
    background: #5bb141
}
.pagination {
    margin: 0 auto;
    position: absolute;
    bottom: 40px;
    left: 45%
}
.older {
    float: left
}
.newer {
    float: right
}
.post-heading {
    height: 50px;
    width: 50%;
    margin-left: 25%;
    display: table;
    z-index: 1
}
.post-heading h1 {
    font-size: 2.2em;
    font-weight: 400;
    color: #fff;
    display: table-cell;
    vertical-align: middle
}
.lower,
input {
    display: none
}
#mainmenu .current-menu-item a {
    border-bottom: 1px #fff solid
}
.lower {
    float: right;
    margin-top: 28px;
    border: 1px solid #fff;
    padding: 0 .85em;
    border-radius: 30px;
    color: #fff;
    font-weight: 400;
    line-height: 25px
}
.lower:hover {
    background: #fff;
    color: #008BC3
}
.lower label {
    font-family: inherit;
    font-size: .7em
}
.overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, .9)
}
.overlay label {
    width: 58px;
    height: 58px;
    position: absolute;
    right: 20px;
    top: 20px;
    background: url(../img/cross.png);
    z-index: 100
}
.overlay nav {
    position: relative;
    top: 50%;
    height: 60%;
    font-size: 54px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}
.overlay ul {
    padding: 0;
    margin: 0 auto;
    display: inline-block;
    height: 100%;
    position: relative
}
.overlay ul li {
    display: block;
    height: 20%;
    height: calc(100% / 5);
    min-height: 54px
}
.overlay ul li a {
    font-weight: 300;
    display: block;
    color: #fff;
    -webkit-transition: color .05s;
    transition: color .05s;
    font-family: inherit;
    margin-top: 20px
}
.hljs-strong,
.hljs-strongemphasis,
th {
    font-weight: 700
}
.overlay ul li a:focus,
.overlay ul li a:hover {
    color: #849368
}
.lower~.overlay-hugeinc {
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity .05s, visibility 0s .05s;
    transition: opacity .05s, visibility 0s .05s
}
#op:checked~.overlay-hugeinc {
    opacity: 1;
    visibility: visible;
    -webkit-transition: opacity .05s;
    transition: opacity .05s
}
.overlay-hugeinc nav {
    -moz-perspective: 300px
}
.overlay-hugeinc nav ul {
    opacity: .4;
    -webkit-transform: translateY(-25%) rotateX(35deg);
    transform: translateY(-25%) rotateX(35deg);
    -webkit-transition: -webkit-transform .25s, opacity .25s;
    transition: transform .25s, opacity .25s
}
#op:checked~.overlay-hugeinc nav ul {
    opacity: 1;
    -webkit-transform: rotateX(0);
    transform: rotateX(0);
    display: block
}
#op:not(:checked)~.overlay-hugeinc nav ul {
    -webkit-transform: translateY(25%) rotateX(-35deg);
    transform: translateY(25%) rotateX(-35deg);
    display: block
}
#copyright {
    width: 100%;
    color: #7A7B7C;
    font-family: inherit;
    font-size: .65em;
    margin-top: 40px;
    padding-bottom: 40px
}
table {
    color: #333;
    font-family: Helvetica, Arial, sans-serif;
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0
}
td,
th {
    padding: 3px;
    border: 1px solid transparent;
    height: 30px;
    transition: all .3s
}
th {
    background: #DFDFDF
}
td {
    vertical-align: middle;
    background: #FAFAFA
}
tr:nth-child(even) td {
    background: #F1F1F1
}
tr:nth-child(odd) td {
    background: #FEFEFE
}
.hljs {
    display: block;
    padding: .5em;
    background: #23241f
}
.css .hljs-function .hljs-preprocessor,
.css .hljs-rules,
.css .hljs-value,
.hljs,
.hljs-pragma,
.hljs-tag {
    color: #f8f8f2
}
.hljs-emphasis,
.hljs-strong,
.hljs-strongemphasis {
    color: #a8a8a2
}
.alias .hljs-keyword,
.hljs-blockquote,
.hljs-bullet,
.hljs-hexcolor,
.hljs-horizontal_rule,
.hljs-literal,
.hljs-number,
.hljs-regexp {
    color: #ae81ff
}
.css .hljs-class,
.hljs-class .hljs-title:last-child,
.hljs-code,
.hljs-tag .hljs-value,
.hljs-title {
    color: #a6e22e
}
.hljs-link_url {
    font-size: 80%
}
.alias .hljs-keyword:first-child,
.clojure .hljs-built_in,
.css .hljs-important,
.css .hljs-tag,
.css .unit,
.hljs-attribute,
.hljs-change,
.hljs-flow,
.hljs-function,
.hljs-header,
.hljs-keyword,
.hljs-symbol,
.hljs-symbol .hljs-string,
.hljs-tag .hljs-title,
.hljs-value,
.hljs-winutils,
.lisp .hljs-title,
.nginx .hljs-title,
.tex .hljs-special {
    color: #F92672
}
.css .hljs-attribute,
.hljs-class .hljs-keyword:first-child,
.hljs-constant,
.hljs-function .hljs-keyword {
    color: #66d9ef
}
.hljs-class .hljs-title,
.hljs-params,
.hljs-variable {
    color: #f8f8f2
}
.apache .hljs-cbracket,
.apache .hljs-tag,
.css .hljs-id,
.django .hljs-filter .hljs-argument,
.django .hljs-template_tag,
.django .hljs-variable,
.haskell .hljs-type,
.hljs-addition,
.hljs-attr_selector,
.hljs-built_in,
.hljs-envvar,
.hljs-link_label,
.hljs-link_url,
.hljs-prompt,
.hljs-pseudo,
.hljs-stream,
.hljs-string,
.hljs-subst,
.ruby .hljs-class .hljs-parent,
.smalltalk .hljs-array,
.smalltalk .hljs-class,
.smalltalk .hljs-localvars,
.sql .hljs-aggregate,
.tex .hljs-command {
    color: #e6db74
}
.apache .hljs-sqbracket,
.hljs-comment,
.hljs-deletion,
.hljs-doctype,
.hljs-javadoc,
.hljs-pi,
.hljs-shebang,
.hljs-template_comment,
.java .hljs-annotation,
.python .hljs-decorator,
.tex .hljs-formula {
    color: #75715e
}
.coffeescript .javascript,
.javascript .xml,
.php .xml,
.tex .hljs-formula,
.xml .css,
.xml .hljs-cdata,
.xml .javascript,
.xml .php,
.xml .vbscript {
    opacity: .5;
}
@media (max-width: 1000px) {
    #footer-container {
        width: 95%;
        text-align: center;
    }
}
@media (max-width: 700px) {
    .post-heading h1,
    h2 {
        font-size: 1.2em;
    }
    #branding,
    #content {
        padding: 0 5%;
        box-sizing: border-box;
    }
    #content {
        width: 100%;
    }
    .header {
        height: 200px;
    }
    .lower {
        display: block;
    }
    #mainmenu,
    .pagination {
        display: none;
    }
    .post-heading {
        height: 180px;
        width: 50%;
        margin-top: -1%;
        margin-left: 25%;
        display: table;
    }
    #branding,
    .footer-column {
        width: 100%;
    }
    .share-icons-header svg {
        margin-right: 5px;
    }
    .share-icons-body svg {
        margin-right: 10px;
    }
    #nav-below {
        margin-bottom: 30px;
    }
    article p {
        font-size: .95em;
    }
}