/**
 * @file
 * Bartik layout styling.
 */

/**
 * Container
 */
 .layout-container {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

.audio-formatter-field-wrapper {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
    align-items: center;
}

.audio-formatter-field-wrapper audio {
    margin-right: 10px;
}

@media all and (min-width: 851px) {
    .layout-container {
        max-width: 960px;
    }
}

/**
 * Main
 */
.layout-main-wrapper {
    min-height: 300px;
}

.layout-main {
    margin-top: 40px;
    margin-bottom: 40px;
}

@media ( min-width: 960px) {
    .view-courses .views-field.views-field-name,
    .courses-grid-wrapper li .course-description {
        font-size: 19px;
    }

    .courses-grid-wrapper li .course-description .count-down-container {
        font-size: 14px;
    }

    /*MASTERED panel fixed position*/
    #page-top-panel {
        position: fixed;
        width: 100%;
        z-index: 99;
    }
    .quiz-page #page-top-panel {
        position: relative;
    }


    #header {
        padding-top: 42px;
    }

}

@media ( max-width: 960px) {
    .view-courses .views-field.views-field-name,
    .courses-grid-wrapper li .course-description {
        font-size: 17px;
    }
}

@media ( min-width: 760px) {
    .field--name-field-video {
        width: 480px;
    }
}

@media ( max-width: 760px) {
    .center-wrapper.flex{
        flex-direction: column;
    }
    .center-wrapper.flex.page-2cols .col{
        width: 100%;
        margin-bottom: 20px;
    }

    tr td, tr th {
        padding: 4px 5px !important;
    }

    .page-3cols .col-first,
    .page-3cols .col,
    .page-3cols .col-last {
        float: none;
        width: 100%;
    }

    .page-2cols .col-first,
    .page-2cols .col-last {
        float: none;
        width: 100%;
    }

    .page-3cols .col-first .inside,
    .page-3cols .col .inside,
    .page-3cols .col-last .inside,
    .page-2cols .col-first .inside,
    .page-2cols .col-last .inside {
        margin: 10px 0;
    }

    /*.learn-x-with-quizzes {
        float: right;
        width: 50%;
        font-size: 150%;
        padding: 0px;
    }*/

    #flipcard-quiz-selection-form #edit-learn,
    #flipcard-quiz-selection-node #edit-learn,
    input.learn-button,
    a.button.learn-button,
    .view-courses ul.pager a {
        /*min-width: 0;*/
    }

    .language-website .region-header,
    .language-website .region-secondary-menu,
    .home .region-header {
        display: none;
    }

    .region-page-top-panel {
        padding: 0;
    }

    .region-page-top-panel .block-system-branding-block {
        display: block;
        margin: 10px auto 10px auto;
        float: none;
        width: 270px;
    }

    .region-page-top-panel .block-system-branding-block .site-branding__logo{
        float: left;
        margin-right: 0;
        margin-bottom: 0;
        line-height: 1;
        text-decoration: none;
    }

    .region-page-top-panel .block-system-branding-block .site-branding__text {
        padding-top: 18px;
    }

    .region-page-top-panel .block-system-branding-block .site-branding__slogan {
        font-size: 13px;
    }

    .region-page-top-panel #block-lingopolomasteryhighscores {
        text-align: center;
        padding: 0 10px 10px 10px;
    }

    .region-page-top-panel #block-lingopolomasteryhighscores h2 {
        display: inline-block;
        float: none;
    }

    /*.view.view-lingopolo-recent-additions table th.views-field-created,
    .view.view-lingopolo-recent-additions table td.views-field-created{
        display: none;
    }*/

    .lang-list.four {
        flex-direction: column;
        padding-bottom: 0;
    }

    .center-wrapper.flex > col {
        width: 100%;
    }

    .entry-main-info {
        flex-direction: column;
        padding-bottom: 0;
    }

    .entry-main-info > col {
        width: 100%;
    }

    .entry-main-info .entry-buttons {
        float: none;
        text-align: left;
    }

    #page-top-panel #block-searchformmobile {
      display: block;
    }
}

@media (min-width: 600px) {
    .field--name-field-thai p {
        margin: 0px;
    }

    .field--name-title-field p {
        margin: 0px;
    }

    .thai-lesson-word,
    .breakdown_th {
        font-size: 300%;
    }

    .thai-lesson-word p,
    .views-field.views-field-field-thai a p,
    .breakdown_th p {
        margin: 0px;
    }



    /*.course-page .table {
        display: table;
        border-collapse: separate;
        border-spacing: 20px 0;
    }

    .course-page .row {
        display: table-row;
        padding: 0;
    }

    .course-page .col {
        display: table-cell;
        vertical-align: top;
        width: 50%;
    }*/
}

