@import url(https://fonts.googleapis.com/css?family=Courgette&subset=latin,latin-ext);
@import url(https://fonts.googleapis.com/css?family=Righteous);
@import url(https://fonts.googleapis.com/css?family=Kaushan+Script);
body {
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
}
a {
    text-decoration: none;
}
.flex {
    display: flex;
}
/*
.tmblr-iframe {
    display:none; 
}
*/

#bg {
    background-image: url('https://dl.dropbox.com/s/1ogtdcrb2r3dp2s/6.png');
    background-position-x: 100%;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
}
#bg .info a {
    position: absolute;
    right: 20px;
    bottom: 10px;
    text-decoration: none;
    font-family: Righteous;
    font-size: 20px;
    color: rgb(0, 0, 0);
}
#bg .info a:hover {
    color: rgb(255, 255, 255, );
}
#container {
    width: 100%;
    height: 100%;
}
#container .options-window {
    width: 250px;
    height: 216px;
    background: rgba(255, 255, 255, 0.2);
    position: fixed;
    right: 0px;
    top: 50px;
    display: none;
    border-top: 1px dashed black;
    z-index: 1;
}
#container .options-window .colors span {
    font-family: Courgette;
    font-weight: bold;
    font-size: 20px;
    display: block;
    text-align: center;
}
#container .options-window .colors .color-list {
    list-style: none;
    padding: 0px;
    margin: 0px;
    text-align: center;
    -moz-column-count: 4;
    -moz-column-gap: 1px;
    border-top: thick dotted black;
    border-bottom: thick dotted black;
}
#container .options-window .colors .color-list li {
    display: inline-block;
    margin-top: 5px;
    border-radius: 5px;
}
#container .options-window .colors .color-list li a {
    width: 50px;
    height: 50px;
    display: block;
}
#container .options-window .colors .color-list li a:hover {
    cursor: pointer;
}
#top-bar {
    position: fixed;
    top: 0px;
    width: 100%;
    height: 50px;
    background: rgba(255, 255, 255, 0.2);
    z-index: 1;
}
#top-bar .fa-bars {
    cursor: pointer;
    top: 0px;
}
#top-bar .fa-bars span {
    position: relative;
    margin-left: 5px;
    font-family: Righteous;
    cursor: pointer;
}
#social {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 330px;
    height: 50px;
    display: inline-block;
    -moz-column-count: 1;
}
.fa-bars,
.fa-facebook,
.fa-envelope,
.fa-skype,
.fa-steam-square,
.fa-tumblr,
.fa-youtube,
.fa-jsfiddle,
.fa-cog {
    margin-top: 10px;
    margin-left: 10px;
    color: rgb(0, 0, 0);
    text-decoration: none;
    cursor: pointer;
}
.fa-bars:hover,
.fa-facebook:hover,
.fa-envelope:hover,
.fa-skype:hover,
.fa-steam-square:hover,
.fa-tumblr:hover,
.fa-youtube:hover,
.fa-jsfiddle:hover,
.fa-cog:hover {
    color: rgb(255, 255, 255);
}
.fa-bars a,
.fa-facebook a,
.fa-envelope a,
.fa-skype a,
.fa-steam-square a,
.fa-tumblr a,
.fa-youtube a,
.fa-jsfiddle a,
.fa-cog a {
    display: block;
    text-decoration: none;
}
#player-box {
    width: 105px;
    position: absolute;
    height: 50px;
    top: 0px;
    right: 350px;
}
#player-box .fa-play {
    top: 10px;
    right: 5px;
}
#player-box .fa-stop {
    top: 10px;
    right: 40px;
}
#player-box .fa-step-forward {
    top: 18px;
    right: 75px;
}
#player-box .fa-step-backward {
    top: 18px;
    right: 90px;
}
.fa-play,
.fa-stop,
.fa-step-forward,
.fa-step-backward {
    position: absolute;
    color: rgb(0, 0, 0);
}
.fa-play:hover,
.fa-stop:hover,
.fa-step-forward:hover,
.fa-step-backward:hover {
    color: rgb(255, 255, 255);
}
#slide-bar {
    position: fixed;
    border-top: 1px solid black;
    width: 250px;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    z-index: 1;
}
.sites-profiles {
    font-family: Courgette;
    font-size: 20px;
    text-align: center;
    font-weight: bold;
}
.followed {
    text-align: center;
    font-family: Courgette;
    font-size: 20px;
    font-weight: bold;
    border-bottom: 1px solid black;
}
.followed a {
    margin-left: 10px;
}
#sidebar .followed {
    display: block;
    -moz-column-count: 4;
    -moz-column-gap: 1px;
}
#sidebar .followed span {
    margin: 10px;
    border-bottom: 1px solid black;
}
#sidebar .fallfoto a {
    margin: 5px;
}
#sidebar .fallfoto a img {
    display: inline-block;
    margin-top: 30px;
    text-align: center;
    border-radius: 2px;
}
.fallfoto a,
img {} #nav {}#nav ul {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    border-bottom: 1px solid black;
}
#nav ul li {
    font-family: Courgette;
    margin-left: 10px;
    text-align: center;
    font-weight: bold;
}
#nav ul li a {
    font-size: 17px;
    color: black;
}
#nav ul li a:hover {
    color: rgb(255, 255, 255);
}
#content {} #content .flex {
    display: flex;
}
#posts {
    width: 600px;
    position: relative;
    margin: 50px auto;
    display: block;
    overflow: hidden;
}
/* nie ruszaj tego paddinga i marginu bo sie rozwali lista*/

