@media screen and (max-width: 1550px) {
        body {
            font-size: 50%;
        }
        .hb-right img {
            width: 298px;
        }
        .hb-left,
        .hb-right {
            vertical-align: top;
        }
        .login-btn,
        .registration-btn {
            padding: 9px 24px;
            display: inline-block;
        }
        .account-btn .notice {
            width: 17px;
            height: 17px;
        }
        .account-btn .name:before {
            width: 36px;
            height: 36px;
        }
        .ft-tabs label {
            padding: 6.4px 16px;
        }
        .filter-icon {
            margin-right: 6px;
        }
        .ft-title {
            width: 130px;
        }
        .filter-checkbox {
            margin-bottom: 5px;
        }
        .rf-row input,
        .rf-row select,
        .um-field input,
        .um-field select {
            font-size: 14px;
        }
        form .st-right {
            margin-top: 25px;
        }
    }
    /* 1550px */
    
    @media screen and (max-width: 1200px) {
        .personal-sidebar {
            width: 22%;
            margin-right: 3%;
        }
        .uc-top {
            padding: 2em;
        }
        .pc-filter-container {
            display: block;
            float: unset;
            margin-top: 2%;
        }
        .info-section {
            display: block;
            margin-bottom: 15px;
            text-align: left;
        }
        .info-section .wb-tag {
            margin-top: 5px;
        }
        .tb-top,
        .top-bottom {
            flex-flow: column;
        }
        .tb-left,
        .tb-right {
            width: 100%;
            margin: 0 0 1em 0;
        }
        .video-preview,
        .white-block h2,
        .white-block h3 {
            width: 100%;
        }
        .white-block {
            margin-bottom: 2%;
        }
        form .st-right {
            margin-top: 28px;
        }
    }
    /* 1200px */
    
    @media screen and (max-width: 996px) {
        .home-banner {
            padding-top: 2em;
        }
        .hb-left {
            display: block;
            width: 400px;
            padding-bottom: 354px;
            margin: auto;
        }
        .hb-right {
            width: 100%;
            max-width: 100%;
            margin-top: 4em;
        }
        .home-banner {
            position: relative;
            top: unset;
            transform: translate(0);
        }
        .page-template-page-landing .main {
            height: auto;
        }
        .wrapper {
            width: 90%;
        }
        .ft-tabs select {
            width: 49%;
            margin-right: 2%;
        }
        .ft-tabs select:nth-child(2n+2) {
            margin-right: 0;
            float: right;
        }
    }
    /* 996px */
    
    @media screen and (max-width: 768px) {
        .header {
            padding: 8px 0;
            background-color: #fff2d6;
        }
        .header-wrapper {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .logo-desktop {
            display: none;
        }
        .logo-mobile {
            display: block;
        }
        .logo img {
            max-width: 287px;
        }
        .header-right {
            width: 30px;
        }
        .header .menu-close {
            display: block;
            font-size: 16px;
        }
        .main-menu-button {
            display: block;
            width: 30px;
            z-index: 1;
            margin-right: 0;
        }
        .main-menu-container {
            display: block;
            position: fixed;
            top: 0;
            right: -300px;
            width: 100%;
            max-width: 300px;
            min-width: 240px;
            height: 100%;
            margin-top: 0;
            margin-right: 0;
            background-color: #fff;
            -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
            -webkit-transition: right 0.25s ease-in-out;
            transition: right 0.25s ease-in-out;
            z-index: 99;
        }
        body.menu-open .main-menu-container {
            right: 0;
            overflow-y: scroll;
            -webkit-transition: right 0.25s ease-in-out;
            transition: right 0.25s ease-in-out;
            overflow: scroll;
        }
        .heading-btns,
        .landing-btns,
        .logout-btn {
            margin-top: 1em;
            padding: 0 5%;
            text-align: left;
        }
        .account-btn,
        .login-btn,
        .logout-btn {
            margin-right: 0;
            display: block;
            text-align: left;
        }
        .login-btn {
            width: 97px;
        }
        .account-btn {
            margin-bottom: 5%;
        }
        .account-btn .name:before {
            width: 26px;
            height: 36px;
            background-position: left;
        }
        .page-template-page-landing .main-menu-button {
            float: right;
        }
        .cols-2 {
            flex-flow: column;
        }
        .personal-sidebar,
        .personal-content {
            width: 100%;
            margin-right: 0;
        }
        .user-card {
            margin-bottom: 2em;
        }
        .uc-links {
            display: flex;
        }
        .uc-link {
            width: 50%;
        }
        .uc-icon {
            margin-bottom: 2%;
        }
        .uc-tag {
            margin: 2% 0;
        }
        .uc-link {
            padding: 2%;
            text-align: center;
        }
        .account-form .form-col {
            margin-left: 0;
        }
        .form-cols {
            width: 100%;
        }
        .submit-btn,
        #um-submit-btn {
            font-size: 14px;
        }
        .recording-left {
            width: 100%;
        }
        .recording-date {
            margin-top: 1%;
        }
        .recording-row .recording-container {
            width: 100%;
            margin-top: 10px;
        }
        .ft-tabs {
            font-size: 1.6em;
        }
        .ft-title {
            width: 110px;
            font-size: 1.6em;
        }
        .speeches-rows {
            grid-template-columns: 49% 49%;
            grid-column-gap: 2%;
            padding-bottom: 4em;
        }
        h2.filter-heading:before {
            display: none;
        }
        h2.filter-heading {
            text-align: left;
        }
        .filter-table {
            margin: 2em 0;
        }
        .filter-block {
            padding: 0 0 3em 0;
        }
        form .st-right {
            margin-top: 33px;
            padding: 10px;
        }
        .rp-block {
            flex-flow: column;
        }
        .rp-block h3 {
            width: 100%;
            margin-bottom: 8px;
        }
        .recording-container {
            width: 100%;
            flex-flow: column;
        }
        .playback,
        .playback-existing,
        .download,
        .audio-record {
            width: 100%;
        }
        .wrs-wrapper::after {
            bottom: -6%;
        }
        a.wb-tag {
            margin-bottom: 1%;
        }
        .page-template-page-practice-records .download {
            width: 388px;
        }
        .recording-row .download-btn {
            margin-right: 8px;
        }
        .download-btn {
            width: 124px;
        }
    }
    /* 768px */
    
    @media screen and (max-width: 650px) {
        .page-template-page-practice-records .download {
            width: 430px;
        }
    }
    
    @media screen and (max-width: 550px) {
        .hb-left {
            display: block;
            width: 100%;
            padding-bottom: 88.6%;
            margin: auto;
        }
        .copyright span {
            display: inline-block;
        }
        .logo img {
            max-width: 280px;
        }
        .main-menu-button {
            top: 2px;
        }
        .record-thumbnail {
            width: 100%;
            height: 0;
            padding-bottom: 56%;
        }
        .record-info {
            width: 100%;
        }
        .record-info p {
            margin-top: 1em;
        }
        .record-top {
            padding-bottom: 0;
        }
        .pc-filter {
            display: flex;
            width: 100%;
            margin-bottom: 1em;
            justify-content: space-between;
            align-items: center;
        }
        .pc-filter label {
            width: 70px;
        }
        .pc-filter select {
            width: 100%;
        }
        .filter-subheading {
            margin-bottom: 8px;
        }
        .ft-rows,
        .ft-title,
        .ft-tabs {
            display: block;
            border: 0;
        }
        .ft-domain {
            display: none;
        }
        .ft-domain-mobile {
            display: block;
        }
        .submit-btn-container,
        .ft-tabs-desktop {
            display: none;
        }
        .filter-table {
            background-color: #fff;
        }
        .filter-button-mb {
            display: flex;
            justify-content: space-between;
        }
        .filter-button {
            position: relative;
            width: auto;
            background-color: #F7F7F7;
            border: 1px solid #1A2C44;
            border-radius: 4px;
            padding: 8px;
            font-weight: 400;
        }
        .filter-button:after {
            position: absolute;
            display: inline-block;
            right: 8px;
            top: 14px;
            width: 12px;
            height: 6px;
            vertical-align: middle;
            background-size: contain;
            background-repeat: no-repeat;
            background-image: url(images/dropdown-btn.png);
            content: '';
        }
        .other-button {
            width: 26%;
        }
        .language-button {
            width: 39%;
        }
        .domain-button {
            width: 31%;
        }
        .filter-table {
            font-size: 120%;
        }
        .ft-rows {
            display: block;
            position: fixed;
            top: 0;
            right: -100%;
            width: 100%;
            max-width: 100%;
            height: 100%;
            margin-top: 0;
            margin-right: 0;
            background-color: #fff;
            -webkit-transition: right 0.25s ease-in-out;
            transition: right 0.25s ease-in-out;
            z-index: 99;
        }
        .ft-rows.active,
        .ft-rows.active .submit-btn-container {
            right: 0;
            overflow-y: scroll;
            -webkit-transition: right 0.25s ease-in-out;
            transition: right 0.25s ease-in-out;
            overflow: scroll;
        }
        .ft-rows .menu-close {
            display: block;
            border-bottom: 0;
            padding-bottom: 0;
        }
        .ft-title {
            width: 100%;
            padding: 2% 5% 3% 5%;
            background-color: #F9F8F4;
            border-bottom: 1px solid #e2e2e0;
        }
        .ft-tabs {
            padding: 2% 5%;
        }
        .ft-tabs label {
            padding: 15px 21px;
            font-size: 16px;
        }
        .filter-checkbox {
            width: 100%;
            padding: 10px;
            border-radius: 3px;
        }
        .filter-subheading {
            font-size: 12px;
            color: #999999;
            margin-bottom: 8px;
        }
        .ft-tabs-block {
            border-bottom: 1px solid #e2e2e0;
            margin-bottom: 15px;
        }
        .ft-tabs-block:nth-last-child(2) {
            border: 0;
        }
        .ft-rows .submit-btn-container {
            display: block;
            position: fixed;
            text-align: center;
            bottom: 0;
            background-color: #fff;
            width: 100%;
            padding: 10px 10px 40px 10px;
            right: -100%;
            margin-top: 0;
            margin-right: 0;
            background-color: #fff;
            -webkit-transition: right 0.25s ease-in-out;
            transition: right 0.25s ease-in-out;
        }
        .sort-desktop,
        .level-rows,
        .speeches-row .sr-tag {
            display: none;
        }
        .sort-button {
            display: block;
        }
        form .st-right {
            width: 48px;
        }
        select#sort-difficulty {
            border: none;
        }
        .sort-mobile {
            display: block;
            text-align: left;
        }
        .ft-tabs select:nth-child(2n+2) {
            float: unset;
            width: 100%;
            border: 0;
        }
        .ft-tabs select option {
            font-size: 16px;
            padding: 15px 21px;
            border-radius: 3px;
        }
        .ft-tabs select option:checked,
        .ft-tabs select option:focus,
        .ft-tabs select option:active,
        .ft-tabs select option:hover {
            background-color: #FFF2D6!important;
            border: 1px solid #f1a000;
        }
        .ft-tabs label:hover {}
        .ft-tabs select:focus {
            background-color: #fff!important;
        }
        .speeches-rows {
            grid-template-columns: 100%;
            grid-column-gap: 0;
        }
        .speeches-row {
            overflow: hidden;
        }
        .speeches-row {
            display: inline-block;
        }
        .home .video-preview {
            float: left;
            width: 47%;
            padding-bottom: 27%;
        }
        .sr-right {
            display: inline-block;
            width: 50%;
            margin-left: 3%;
            float: right;
        }
        .sr-time {
            font-size: 1em;
        }
        .sr-tag-mb {
            display: block;
        }
        .filter-icon {
            width: 13px;
            height: 13px;
        }
        .s-top {
            padding: 1em;
        }
        form .st-right {
            margin-top: 24px;
        }
        .recording-subcontainer {
            flex-wrap: wrap;
        }
        .page-template-page-practice-records .download {
            width: 100%;
        }
    }
    /* 550px */
    
    @media screen and (max-width: 450px) {
        .copyright span {
            display: inline-block;
        }
        .copyright span:last-child {
            margin-top: 5px;
        }
        .form-col label,
        .form-col .fc-row,
        .form-col .select-input,
        .form-col .fc-row,
        .form-col input {
            width: 100%;
            text-align: left;
        }
        .form-col label {
            margin-bottom: 1%;
        }
        .account-form .form-col {
            margin-bottom: 5%;
        }
        .recording-subcontainer {
            flex-flow: column;
        }
        .playback,
        .playback-existing {
            width: 100%;
        }
        .ft-tabs select {
            width: 100%;
            margin-right: 0;
            float: unset;
        }
        .filter-button {
            font-size: 1.6em;
        }
        .other-button {
            width: 24%;
        }
        .language-button {
            width: 37%;
        }
        .domain-button {
            width: 33%;
        }
        .sr-heading {
            font-size: 1.8em;
        }
        .bottom-btns {
            padding-bottom: 2em;
        }
        .wrs-wrapper::after {
            bottom: -5.5%;
        }
        .player-button,
        .rb-btn {
            width: 37px;
            height: 37px;
        }
        .primary-btn {
            font-size: 1.6em;
            padding: 5px;
        }
        .download-icon,
        .share-icon {
            width: 16px;
            height: 16px;
        }
        .download-btn {
            width: 105px;
        }
        .recording-container p {
            width: calc(100% - 50px);
            vertical-align: middle;
        }
        .record-text,
        .message {
            font-size: 1.6em;
            text-align: left;
        }
        .text-input {
            flex-flow: column;
        }
        .text-input input {
            width: 100%;
        }
        .text-input .add-btn {
            width: 100%;
            margin: 5px 0 0 0;
            text-align: right;
        }
    }
    /* 450px */
    
    @media screen and (max-width:350px) {
        .logo img {
            max-width: 236px;
        }
        .main-menu-button {
            top: 2px;
        }
        .filter-button-mb {
            flex-flow: column;
        }
        .other-button {
            width: 100%;
        }
        .language-button,
        .domain-button {
            width: 100%;
            margin-bottom: 5px;
        }
        .video-preview {
            float: unset;
            width: 100%;
            padding-bottom: 56%;
        }
        .sr-right {
            float: unset;
            width: 100%;
            margin: 2% 0 0 0;
        }
        .speeches-row {
            padding-bottom: 1em;
        }
        .logo {
            padding: 10px 0;
        }
        .grey-block {
            flex-flow: column;
        }
        .gb-row,
        .gb-row:first-child {
            width: 100%;
            margin-bottom: 5%;
        }
    }
    /*350px */