.element-info-buttons > a,
.users-item > img,
.element-info-labels > span,
.element-image > img,
.about-item > span,
#learn-link,
.contacts-list-item-header > img {
    user-select: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
}
a{
    cursor:pointer;
}
#wrapper-users {
    position: relative;
    height: 80px;
    width: 100%;
    max-width: 1440px;
    margin: 60px auto;
    padding: 0 120px;
    box-sizing: border-box;
    font-size: 0;
}
.users-arrow {
    position: absolute;
    display: inline-block;
    height: 38px;
    width: 38px;
    top: 21px;
    border: 1px solid #17c0ff;
    border-radius: 100%;
    box-sizing: border-box;
    line-height: 36px;
    text-align: center;
    cursor: pointer;
    transition: border-color .2s;
}
.users-arrow:hover {
    border-color: #00abeb;
}
.users-arrow:active {
    border-color: #009dd8;
}
.users-arrow[data-direction="left"] {
    left: 60px;
}
.users-arrow[data-direction="right"] {
    right: 60px;
}
.users-arrow > svg {
    vertical-align: middle;
}
.users-arrow > svg > path {
    fill: #17c0ff;
    transition: .2s;
}
.users-arrow:hover > svg > path {
    fill: #00abeb;
}
.users-arrow:active > svg > path {
    fill: #009dd8;
}
#users {
    position: relative;
    height: 100%;
    width: 100%;
    padding: 0 15px;
    box-sizing: border-box;
    overflow: hidden;
}
#users:before,
#users:after {
    content: '';
    position: absolute;
    display: block;
    height: 100%;
    width: 25px;
    top: 0;
}
#users:before {
    left: 0;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+0,0+100 */
    background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=1); /* IE6-9 */
}
#users:after {
    right: 0;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,1+100 */
    background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=1); /* IE6-9 */
}
#users-content {
    position: relative;
    height: 100%;
    width: 100%;
    white-space: nowrap;
}
.users-item-wrapper {
    display: inline-block;
    height: 100%;
    width: 33.33%;
    padding: 0 15px;
    box-sizing: border-box;
    vertical-align: top;
}
.users-item {
    height: 100%;
    width: 100%;
    padding: 15px 20px;
    border: 1px solid #d0e2ea;
    border-radius: 10px;
    box-sizing: border-box;
    line-height: 48px;
    text-align: center;
}
.users-item > img {
    max-height: 100%;
    max-width: 100%;
    vertical-align: middle;
}
@media screen and (max-width: 1080px) {
    .users-item-wrapper {
        width: 50%;
    }
}
@media screen and (max-width: 680px) {
    #wrapper-users {
        padding: 0 60px;
    }
    .users-arrow[data-direction="left"] {
        left: 20px;
    }
    .users-arrow[data-direction="right"] {
        right: 20px;
    }
}
@media screen and (max-width: 500px) {
    .users-item-wrapper {
        width: 100%;
    }
}

