@font-face {
    font-family: Arimo-BoldItalic;
    src: url(czcionki/Arimo-BoldItalic.ttf) format("truetype");
}

p {
    font-family: Arimo-BoldItalic;
}

@font-face {
    font-family: czcionka4;
    src: url(czcionki/DogeSans-Regular.otf) format("OpenType");
}

@font-face {
    font-family: Prosto;
    src: url(czcionki/Prosto.ttf) format("OpenType");
}


#perspektywa {
    width: 120px;
    height: 80px;
    margin: 0 auto;
    perspective: 600px;
    -webkit-perspective: 600px;
}

#rodzic {
    transform: rotateX(-7deg);
    -webkit-transform: rotateX(-7deg);
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    animation: obrot 15s linear infinite;
    -webkit-animation: obrot 15s linear infinite;
}

#rodzic > div {
    position: absolute;
    width: 118px;
    height: 78px;
    border: 1px solid #000;
    background-color: rgba(255, 255, 255, 0.5);
    background-image: radial-gradient(ellipse at top left, transparent, #F27507);
    box-shadow: 0 0 4px #F27507;
}


#rodzic > div:nth-child(1) {
    transform: rotateY(0) translateZ(164px);
    -webkit-transform: rotateY(0) translateZ(164px);
}

#rodzic > div:nth-child(2) {
    transform: rotateY(40deg) translateZ(164px);
    -webkit-transform: rotateY(40deg) translateZ(164px);
}

#rodzic > div:nth-child(3) {
    transform: rotateY(80deg) translateZ(164px);
    -webkit-transform: rotateY(80deg) translateZ(164px);
}

#rodzic > div:nth-child(4) {
    transform: rotateY(120deg) translateZ(164px);
    -webkit-transform: rotateY(120deg) translateZ(164px);
}

#rodzic > div:nth-child(5) {
    transform: rotateY(160deg) translateZ(164px);
    -webkit-transform: rotateY(160deg) translateZ(164px);
}

#rodzic > div:nth-child(6) {
    transform: rotateY(200deg) translateZ(164px);
    -webkit-transform: rotateY(200deg) translateZ(164px);
}

#rodzic > div:nth-child(7) {
    transform: rotateY(240deg) translateZ(164px);
    -webkit-transform: rotateY(240deg) translateZ(164px);
}

#rodzic > div:nth-child(8) {
    transform: rotateY(280deg) translateZ(164px);
    -webkit-transform: rotateY(280deg) translateZ(164px);
}

#rodzic > div:nth-child(9) {
    transform: rotateY(320deg) translateZ(164px);
    -webkit-transform: rotateY(320deg) translateZ(164px);
}

@keyframes obrot {
    0% {
        transform: rotateX(-7deg) rotateY(0);
    }

    100% {
        transform: rotateX(-7deg) rotateY(360deg);
    }
}

@-webkit-keyframes obrot {
    0% {
        -webkit-transform: rotateX(-7deg) rotateY(0);
    }

    100% {
        -webkit-transform: rotateX(-7deg) rotateY(360deg);
    }
}

.blink {
    animation-iteration-count: infinite;
    animation-name: blink;
    animation-duration: 3s;
}

@keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 30%;
    }

    100% {
        opacity: 1;
    }
}

.kolo2 {
    text-align: center;
}



.clock {
    text-align: center;
    font-size: 60px;
    color: blue;
    font-family: Prosto;
}

.tytul2 {
    text-align: center;
    font-size: xx-large;
    color: #d932ce;
    font-family: czcionka4;
}

.joker {
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-name: blink;
}

.clime {
    color:lime;
    display:block;
    font-size: 100%;
}
.cyellow {
    color:#ffff00;
}

.fon {
    font-size: 15px;
}

.no-station {
    text-align: center;
}

.kolo, #perspektywa, #rodzic {
    margin: 0 auto 48px auto;
    line-height: 100%;
}



@media (max-width: 576px) {

    .fon{
        font-size: 12px;
    }

    .kolo a {
        font-size: small;
    }

    .carousel-title a {
        font-size: large;
    }

    .kolo, #perspektywa, #rodzic {
        margin: 0 auto 48px auto;
        line-height: 12px;
    }

    .tytul2 {
        font-size: 20px;
    }

    #perspektywa {
        width: 112px;
        height: 80px;
        /*margin: 0 auto;*/
        perspective: 600px;
        -webkit-perspective: 600px;
        margin: 48px auto;
    }

    #rodzic {
        transform: rotateX(-7deg);
        -webkit-transform: rotateX(-7deg);
        transform-style: preserve-3d;
        -webkit-transform-style: preserve-3d;
        animation: obrot 15s linear infinite;
        -webkit-animation: obrot 15s linear infinite;
    }

    #rodzic > div {
        position: absolute;
        width: 112px;
        height: 78px;
        border: 1px solid #000;
        background-color: rgba(255, 255, 255, 0.5);
        background-image: radial-gradient(ellipse at top left, transparent, #F27507);
        box-shadow: 0 0 4px #F27507;
    }


    #rodzic > div:nth-child(1) {
        transform: rotateY(0) translateZ(154px);
        -webkit-transform: rotateY(0) translateZ(154px);
    }

    #rodzic > div:nth-child(2) {
        transform: rotateY(40deg) translateZ(154px);
        -webkit-transform: rotateY(40deg) translateZ(154px);
    }

    #rodzic > div:nth-child(3) {
        transform: rotateY(80deg) translateZ(154px);
        -webkit-transform: rotateY(80deg) translateZ(154px);
    }

    #rodzic > div:nth-child(4) {
        transform: rotateY(120deg) translateZ(154px);
        -webkit-transform: rotateY(120deg) translateZ(154px);
    }

    #rodzic > div:nth-child(5) {
        transform: rotateY(160deg) translateZ(154px);
        -webkit-transform: rotateY(160deg) translateZ(154px);
    }

    #rodzic > div:nth-child(6) {
        transform: rotateY(200deg) translateZ(154px);
        -webkit-transform: rotateY(200deg) translateZ(154px);
    }

    #rodzic > div:nth-child(7) {
        transform: rotateY(240deg) translateZ(154px);
        -webkit-transform: rotateY(240deg) translateZ(154px);
    }

    #rodzic > div:nth-child(8) {
        transform: rotateY(280deg) translateZ(154px);
        -webkit-transform: rotateY(280deg) translateZ(154px);
    }

    #rodzic > div:nth-child(9) {
        transform: rotateY(320deg) translateZ(154px);
        -webkit-transform: rotateY(320deg) translateZ(154px);
    }

}

@media (max-width: 992px) {

    .fon {
        font-size: 15px;
        line-height: 1;
    }

    .kolo a {
        padding-top: 5px;
        font-size: large;
    }

    .kolo, #perspektywa, #rodzic {
        margin: 0 auto 48px auto;
        line-height: 12px;
    }

    .tytul2 {
        font-size: 20px;
    }

    .carousel-title a {
        font-size: large;
    }
}