@media ( max-width: 600px) {
    .layout-main {
      margin-top: 20px;
      margin-bottom: 20px;
    }

    .lang-list.three {
        flex-direction: column;
        padding-bottom: 0;
    }

    .region-page-top-panel #block-lingopolomasteryhighscores #high-scores-list-container {
        width: 90%;
    }

    .lang-box .lang-select-prompt {
        text-align: center;
    }

    .lang-box .lang-list .lang-single {
        float: none;
        width: auto;
    }
}

/**
 * Courses Grid Layout
 */

@media (min-width: 900px) {
    .view-courses .view-content .views-row,
    .courses-grid-wrapper li {
        width: 23%;
        margin-right: 1%;
    }

    .courses-grid-wrapper li:nth-child(4n),
    .view-courses .view-content .views-row:nth-child(4n) {
        margin-right: 0;
    }
}

@media ( max-width: 900px) {
    .view-courses .view-content .views-row,
    .courses-grid-wrapper li {
        width: 31%;
        margin-right: 1.5%;
    }

    .view-courses .view-content .views-row:nth-child(4n),
    .courses-grid-wrapper li:nth-child(4n) {
        margin-right: 1.5%;
    }

    .courses-grid-wrapper li:nth-child(3n),
    .view-courses .view-content .views-row:nth-child(3n) {
        margin-right: 0;
    }
}

@media ( max-width: 800px) {
    .view-courses .view-content .views-row,
    .courses-grid-wrapper li {
        margin-right: 0.9%;
    }

    .view-courses .view-content .views-row:nth-child(4n),
    .courses-grid-wrapper li:nth-child(4n) {
        margin-right: 0.9%;
    }
}

@media (min-width: 760px) {
    .course-page .course-pagination {
        display: flex;
    }

    .course-page .course-pagination .control {
        width: 33.3%;
    }

    .course-page .course-pagination .control ul li {
        margin-right: 0;
    }

    .course-page .course-pagination .control.previous {
        text-align: left;
    }

    .course-page .course-pagination .control.next {
        text-align: right;
    }

    .course-page .course-lessons {
        display: flex;
        justify-content: space-between;
    }

    .lesson-box {
        width: 49%;
    }
}

@media ( max-width: 700px) {
    .view-courses .view-content .views-row,
    .courses-grid-wrapper li {
        width: 47%;
        margin-right: 2%;
    }

    .view-courses .view-content .views-row:nth-child(4n),
    .courses-grid-wrapper li:nth-child(4n),
    .view-courses .view-content .views-row:nth-child(3n),
    .courses-grid-wrapper li:nth-child(3n) {
        margin-right: 2%;
    }

    .view-courses .view-content .views-row:nth-child(2n),
    .courses-grid-wrapper li:nth-child(2n) {
        margin-right: 0;
    }
}

@media ( min-width: 600px) {
    .audio-formatter-field-wrapper {
        flex-direction: row; 
    }
    .audio-formatter-field-wrapper audio {
        margin-right: 34px;
    }
    .audio-formatter-field-wrapper .play-audio-slowly {
        margin-right: 20px;
    }
}

@media ( max-width: 600px) {
    .view-courses .view-content .views-row,
    .courses-grid-wrapper li {
        margin-right: 0.8%;
    }

    .view-courses .view-content .views-row:nth-child(4n),
    .courses-grid-wrapper li:nth-child(4n),
    .view-courses .view-content .views-row:nth-child(3n),
    .courses-grid-wrapper li:nth-child(3n) {
        margin-right: 0.8%;
    }

    .course-page .col {
        width: 100%;
    }

    .path-flipcard .lesson-photos,
    .page-node-type-entry .lesson-photos {
        float: none;
        width: 100%;
        padding-left: 0px;
    }

    .path-flipcard .lesson-info {
        width: 100%;
    }

}

@media ( min-width: 500px) {
    .view-testimonials .view-header {
        margin-top: -40px;
    }
}

@media ( max-width: 500px) {
    .view-courses .view-content .views-row,
    .courses-grid-wrapper li {
        width: 98%;
        margin-right: 0;
    }

    .view-courses .view-content .views-row:nth-child(4n),
    .courses-grid-wrapper li:nth-child(4n),
    .view-courses .view-content .views-row:nth-child(3n),
    .courses-grid-wrapper li:nth-child(3n),
    .view-courses .view-content .views-row:nth-child(2n),
    .courses-grid-wrapper li:nth-child(2n) {
        margin-right: 0;
    }
}