.wrapper-elements {
    width: 100%;
    max-width: 1300px;
    margin: 0 auto 80px;
    padding: 0 20px;
    box-sizing: border-box;
    font-size: 0;
}
.wrapper-elements[data-type="first"] {
    margin-top: 20px;
    margin-bottom: 60px;
}
.element-item {
    position: relative;
    padding: 150px 0;
    box-sizing: border-box;
}
.element-image {
    position: absolute;
    height: 100%;
    width: 50%;
    top: 0;
    left: 0;
    text-align: center;
}
.element-item.reverse > .element-image {
    left: 50%;
}
.element-image:before {
    content: '';
    display: inline-block;
    height: 100%;
    width: 0;
    vertical-align: middle;
}
.element-image > img {
    max-height: 100%;
    max-width: 100%;
    vertical-align: middle;
}
.element-info-title.main-title{
    font-size: 45px;
    font-weight: bold;
}
.element-info-title.main-title > span{
    color: #17C0FF;
    display: inline-block;
}
.element-info {
    position: relative;
    width: 50%;
    left: 50%;
    padding: 0 0 0 80px;
    box-sizing: border-box;
    font-weight: 300;
    color: #3e484c;
    text-align: left;
}
/*.element-info.main-element-info{
    width: 55%;
}*/
.element-item.reverse > .element-info {
    left: 0;
    padding: 0 80px 0 0;
}
.element-info-title {
    font-size: 36px;
    line-height: 48px;
}
.element-info-labels {
    padding-bottom: 30px;
    cursor: default;
}
.element-info-labels > div {
    margin-top: 10px;
    font-size: 16px;
    color: #17c0ff;
    line-height: 24px;
}
.element-info-labels > span {
    display: inline-block;
    height: 30px;
    margin: 10px 10px 0 0;
    padding: 0 20px;
    border: 1px solid #17c0ff;
    border-radius: 30px;
    box-sizing: border-box;
    font-size: 12px;
    color: #17c0ff;
    line-height: 28px;
}
.element-info-description {
    padding-bottom: 20px;
    font-size: 16px;
    line-height: 24px;
}
.element-info-buttons > a {
    display: inline-block;
    height: 52px;
    margin: 20px 20px 0 0;
    padding: 0 32px;
    border: 1px solid #17c0ff;
    border-radius: 10px;
    box-sizing: border-box;
    font-weight: 500;
    font-size: 16px;
    color: #17c0ff;
    background-color: transparent;
    line-height: 50px;
    transitioN: .2s;
}
.element-info-buttons > a:hover {
    border-color: transparent;
    color: #fff;
    background-color: #00abeb;
}
.element-info-buttons > a:active {
    border-color: transparent;
    color: #fff;
    background-color: #009dd8;
}
.element-info-buttons > a:first-child {
    border-color: transparent;
    color: #fff;
    background-color: #17c0ff;
    box-shadow: 0 16px 24px rgba(23, 192, 255, .2);
}
.element-info-buttons > a:hover:first-child {
    background-color: #00abeb;
}
.element-info-buttons > a:active:first-child {
    background-color: #009dd8;
}

@media screen and (max-width: 1100px) {
    .element-info {
        padding: 0 0 0 50px;
    }
    .element-item.reverse > .element-info {
        padding: 0 50px 0 0;
    }
}
@media screen and (max-width: 900px) {
    .wrapper-elements {
        margin-bottom: 0;
    }
    .wrapper-elements[data-type="first"] {
        margin-top: 120px;
        margin-bottom: 0;
    }
    .element-item {
        padding: 0 0 80px;
    }
    .element-info,
    .element-item.reverse > .element-info {
        padding: 0;
    }
    .element-image {
        position: static;
        height: auto;
        width: 100%;
        max-width: 650px;
        margin: 0 auto;
    }
    .element-info {
        position: static;
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
    }
}
@media screen and (max-width: 420px) {
    .element-info {
        text-align: center;
    }
    .element-info-title {
        font-size: 24px;
        line-height: 48px;
    }
    .element-info-labels > div {
        margin-top: 18px;
    }
    .element-info-description {
        padding-bottom: 10px;
    }
    .element-info-buttons > a {
        width: 100%;
        margin-right: 0;
    }
}

