@charset "UTF-8";

body,
header {
    display: -webkit-box;
    display: -ms-flexbox
}

body .img_c.c1,
body .img_c.c2 {
    -webkit-animation: topdown 140s ease-in-out 0s infinite;
    -webkit-transform-origin: top center
}

body,
footer .wrap,
footer .wrap .contact,
main>aside ul {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal
}

footer .wrap .copyright,
header .title h1 {
    text-shadow: 0 0 5px #000;
    letter-spacing: 1px
}

@font-face {
    font-family: Lobster;
    font-style: normal;
    font-weight: 400;
    src: local('Lobster Regular'), local('Lobster-Regular'), url(https://fonts.gstatic.com/s/lobster/v20/neILzCirqoswsqX9_oU.ttf) format('truetype')
}

@font-face {
    font-family: ArialKZ;
    src: url(../font/ArialKZ.ttf)
}

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

body {
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-image: url(../img/bg.jpg);
    background-repeat: no-repeat;
    position: relative
}

body .img_c {
    position: absolute;
    top: 0
}

@media (max-width:980px) {
    body .img_c {
        display: none
    }
}

body .img_c.c1 {
    left: 80%;
    animation: topdown 140s ease-in-out 0s infinite;
    transform-origin: top center
}

body .img_c.c2 {
    left: 25%;
    animation: topdown 140s ease-in-out 0s infinite;
    transform-origin: top center
}

body .img_c.c3,
body .img_c.c4 {
    -webkit-animation: topdown 140s ease-in-out 0s infinite;
    -webkit-transform-origin: top center
}

body .img_c.c3 {
    left: 60%;
    animation: topdown 140s ease-in-out 0s infinite;
    transform-origin: top center
}

body .img_c.c4 {
    left: 5%;
    animation: topdown 140s ease-in-out 0s infinite;
    transform-origin: top center
}

body .img_c.c5 {
    left: 45%;
    -webkit-animation: topdown 140s ease-in-out 0s infinite;
    animation: topdown 140s ease-in-out 0s infinite;
    -webkit-transform-origin: top center;
    transform-origin: top center
}

a {
    text-decoration: none
}

header {
    width: 990px;
    height: 380px;
    display: flex;
    padding-top: 27px;
    z-index: 10
}

main,
main>aside {
    padding-top: 40px
}

header .logo {
    width: 70px;
    height: 70px
}

header .logo img {
    width: inherit;
    height: inherit
}

header .title {
    line-height: 70px;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1
}

header .title h1 {
    font-size: 24px;
    margin-left: 10px;
    font-family: Lobster;
    color: #fff;
    font-weight: 200;
    line-height:140%;
    max-width: 90%;
}

header .lang {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

header .lang .kz {
    margin-right: 4px
}

header .lang .kz,
header .lang .ru,
header .lang .en {
    width: 40px;
    height: 22px
}

header .lang .kz a,
header .lang .ru a,
header .lang .en a {
    text-transform: uppercase;
    text-decoration: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #fff;
    width: 100%;
    font-family: ArialKZ;
    font-size: 15px;
    height: 100%;
    background-color: #3dacf3
}

main,
main>aside ul {
    display: -webkit-box;
    display: -ms-flexbox
}

main .content .title,
main>aside ul li a {
    font-family: Lobster
}

header .lang .active {
    -ms-flex-item-align: auto;
    -ms-grid-row-align: auto;
    align-self: auto
}

header .lang .active a {
    background-color: #9dd62c
}

main {
    display: flex;
    width: 990px
}

main>aside {
    width: 280px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-bottom: 20px;
    margin-right: 15px
}

main>aside ul {
    list-style: none;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column
}

main>aside ul li {
    width: 100%;
    height: 68px;
    margin-bottom: 4px;
    border-radius: 4px
}

main>aside ul li a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    width: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 18px;
    line-height: 20px;
    text-align: center;
    color: #fff
}

main>aside ul li:nth-child(1),
main>aside ul li:nth-child(8) {
    background-color: #31b3ef
}

main>aside ul li:nth-child(2),
main>aside ul li:nth-child(9) {
    background-color: #b2cf13
}

main>aside ul li:nth-child(10),
main>aside ul li:nth-child(3) {
    background-color: #ff821c
}

main>aside ul li:nth-child(11),
main>aside ul li:nth-child(4) {
    background-color: #9e5dbd
}

main>aside ul li:nth-child(12),
main>aside ul li:nth-child(5) {
    background-color: #f1cc00
}

main>aside ul li:nth-child(6) {
    background-color: #f14f00
}

main>aside ul li:nth-child(7) {
    background-color: #0061c9
}

main .content {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1
}

main .content .title {
    font-size: 24px;
    color: #56c4ed;
    margin-bottom: 10px
}

main .content .slide-container {
    position: relative
}

main .content .slide-container #slider {
    position: relative;
    list-style: none;
    overflow: hidden;
    width: 100%;
    padding: 0;
    margin: 0
}

main .content .slide-container #slider li {
    -webkit-backface-visibility: hidden;
    position: absolute;
    display: none;
    width: 100%;
    left: 0;
    top: 0
}

main .content .slide-container #slider li:first-child {
    position: relative;
    display: block;
    float: left
}

