/* default styles here for older browsers. 
       I tend to go for a 600px - 960px width max but using percentages
    */

.js-example-basic-single {
    background-color: transparent;
    border-color: transparent;
    color: white;
    cursor: pointer;
}

    .js-example-basic-single:focus {
        background: rgb(0, 0, 0, .5);
        color: white;
        cursor: pointer;
    }

    .js-example-basic-single:hover {
        background: rgb(0, 0, 0, .5);
        color: white;
        cursor: pointer;
    }

.lang-option {
    /*color:black;*/
    cursor: pointer;
}

@media only screen and (min-width: 960px) {
    /* styles for browsers larger than 960px; */

}

@media only screen and (min-width: 1440px) {
    /* styles for browsers larger than 1440px; */
}

@media only screen and (min-width: 2000px) {
    /* for sumo sized (mac) screens */
}

@media only screen and (max-device-width: 480px) {
    /* styles for mobile browsers smaller than 480px; (iPhone) */
}

@media (max-width: 1198px) {
    .js-example-basic-single {
        background-color: transparent;
        border-color: transparent;
        color: black;
        cursor: pointer;
        font-weight: 600;
        display: block;
        border-top: solid 1px #e0e0e0;
        text-align: left;
        padding: 15px 15px;
        margin-left: -35px;
    }

    .lang-option {
        /*color: black;*/
        cursor: pointer;
    }
}
/* different techniques for iPad screening */
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
    /* For portrait layouts only */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
    /* For landscape layouts only */
}