#wrapper-about {
    background-color: #f6fafc;
    font-size: 0;
}
#about {
    position: relative;
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 60px 30px 50px;
    box-sizing: border-box;
}
#about-list {
    position: relative;
    width: 50%;
    padding: 0 30px 0 0;
    box-sizing: border-box;
}
.about-item {
    height: 52px;
    width: 90%;
    border: 1px solid #d0e2ea;
    border-radius: 10px;
    box-sizing: border-box;
    background-color: transparent;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(130, 169, 182, 0);
    transition: .2s;
}
.about-item:hover {
    background-color: #fff;
}
.about-item:after {
    content: '';
    display: inline-block;
    height: 24px;
    width: 24px;
    margin-left: -44px;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYBAMAAAASWSDLAAAAKlBMVEUAAAAWwf8Wwf8Yv/8XwP8XwP8WwP8WwP8Yv/8Xv/8Xwf8Wv/8Yv/8XwP/FwYj4AAAADXRSTlMAj38Q38/PnyBwb1BALiAgwgAAADFJREFUGNNjoDHgVkDiMF5H4jDHCiDxTC8hcTh8JyBzFiA4ZkjKmHMFcBjNo8BAawAALgcG4QGgqFIAAAAASUVORK5CYII);
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
    opacity: 0;
    visibility: hidden;
    transition: .2s;
}
.about-item + .about-item {
    margin-top: 25px;
}
.about-item.active {
    width: 100%;
    border-color: #fff;
    background-color: #fff;
    cursor: default;
    box-shadow: 0 10px 20px rgba(130, 169, 182, .2);
}
.about-item.active:after {
    opacity: 1;
    visibility: visible;
}
.about-item > span {
    display: inline-block;
    width: 100%;
    padding: 0 60px 0 30px;
    box-sizing: border-box;
    font-weight: 500;
    font-size: 16px;
    color: #3e484c;
    line-height: 50px;
    vertical-align: middle;
}
.about-item-info {
    position: absolute;
    display: none;
    height: 100%;
    width: 100%;
    top: 0;
    left: 100%;
    line-height: 24px;
    white-space: normal;
    cursor: default;
}
.about-item.active > .about-item-info {
    display: block;
}
.about-item.active > .about-item-info > .about-item-info-content > div {
    font-weight: 300;
    font-size: 16px;
    line-height: 24px;
}
.about-item-info-content > img {
    width: 120%;
    margin: -60px -10% 0;
}
@media screen and (max-width: 900px) {
    .about-item-info {
        width: 150%;
    }
    #about-list {
        width: 40%;
    }
}
@media screen and (max-width: 750px) {
    .about-item-info,
    #about-list {
        width: 100%;
    }
    #about-list {
        padding: 0;
    }
    .about-item {
        position: relative;
        height: auto;
        width: 100%;
    }
    .about-item:after {
        position: absolute;
        top: 14px;
        right: 20px;
        margin-left: 0;
        opacity: 1;
        visibility: visible;
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
    }
    .about-item.active:after {
        transform: rotate(270deg);
        -webkit-transform: rotate(270deg);
    }
    .about-item-info {
        position: static;
        display: block;
        height: 0;
        overflow: hidden;
        transition: .4s;
    }
    .about-item-info-content > img {
        width: 100%;
        margin: -40px 0 0;
    }
    .about-item-info-content > div {
        padding: 0 20px 20px;
    }
}