main .content .slide-container #slider img {
    display: block;
    height: auto;
    float: left;
    width: 100%;
    border: 0
}

main .content .slide-container .rslides_tabs {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    list-style: none;
    margin-top: 20px;
    margin-bottom: 20px
}

main .content .slide-container .rslides_tabs li {
    width: 19px;
    height: 19px;
    border-radius: 50%;
    margin-right: 5px;
    border: 2px solid #d5d5d5
}

main .content .slide-container .rslides_tabs li a {
    color: transparent;
    display: block;
    width: 100%;
    height: 100%
}

main .content .slide-container .rslides_tabs li.rslides_here {
    border: 5px solid #fff;
    background: #6ec43d
}

main .content .slide-container .rslides_nav {
    position: absolute;
    width: 35px;
    height: 35px;
    background: -webkit-gradient(linear, left top, left bottom, from(#82d344), to(#52b034));
    background: linear-gradient(to bottom, #82d344, #52b034);
    z-index: 15;
    top: calc(50% - 35px);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

footer,
footer .wrap {
    display: -webkit-box;
    display: -ms-flexbox
}

main .content .slide-container .rslides_nav.prev {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    left: -6px
}

main .content .slide-container .rslides_nav.prev::before {
    content: '';
    width: 8px;
    height: 12px;
    background-image: url(../img/arrow-left.png)
}

main .content .slide-container .rslides_nav.next {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    right: -6px
}

main .content .slide-container .rslides_nav.next::before {
    content: '';
    width: 8px;
    height: 12px;
    background-image: url(../img/arrow-right.png)
}

main .content .about,
main .content .main-page-content {
    margin-top: 10px;
    margin-bottom: 20px
}

main .content .about .title,
main .content .about h3,
main .content .main-page-content .title,
main .content .main-page-content h3 {
    font-size: 22px;
    text-align: center;
    color: #66cce4;
    font-family: Lobster;
    font-weight: 500
}

main .content .about .text,
main .content .about p,
main .content .main-page-content .text,
main .content .main-page-content p {
    font-family: ArialKZ;
    font-size: 18px;
    text-align: justify
}

main .content .about .whos,
main .content .main-page-content .whos {
    margin-top: 30px;
    margin-bottom: 30px;
    text-align: right;
    font-size: 18px
}

main .content .page-content {
    padding-top: 40px;
    padding-bottom: 30px
}

main .content .page-content .title {
    color: #00afff;
    border-bottom: 2px solid #00afff;
    padding-bottom: 15px
}

main .content .page-content ol,
main .content .page-content ul {
    padding-left: 40px
}

main .content .page-content .page-text {
    line-height: 1.4
}

footer {
    width: 100%;
    height: 150px;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: -webkit-gradient(linear, left top, left bottom, from(#adda53), to(#509217));
    background: linear-gradient(to bottom, #adda53, #509217)
}

footer .wrap {
    width: 990px;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column
}

footer .wrap .contact {
    width: 100%;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: #fff;
    font-family: ArialKZ;
    font-size: 14px
}

footer .wrap .contact div {
    margin-bottom: 5px
}

footer .wrap .copyright {
    text-align: center;
    font-family: Lobster;
    color: #fff;
    font-weight: 200;
    padding-bottom: 20px
}

@-webkit-keyframes swinging {

    0%,
    100%,
    50% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    5% {
        -webkit-transform: rotate(12deg);
        transform: rotate(12deg)
    }

    10% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg)
    }

    15% {
        -webkit-transform: rotate(9deg);
        transform: rotate(9deg)
    }

    20% {
        -webkit-transform: rotate(-8deg);
        transform: rotate(-8deg)
    }

    25% {
        -webkit-transform: rotate(7deg);
        transform: rotate(7deg)
    }

    30% {
        -webkit-transform: rotate(-6deg);
        transform: rotate(-6deg)
    }

    35% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg)
    }

    40% {
        -webkit-transform: rotate(-4deg);
        transform: rotate(-4deg)
    }

    45% {
        -webkit-transform: rotate(3deg);
        transform: rotate(3deg)
    }
}

@keyframes swinging {

    0%,
    100%,
    50% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    5% {
        -webkit-transform: rotate(12deg);
        transform: rotate(12deg)
    }

    10% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg)
    }

    15% {
        -webkit-transform: rotate(9deg);
        transform: rotate(9deg)
    }

    20% {
        -webkit-transform: rotate(-8deg);
        transform: rotate(-8deg)
    }

    25% {
        -webkit-transform: rotate(7deg);
        transform: rotate(7deg)
    }

    30% {
        -webkit-transform: rotate(-6deg);
        transform: rotate(-6deg)
    }

    35% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg)
    }

    40% {
        -webkit-transform: rotate(-4deg);
        transform: rotate(-4deg)
    }

    45% {
        -webkit-transform: rotate(3deg);
        transform: rotate(3deg)
    }
}

@-webkit-keyframes topdown {

    0%,
    100% {
        -webkit-transform: translate(0);
        transform: translate(0)
    }

    50% {
        -webkit-transform: translate(50px);
        transform: translate(50px)
    }
}

@keyframes topdown {

    0%,
    100% {
        -webkit-transform: translate(0);
        transform: translate(0)
    }

    50% {
        -webkit-transform: translate(50px);
        transform: translate(50px)
    }
}