body
{

    margin:0 !important;
    font-family: 'Lato', sans-serif;
    background-image:url("tlo.png");
    overflow-x: hidden;
    height: 400xp;

}
#wraper
{

    margin-left:auto;
    margin-right:auto;

}
#menu
{


    background-color:#262626;
    width:50%;
    height:105px;
    margin-left:25%;
    margin-top:8%;
    border-radius:5px;
}
#posty
{
    opacity:1;
    border-radius:5px;
    margin-left:25%;
    margin-top:1%;
    height:600px;
    width: 100%;
}
#logo
{

    position:absolute;
    top:-3.3%;
    left:23%;
}
ol
{

    text-align:center;
    margin:0;
    padding:0;
    list-style-type:none;
    font-size:18px;
    height:105px;
    line-height:550%;
}
ol a
{

    text-decoration:none;
    color:#6F7475;
    display:block;
    -webkit-transition: linear 0.1s;
}
ol > li
{
    display:inline-block;
    float:left;
    width:19.8%;

}
ol a:hover
{
    border-radius:5px;
    height:100%;
    background-color:#333333;
    color:white;

}

.fb
{

        margin-left:5%;
        display:block;
        position:absolute;
        left:-5%;
        top:19.5%;
        line-height:150%;
        text-align:center;
        margin:10px;
        width:225px;
        height:155px;
        border-radius:5px;
        background-color:#4668b3;
}
.fb:hover
{
    background-color:#2456a1;
}
.yt
{

        margin-left:5%;
        display:block;
        position:absolute;
        left:-5%;
        top:44.3%;
        line-height:150%;
        text-align:center;
        margin:10px;
        width:225px;
        height:155px;
        border-radius:5px;
        background-color:#d94348;

}
.yt:hover
{
        background-color:#b72126;
}
.insta
{

        margin-left:5%;
        display:block;
        position:absolute;
        left:-5%;
        top:71%;
        line-height:150%;
        text-align:center;
        margin:10px;
        width:225px;
        height:157px;
        border-radius:5px;
        background-color:#8e6051;
}
.insta:hover
{
    background-color:#6c4030;
}
#copy
{

    display:block;
    color:white;
    text-align:center;
    position:absolute;
    left:40%;
    bottom:-115px;
}
#gry
{

    display:none;
    background-color:#262626;
    width:50%;
    height:200px;
    margin-left:25%;
    border-radius:5px;
}
#foot
{
    display:none;
    top:-7%;
    position:absolute;
    background-color:#262626;
    height:580px;
    border-radius:5px;
    width:225px;
    margin-left:5%;

}
#newsy
{
    background-color:#262626;
    height:50px;
    width:225px;
    color:white;
    font-size:15px;
    text-align:center;
    border-radius:5px;
    font-size:20px;
    line-height:250%;
    position:absolute;
    top:-0.1%;
    left:5%;
}
#newsy:hover
{
    background-color:#151515;
}
#tytul
{
    opacity: 1;
    background-color:#555555;
    width:100%;
    height:500px;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
    color:white;
    font-size:55px;
    text-align:center;
    padding-top:5px;
    padding-bottom:5px;

}
.tekst
{
    font-size:40px;
    color:white;
}
@viewport {
    zoom:1.0;
    width:extend-to-zoom;
}
@-ms-viewport {
    zoom:1.0;
    width:extend-to-zoom;
}
#g1
{
    background-color:#c0392b;
    height:200px;
    width:16.6%;
    float:left;
}
#g1:hover
{
    cursor:pointer;
}
#g2
{
    background-color:#34495e;
    height:200px;
    width:16.6%;
    float:left;
}
#g2:hover
{
    cursor:pointer;
}
#g3
{
    background-color:#e74c3c;
    height:200px;
    width:16.6%;
    float:left;
}
#g3:hover
{
    cursor:pointer;
}
#g4
{
    background-color:#27ae60;
    height:200px;
    width:16.6%;
    clear:both;
    float:left;
}
#g4:hover
{
    cursor:pointer;
}
#g5
{
    background-color:#8e44ad;
    height:200px;
    width:16.6%;
    float:left;
}
#g5:hover
{
    cursor:pointer;
}
#g6
{
    background-color:#7f8c8d;
    height:200px;
    width:16.6%;
    float:left;
}
#g6:hover
{
    cursor:pointer;
}
#g7
{
    background-color:#3498db;
    height:200px;
    width:16.6%;
    float:left;
    clear:both;
}
#g7:hover
{
    cursor:pointer;
}
#g8
{
    background-color:#95a5a6;
    height:200px;
    width:16.6%;
    float:left;
}
#g8:hover
{
    cursor:pointer;
}
#g9
{
    background-color:#ecf0f1;
    height:200px;
    width:16.6%;
    float:left;

}
#g9:hover
{
    cursor:pointer;
}
#popup
{
    background-color:#fff;
    width:700px;
    height:500px;
    position:absolute;
    left:31.5%;
    color:#575757;
    text-align:center;
    font-size:45px;
    border-radius:5px;
    display:none;
}
@media screen and (min-width: 320px) and (max-width: 1650px)  {
    #newsy
    {
        display: none;
    }

     #menu
    {
        margin-top: 170px;
        width: 100%;
        position: fixed;
        right: 0.01%;
        top: -1%;
        z-index: 50;
    }

    #logo
    {
    position:absolute;
    top:-3.3%;
    left:auto;
    }
     ol > li
    {
        display: block;
    }
    #posty
    {
        margin-top: 1%;
        position: fixed;
        top: 45%;
        right: 0.2%;
        width: 100%;
    }
    #g1
    {
     padding: 20px;
        clear: both;
        width: 100%;

    }
    #g2
    {
         padding: 20px;
        clear: both;
        width: 100%;

    }
      #g3
    {
         padding: 20px;
        clear: both;
         width: 100%;

    }
    #g4
    {
         padding: 20px;
        clear: both;
         width: 100%;

    }
    #g5
    {
        clear: both;
         width: 100%;

    }
    #g6
    {
        clear: both;
        width: 100%;
    }
     #g7
    {
        clear: both;
         width: 100%;

    }
    #g8
    {
         padding: 20px;
        clear: both;
         width: 100%;

    }
     #g9
    {
         padding: 20px;
        clear: both;
         width: 100%;

    }

}