#wrapper-learn {
    position: relative;
    padding: 230px 0;
    box-sizing: border-box;
}
#wrapper-learn:before {
    content: '';
    position: absolute;
    display: block;
    height: 820px;
    width: 820px;
    top: 50%;
    left: 50%;
    margin: -410px 0 0 -410px;
    border: 100px solid #edf6fa;
    border-radius: 100%;
    box-sizing: border-box;
}
#learn {
    position: relative;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    text-align: center;
}
#learn-header {
    height: 60px;
    font-weight: 300;
    font-size: 36px;
    color: #3e484c;
    line-height: 60px;
}
#learn-list {
    position: relative;
    height: 400px;
    width: 100%;
    max-width: 1170px;
    margin: 0 auto;
    overflow-x: hidden;
}
#learn-list:before,
#learn-list:after {
    content: '';
    position: absolute;
    display: block;
    height: 100%;
    width: 25px;
    top: 0;
    left: 0;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+0,0+100 */
    background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=1); /* IE6-9 */
    z-index: 1;
}
#learn-list:after {
    left: auto;
    right: 0;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,1+100 */
    background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=1); /* IE6-9 */
}
#learn-list-content {
    position: relative;
    height: 100%;
    width: 100%;
    line-height: 400px;
    white-space: nowrap;
}
.learn-item-wrapper {
    position: relative;
    display: inline-block;
    padding: 0 25px;
    box-sizing: border-box;
    vertical-align: middle;
}
.learn-item {
    position: relative;
    width: 260px;
    border-radius: 10px;
    background: #8fa7b0;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    box-shadow: 0 15px 30px rgba(130, 169, 182, .4);
    transition: .4s;
}
.learn-item.active {
    width: 500px;
}
.learn-item:before {
    content: '';
    display: block;
    width: 100%;
    padding-bottom: 56.25%;
}
.learn-item > iframe {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    transition: .4s;
}
.learn-item.active > iframe {
    opacity: 1;
    visibility: visible;
}
#learn-buttons {
    height: 60px;
    line-height: 60px;
}
.learn-arrow {
    position: absolute;
    display: none;
    height: 38px;
    width: 38px;
    top: 50%;
    margin-top: -19px;
    border: 1px solid #17c0ff;
    border-radius: 100%;
    box-sizing: border-box;
    line-height: 36px;
    text-align: center;
    cursor: pointer;
    z-index: 1;
    transition: .2s;
}
.learn-arrow:hover {
    border-color: #00abeb;
}
.learn-arrow:active {
    border-color: #009dd8;
}
.learn-arrow.active {
    display: inline-block;
}
.learn-arrow[data-direction="left"] {
    left: 30px;
}
.learn-arrow[data-direction="right"] {
    right: 30px;
}
.learn-arrow > svg {
    vertical-align: middle;
}
.learn-arrow > svg > path {
    fill: #17c0ff;
    transition: .2s;
}
.learn-arrow:hover > svg > path {
    fill: #00abeb;
}
.learn-arrow:active > svg > path {
    fill: #009dd8;
}
#learn-link {
    display: inline-block;
    height: 52px;
    padding: 0 30px;
    border: 1px solid #17c0ff;
    border-radius: 10px;
    box-sizing: border-box;
    font-weight: 500;
    font-size: 16px;
    color: #17c0ff;
    background-color: transparent;
    line-height: 50px;
    transition: .2s;
}
#learn-link:hover {
    border-color: transparent;
    color: #fff;
    background-color: #00abeb;
}
#learn-link:active {
    border-color: transparent;
    color: #fff;
    background-color: #009dd8;
}
@media screen and (max-width: 1300px) {
    #learn-buttons {
        position: relative;
        width: 100%;
        max-width: 360px;
        margin: 0 auto;
    }
    .learn-arrow[data-direction="left"] {
        left: 15px;
    }
    .learn-arrow[data-direction="right"] {
        right: 15px;
    }
}
@media screen and (max-width: 1170px) {
    #learn-list {
        width: 1170px;
        margin: 0 -315px;
    }
    #learn {
        max-width: 540px;
    }
}
@media screen and (max-width: 540px) {
    #wrapper-learn:before {
        display: none;
    }
    #wrapper-learn {
        padding: 50px 0;
    }
    #learn-list {
        width: 100%;
        margin: 0;
    }
    #learn {
        max-width: 100%;
    }
    .learn-item-wrapper {
        width: 100%;
    }
    .learn-item.active {
        width: 100%;
    }
}
@media screen and (max-width: 400px) {
    #learn-list {
        height: 240px;
    }
    #learn-list-content {
        line-height: 240px;
    }
    .learn-item {
        box-shadow: 0 5px 15px rgba(130, 169, 182, .4);
    }
}