#posts ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
    width: 600px;
}
#posts ul li {
    width: 600px;
    /*height:388px;*/
    
    margin: auto;
    margin-top: 25px;
}
.photo {
    width: 100%;
    display: block;
    position: relative;
}
.photo a img {
    border-radius: 2px;
    width: 100%;
    display: block;
    /*height:388px;*/
}
.photo .postinfo {
    width: 100%;
    position: absolute;
    bottom: 0px;
    height: 100px;
}
.postinfo {
    background: rgba(255, 255, 255, 0.2);
}
.post-buttons {
    position: absolute;
    bottom: 3px;
    right: 3px;
}
.post-like-button,
.post-reblog-button {
    display: inline-block;
    margin: 3px;
    color: rgb(0, 0, 0)!important;
}
.post-like-button:hover,
.post-reblog-button:hover {
    color: rgb(255, 255, 255)!important;
}
.tags {
    padding: 5px;
    text-decoration: none;
}
.tags a {} .tags a span {
    margin-right: 5px;
    font-size: 15px;
    font-weight: bold;
    font-family: Courgette;
    display: inline-block;
    color: rgb(0, 0, 0);
}
.tags a span:hover {
    color: rgb(255, 255, 255);
    cursor: pointer;
}
#rights {
    position: absolute;
    bottom: 5px;
    left: 5px;
    color: rgb(0, 0, 0);
    font-family: Courgette;
    font-size: 20px;
}
#switchpage {
    width: 600px;
    display: flex;
    height: 50px;
    background: rgba(255, 255, 255, 0.2);
    position: relative;
    border-radius: 2px;
    margin: auto;
    margin-bottom: 50px;
    margin-top: -25px;
}
#switchpage a {
    top: 10px;
    position: absolute;
    display: block;
}
#switchpage a:first-of-type {
    left: 30px;
}
#switchpage a:last-of-type {
    left: 550px;
}
#switchpage a i {
    text-align: center;
    margin: auto;
    text-decoration: none;
}
.fa-chevron-left,
.fa-chevron-right {
    color: rgb(0, 0, 0);
}
.fa-chevron-left:hover,
.fa-chevron-right:hover {
    color: rgb(255, 255, 255);
}
.clightblue {
    background: rgb(204, 238, 244);
}
.clightgreen {
    background: rgb(163, 209, 101);
}
.corange {
    background: rgb(253, 176, 88);
}
.cblue {
    background: rgb(88, 165, 253);
}
.cyellow {
    background: rgb( 224, 250, 4);
}
.cdarkblue {
    background: rgb(17, 67, 85);
}
.cwhite {
    background: rgb(255, 255, 255);
}
.cblack {
    background: rgb( 0, 0, 0);
}
.cbrown {
    background: rgb(148, 125, 122);
}
.cred {
    background: rgb(255, 64, 64);
}
.cviolet {
    background: rgb(137, 4, 250);
}
.cpink {
    background: rgb(253, 88, 165);
}