#wrapper-teachers {
    position: relative;
    display: block;
    padding: 60px 45px 41px;
    box-sizing: border-box;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#00b9ff+0,6bd7ff+100 */
    background: #00b9ff; /* Old browsers */
    background: -moz-linear-gradient(left, #00b9ff 0%, #6bd7ff 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #00b9ff 0%, #6bd7ff 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #00b9ff 0%, #6bd7ff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00b9ff', endColorstr='#6bd7ff', GradientType=1); /* IE6-9 */
    overflow: hidden;
}
#wrapper-teachers:before,
#wrapper-teachers:after {
    content: '';
    position: absolute;
    display: block;
    height: 350px;
    width: 400px;
    top: 0;
    left: 0;
    background-image: url(data:image/png;base64,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);
    background-repeat: no-repeat;
}
#wrapper-teachers:after {
    top: auto;
    left: auto;
    bottom: 0;
    right: 0;
    background-image: url(data:image/png;base64,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);
}
#teachers {
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}
#teachers-header {
    font-weight: 300;
    font-size: 36px;
    color: #ffffff;
    line-height: 48px;
    text-align: center;
}
#teachers-header:after {
    content: '';
    position: relative;
    display: block;
    height: 50px;
    width: 100%;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAANlBMVEUAAAD////////////////////////////////////////////////////////////////////xY8b8AAAAEXRSTlMAIBDfn18w748/v89/r29PUBPU2jkAAADgSURBVEjH7dNLbsMwDARQUqK+VtLM/S9bFIWgaGg4u6z8lmPQFPWR2+27VANHYUVeswIgmq4o17+ozIgEwzRmVjHVk1Yasdh/ZlgOX/PAuzp7LA8hCbssohQ1KjkAbmMUdZoEpIgUzvZpXmCawX5oFJYbWPpU8qmL/66BE96yAiLSXWPZDOyOk8XyDYvYmLg2XUgublTdf/MUliMdG9eoOFojX2VJkdfFWhopGwDdojboIFkHzL+MKBeAov6er8hrfm8UGHLBUP37O+SCnnyOUeXCsweOXlTBwkkU5Hb7pl9rACMS1rDJCAAAAABJRU5ErkJggg);
    background-repeat: no-repeat;
    background-position: center;
}
#teachers-list {
    position: relative;
    width: 100%;
    max-width: 680px;
    margin: 16px auto 35px;
    overflow: hidden;
    z-index: 1;
}
#teachers-list-content {
    position: relative;
    left: 0;
    white-space: nowrap;
    transition: .4s;
}
.teachers-item {
    display: inline-block;
    width: 100%;
    border: 1px solid #fff;
    border-radius: 24px;
    box-sizing: border-box;
    font-weight: 300;
    font-size: 16px;
    color: #fff;
    line-height: 24px;
    white-space: normal;
    vertical-align: top;
}
.teachers-item-text {
    width: 100%;
    padding: 30px 40px 12px;
    box-sizing: border-box;
}
.teachers-item-name {
    height: 80px;
    width: 100%;
    padding: 0 100px 0 40px;
    box-sizing: border-box;
    line-height: 80px;
    background-repeat: no-repeat;
    background-position: center right;
}
.teachers-item-name > a {
    display: inline-block;
    font-weight: 500;
    font-size: 16px;
    color: #fff;
    line-height: 28px;
    vertical-align: middle;
}
.teachers-item-name > a:hover {
    text-decoration: underline;
}
#teachers-buttons {
    height: 60px;
    line-height: 60px;
    text-align: center;
}
.teachers-arrow {
    position: absolute;
    display: none;
    height: 38px;
    width: 38px;
    top: 200px;
    margin-top: -19px;
    border: 1px solid #fff;
    border-radius: 100%;
    box-sizing: border-box;
    line-height: 36px;
    text-align: center;
    cursor: pointer;
    z-index: 1;
}
.teachers-arrow.active {
    display: inline-block;
}
.teachers-arrow[data-direction="left"] {
    left: 30px;
}
.teachers-arrow[data-direction="right"] {
    right: 30px;
}
.teachers-arrow > svg {
    vertical-align: middle;
}
#teachers-links {
    display: inline-block;
    height: 20px;
    padding: 0 10px;
    box-sizing: border-box;
    line-height: 20px;
    white-space: nowrap;
}
#teachers-links > div {
    position: relative;
    display: inline-block;
    height: 20px;
    width: 20px;
    padding: 5px;
    box-sizing: border-box;
    cursor: pointer;
}
#teachers-links > div:before {
    content: '';
    display: inline-block;
    height: 10px;
    width: 10px;
    border-radius: 100%;
    background-color: #009dd8;
}
#teachers-links > div.active:before {
    background-color: #fff;
}
@media screen and (max-width: 960px) {
    #teachers-buttons {
        position: relative;
        width: 100%;
        max-width: 360px;
        margin: 0 auto;
    }
    .teachers-arrow {
        top: 50%;
        margin-top: -19px;
    }
    .teachers-arrow[data-direction="left"] {
        left: 10px;
    }
    .teachers-arrow[data-direction="right"] {
        right: 10px;
    }
}
@media screen and (max-width: 840px) {
    #wrapper-teachers:before,
    #wrapper-teachers:after {
        display: none;
    }
}
@media screen and (max-width: 760px) {
    #wrapper-teachers:before,
    #wrapper-teachers:after {
        display: none;
    }
}
@media screen and (max-width: 460px) {
    #wrapper-teachers {
        padding: 60px 10px 30px;
    }
    #teachers-header {
        font-size: 24px;
    }
    .teachers-item-text {
        padding: 30px 20px 20px;
    }
    .teachers-item-name {
        padding-left: 20px;
    }
}

#wrapper-contacts {
    position: relative;
    display: block;
    width: 100%;
    padding: 50px 30px 80px;
    box-sizing: border-box;
    font-size: 0;
}
#contacts {
    position: relative;
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
}
#contacts > * {
    display: inline-block;
    width: 50%;
    padding-top: 100px;
    vertical-align: top;
}
#contacts-list-wrapper {
    padding-right: 50px;
    box-sizing: border-box;
}
#contacts-list-header {
    font-weight: 300;
    font-size: 36px;
    color: #3e484c;
    line-height: 48px;
}
#contacts-list {
    padding-top: 30px;
}
.contacts-list-item {
    position: relative;
    padding-bottom: 40px;
}
.contacts-list-item a {
    color: #17c0ff;
}
.contacts-list-item a:hover {
    color: #00abeb;
    text-decoration: underline;
}
.contacts-list-item a:active {
    color: #009dd8;
    text-decoration: underline;
}
.contacts-list-item-header {
    font-weight: 500;
    font-size: 20px;
    line-height: 24px;
    color: #3e484c;
    white-space: nowrap;
    cursor: pointer;
    transition: .2s;
}
.contacts-list-item-header.active {
    color: #17c0ff;
}
.contacts-list-item-header > * {
    vertical-align: top;
}
.contacts-list-item-header > span {
    white-space: normal;
}
.contacts-list-item-header > img {
    margin-left: 10px;
    transition: .2s;
}
.contacts-list-item-header.active > img {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
}
.contacts-list-item-content {
    height: 0;
    overflow: hidden;
    transition: .2s;
}
.contacts-list-item-content-inner {

}
.contacts-list-item-text {
    padding-top: 20px;
    font-weight: 300;
    font-size: 16px;
    color: #3e484c;
    line-height: 24px;
}
.contacts-list-item-footer {
    display: none;
    font-weight: 400;
    font-size: 12px;
    color: #8fa7b0;
    line-height: 24px;
}
.contacts-list-item-footer.show {
    display: block;
}
#contacts-form-wrapper {
    padding-left: 150px;
    box-sizing: border-box;
}
#contacts-form-header {
    font-weight: 300;
    font-size: 36px;
    color: #3e484c;
    line-height: 48px;
}
#contacts-form {
    position: relative;
    padding-top: 30px;
}
#contacts-form.mail-success > * {
    opacity: 0;
}
#contacts-form-success {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    transition: .2s;
}
#contacts-form.mail-success > #contacts-form-success {
    opacity: 1;
    visibility: visible;
}
#contacts-form-success:before {
    content: '';
    display: inline-block;
    height: 100%;
    width: 0;
    vertical-align: middle;
}
#contacts-form-success-content {
    display: inline-block;
    width: 100%;
    font-weight: 700;
    text-align: center;
    vertical-align: middle;
}
#contacts-form-success-content > * {
    display: inline-block;
}
#contacts-form-success-content > div {
    width: 100%;
    margin: 26px 0 16px;
    font-size: 20px;
    color: #a6b3d1;
}
#contacts-form-success-content > span {
    font-size: 14px;
    color: #7887a7;
    line-height: 22px;
}
#contacts-form > * {
    display: block;
    width: 100%;
}
#contacts-form > * + * {
    margin-top: 30px;
}
#contacts-form-name,
#contacts-form-email,
#contacts-form-company,
#contacts-form-message {
    height: 46px;
    padding: 0 20px;
    border: 1px solid #d0e2ea;
    border-radius: 10px;
    box-sizing: border-box;
    font-weight: 400;
    font-size: 14px;
    color: #667a83;
    line-height: 44px;
    transition: .2s;
}
#contacts-form-message {
    height: 140px;
    padding: 15px 20px;
    line-height: 16px;
    resize: vertical;
}
#contacts-form-name:hover,
#contacts-form-email:hover,
#contacts-form-company:hover,
#contacts-form-message:hover {
    border-color: #17c0ff;
}
#contacts-form-name:focus,
#contacts-form-email:focus,
#contacts-form-company:focus,
#contacts-form-message:focus {
    border-color: #17c0ff;
    background-color: #f6fafc;
}
#contacts-form-name.error,
#contacts-form-email.error,
#contacts-form-company.error,
#contacts-form-message.error {
    border-color: #f64c49;
}
#contacts-form-error {
    display: none;
    padding: 15px 20px;
    border-radius: 10px;
    box-sizing: border-box;
    font-weight: 400;
    font-size: 14px;
    color: #721c24;
    line-height: 16px;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}
#contacts-form-error.show {
    display: block;
}
#contacts-form-error > strong {
    font-weight: 700;
}
#contacts-form-submit {
    height: 52px;
    border-radius: 10px;
    font-weight: 500;
    font-size: 16px;
    color: #ffffff;
    line-height: 52px;
    background-color: #17c0ff;
    text-align: center;
    box-shadow: 0 16px 24px rgba(23, 192, 255, .2);
    cursor: pointer;
    transition: .2s;
}
#contacts-form-submit:hover {
    background: #00abeb;
}
#contacts-form-submit:active {
    background: #009dd8;
}
.loading-overlay {
    background-color: rgb(255, 255, 255);
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    border-radius: 5px;
    z-index: 10;
    opacity: 0.8;
}
.loading-overlay > .overlay-content {
    position: relative;
    top: 40%;
    margin: 0 auto;
    text-align: center;
}
.overlay-content > span {
    font-size: 20px;
    color: rgb(146, 146, 146);
    padding-top:20px;
}
.icon-loadnig {
    background: url(/images/loading_animation.gif) center no-repeat;
    width: 31px;
    height: 31px;
    display: block;
    margin: 0px auto;
}
.hidden {
    display: none !important;
}
@media screen and (max-width: 1160px) {
    #contacts-form-wrapper {
        padding-left: 50px;
    }
}
@media screen and (max-width: 900px) {
    #wrapper-contacts {
        padding: 0 30px 80px;
    }
    #contacts-list-wrapper {
        padding-right: 0;
    }
}
@media screen and (max-width: 740px) {
    #contacts > * {
        width: 100%;
        padding: 60px 0 20px;
    }
}
@media screen and (max-width: 400px) {
    #contacts-list-header,
    #contacts-form-header {
        text-align: center;
    }
}