﻿@font-face {
    font-family: 'Roboto-Thin';
    src: url("../fonts/Roboto/Roboto-Thin.ttf") format("truetype");
}

@font-face {
    font-family: 'Roboto-Light';
    src: url("../fonts/Roboto/Roboto-Light.ttf") format("truetype");
}

@font-face {
    font-family: 'Roboto-Regular';
    src: url("../fonts/Roboto/Roboto-Regular.ttf") format("truetype");
}

@font-face {
    font-family: 'Roboto-Medium';
    src: url("../fonts/Roboto/Roboto-Medium.ttf") format("truetype");
}

@font-face {
    font-family: 'Roboto-Bold';
    src: url("../fonts/Roboto/Roboto-Bold.ttf") format("truetype");
}

@font-face {
    font-family: 'Roboto-Black';
    src: url("../fonts/Roboto/Roboto-Black.ttf") format("truetype");
}

* {
    font-family: Roboto-Regular,'Open Sans';
}

body, html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

a {
    cursor: pointer;
}

.font-white {
    color: #fff;
}

.container-fluid {
    padding: 0;
}

.pageWidth {
    width: 90%;
    margin: 0 auto;
}

.minh-100vh {
    min-height: 100vh;
}

header {
    background: #8048a7;
    color: #fff;
    text-align: center;
}

    header a, footer a {
        font-weight: 700;
        color: #fff;
    }

        header a:hover, footer a:hover {
            color: #ff9b01 !important;
            font-weight: 900;
        }

footer {
    background: #8048a7;
    color: #fff;
    text-align: center;
}

    footer .footerIcons {
        margin-top: 5px;
    }

        footer .footerIcons:first-of-type {
            margin-top: 0;
        }

        footer .footerIcons .twitterIcon, footer .footerIcons .facebookIcon {
            max-width: 100%;
            max-height: 20px;
        }

    footer .footerSection {
        text-align: left;
    }

        footer .footerSection .footerSectionHeading {
            font-size: 14px;
            font-weight: bold;
        }

        footer .footerSection ul {
            padding-left: 0;
        }

            footer .footerSection ul li {
                margin-top: 5px;
                list-style: none;
                font-size: 12px;
            }

                footer .footerSection ul li a {
                    font-weight: 400;
                }

    footer .footerSectionFull {
        text-align: left;
        font-size: 12px;
    }

        footer .footerSectionFull a {
            text-decoration: underline;
            color: #fff;
        }

.logoImg {
    max-height: 5vh;
    width: auto;
}

.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.cs_btn {
    padding: 5px;
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1;
    border-radius: .25rem;
    -webkit-transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
    -o-transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
    cursor: pointer;
    white-space: normal;
}

.btn-orange {
    background: #ff9b01;
}

    .btn-orange:hover {
        background: #ffaf33;
    }

    .btn-orange:focus {
        border-color: #ffc367;
        outline: 0;
        -webkit-box-shadow: 0 0 0 .1rem #ffd79a;
        box-shadow: 0 0 0 .1rem #ffd79a;
    }

.btn-pink {
    background: #c94861;
    border-radius: 0;
    color: #fff;
}

    .btn-pink:hover {
        background: #de677e;
    }

    .btn-pink:focus {
        border-color: #e097a5;
        outline: 0;
        -webkit-box-shadow: 0 0 0 .1rem #ecbec7;
        box-shadow: 0 0 0 .1rem #ecbec7;
    }

.btn-blue {
    background: #1072c8;
    color: #fff;
    text-decoration: none;
}

    .btn-blue:hover {
        background: #3387d1;
        color: #fff;
    }

    .btn-blue:focus {
        border-color: #4da4f1;
        outline: 0;
        -webkit-box-shadow: 0 0 0 .1rem #7cbcf5;
        box-shadow: 0 0 0 .1rem #7cbcf5;
    }

.btn-gray {
    background: #464646;
    color: #fff;
    text-decoration: none;
}

    .btn-gray:hover {
        background: #797979;
        color: #fff;
    }

    .btn-gray:focus {
        border-color: #797979;
        outline: 0;
        -webkit-box-shadow: 0 0 0 .1rem #939393;
        box-shadow: 0 0 0 .1rem #939393;
    }

.searchSectionTop {
    background: #efefef;
}

.searchSoundEffects_inner {
    width: initial;
    display: inline-block;
}

    .searchSoundEffects_inner p {
        font-size: 18px;
        font-weight: 900;
        margin-bottom: 3px;
    }

@media only screen and (min-device-width:768px) and (max-device-width:1024px) {
    .searchSoundEffects_inner p {
        font-size: 16px;
    }
}

.searchSoundEffects_inner .icon-search {
    background: url(../images/search.png) #fff no-repeat right 10px center;
    background-size: 20px;
    padding-right: 30px !important;
}

    .searchSoundEffects_inner .icon-search:focus {
        background-image: url(../images/search_orange.png);
    }

input::-webkit-input-placeholder {
    font-size: .8em;
}

input:-ms-input-placeholder {
    font-size: .8em;
}

input::-ms-input-placeholder {
    font-size: .8em;
}

input::placeholder {
    font-size: .8em;
}

.form-control {
    height: 30px;
}

    .form-control:focus {
        color: #495057;
        background-color: #fff;
        border-color: #ffc367;
        outline: 0;
        -webkit-box-shadow: 0 0 0 .1rem #ffd79a;
        box-shadow: 0 0 0 .1rem #ffd79a;
    }

.signUp {
    background: #fff;
    border-radius: 7px;
    border: 1px solid #ccc;
    text-align: center;
}

    .signUp .freesfx_insiderImg {
        height: 18px;
    }

    .signUp .signUpTextSection {
        margin-top: 5px;
    }

        .signUp .signUpTextSection .cs_btn {
            white-space: nowrap;
        }

    .signUp ul {
        list-style: none;
        padding-left: 5%;
    }

        .signUp ul li {
            font-size: 14px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
        }

@media only screen and (min-device-width:768px) and (max-device-width:1024px) {
    .signUp ul li {
        font-size: 12px;
    }
}

.signUp ul li .fa-check {
    color: #ff9b01;
    margin-right: 15px;
}

@media only screen and (min-device-width:768px) and (max-device-width:1024px) {
    .signUp ul li .fa-check {
        margin-right: 5px;
    }
}

.soundEffectCategoriesContainer .soundEffectCategoriesBanner img {
    max-width: 100%;
    max-height: 100px;
}

.soundEffectCategoriesContainer .pageHeading {
    color: #bb1033;
    font-size: 24px;
}

.soundEffectCategoriesContainer .soundEffectCategories_allList .soundEffectCategories_column .soundEffectCategories_SingleList {
    color: #1072c8;
}

    .soundEffectCategoriesContainer .soundEffectCategories_allList .soundEffectCategories_column .soundEffectCategories_SingleList .count {
        color: #ff9b01;
    }

    .soundEffectCategoriesContainer .soundEffectCategories_allList .soundEffectCategories_column .soundEffectCategories_SingleList .soundEffectCategories_ListHead {
        font-weight: 700;
    }

    .soundEffectCategoriesContainer .soundEffectCategories_allList .soundEffectCategories_column .soundEffectCategories_SingleList ul {
        padding: 0;
    }

        .soundEffectCategoriesContainer .soundEffectCategories_allList .soundEffectCategories_column .soundEffectCategories_SingleList ul li {
            list-style: none;
        }

            .soundEffectCategoriesContainer .soundEffectCategories_allList .soundEffectCategories_column .soundEffectCategories_SingleList ul li a:hover {
                color: #ff9b01;
            }

.breadcrumb {
    background-color: initial;
    padding-left: 0;
}

    .breadcrumb .breadcrumb-item {
        font-size: 24px;
        color: #000;
    }

        .breadcrumb .breadcrumb-item.active {
            color: #c94861;
        }

        .breadcrumb .breadcrumb-item + .breadcrumb-item::before {
            content: ">";
        }

.subCategoriesList ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding-left: 0;
}

    .subCategoriesList ul li {
        list-style: none;
        margin-right: 40px;
        font-size: 14px;
        font-weight: bold;
    }

        .subCategoriesList ul li span.count {
            color: #c94861;
        }

        .subCategoriesList ul li a:hover {
            color: #c94861 !important;
        }

.subCategoriesDescription p {
    font-size: 14px;
}

.soundEffectSearchList ul {
    padding-left: 0;
    width: 100%;
}

    .soundEffectSearchList ul li.soundEffectSearchList-item {
        list-style: none;
    }

        .soundEffectSearchList ul li.soundEffectSearchList-item .soundEffectHeading {
            color: #c94861;
            font-size: 20px;
            font-weight: bold;
        }

        .soundEffectSearchList ul li.soundEffectSearchList-item .soundEffectDetails .playButton .playButtonIcon {
            max-width: 100%;
            cursor: pointer;
        }

        .soundEffectSearchList ul li.soundEffectSearchList-item .soundEffectDetails .soundEffectDetails_text * {
            line-height: 28px;
            font-size: 14px;
        }

@media(min-width:768px) {
    .soundEffectSearchList ul li.soundEffectSearchList-item .soundEffectDetails .soundEffectDetails_text * {
        font-size: 14px;
    }
}

@media(min-width:1200px) {
    .soundEffectSearchList ul li.soundEffectSearchList-item .soundEffectDetails .soundEffectDetails_text * {
        font-size: 16px;
    }
}

.soundEffectSearchList ul li.soundEffectSearchList-item:nth-child(odd) {
    background: #ccc;
}

.modal.show {
    padding-right: 0 !important;
}

.modal#playSoundModal.show .modal-dialog {
    -webkit-transform: translate(0,-50%);
    -ms-transform: translate(0,-50%);
    transform: translate(0,-50%);
    top: 50%;
    margin-top: 0;
}

    .modal#playSoundModal.show .modal-dialog .modal-content {
        background: #fff;
    }

        .modal#playSoundModal.show .modal-dialog .modal-content .modal-body .playPauseButton {
            top: 0;
            z-index: 98;
        }

            .modal#playSoundModal.show .modal-dialog .modal-content .modal-body .playPauseButton .playPauseIcon {
                padding: .175rem .35rem;
            }

                .modal#playSoundModal.show .modal-dialog .modal-content .modal-body .playPauseButton .playPauseIcon .fa {
                    font-size: 14px;
                }

    .modal#playSoundModal.show .modal-dialog .modal-header {
        color: #c94861;
    }

        .modal#playSoundModal.show .modal-dialog .modal-header .close {
            color: #c94861;
            opacity: 1;
        }

            .modal#playSoundModal.show .modal-dialog .modal-header .close:hover {
                color: #e097a5;
            }

.modal.show .modal-dialog {
    -webkit-transform: translate(0,-50%);
    -ms-transform: translate(0,-50%);
    transform: translate(0,-50%);
    top: 50%;
    margin-top: 0;
    margin-bottom: 0;
}

    .modal.show .modal-dialog .modal-content {
        background: #ff9b01;
    }

        .modal.show .modal-dialog .modal-content .modal-header {
            margin-top: 0;
            margin-bottom: 0;
        }

        .modal.show .modal-dialog .modal-content .modal-body .loginImg_container .loginImg {
            max-height: 6vh;
            width: auto;
        }

.modal hr {
    border-color: #464646;
}

.loginForm .form-control {
    height: 40px;
}

.loginForm .icon-user, .loginForm .icon-password {
    background-size: 20px;
    padding-right: 30px !important;
}

.loginForm .icon-user {
    background: url(../images/user.png) #fff no-repeat right 10px center;
}

    .loginForm .icon-user:focus {
        background-image: url(../images/user_orange.png);
    }

.loginForm .icon-password {
    background: url(../images/password.png) #fff no-repeat right 10px center;
}

    .loginForm .icon-password:focus {
        background-image: url(../images/password_orange.png);
    }

.loginForm .rememberMeSection {
    color: #636363;
}

    .loginForm .rememberMeSection a:hover {
        color: #fff;
    }

.SignUpSection p {
    color: #636363;
    margin-bottom: 0;
}

    .SignUpSection p a {
        color: #000 !important;
    }

        .SignUpSection p a:hover {
            color: #fff !important;
        }

.cs_checkBox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
}

    .cs_checkBox input {
        margin-right: 5px;
        outline: none;
        -webkit-appearance: none;
        background: #fff;
        width: 15px;
        height: 15px;
        top: 0;
        position: relative;
        display: inline-block;
        visibility: visible;
        cursor: pointer;
        border: 1px solid #fff;
    }

        .cs_checkBox input:checked {
            background: url(../images/check_black.png) no-repeat #fff !important;
            background-size: 10px !important;
            background-position: center !important;
            outline: none !important;
            border: 1px solid #fff;
        }

.fade-scale {
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    opacity: 0;
    -webkit-transition: all .35s linear;
    -o-transition: all .35s linear;
    transition: all .35s linear;
}

    .fade-scale.show {
        opacity: 1;
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }

.aboutUsContent {
    padding-bottom: 25vh;
}

    .aboutUsContent p {
        color: #4e4e4e;
    }

@media only screen and (min-device-width:320px) and (max-device-width:480px) {
    .aboutUsContent {
        padding-bottom: 2vh;
    }
}

.accordion .card {
    border-radius: 0;
    border: 0;
}

    .accordion .card:nth-of-type(odd) .card-header {
        background: #ccc;
    }

    .accordion .card:nth-of-type(even) .card-header {
        background: #fff;
    }

    .accordion .card .card-header {
        border-radius: 0;
        border: 0;
        padding: 1.25rem 1.25rem;
        display: flex;
        align-items: center;
    }

@media only screen and (min-device-width:320px) and (max-device-width:480px) {
    .accordion .card .card-header {
        align-items: flex-start;
    }
}

.accordion .card .card-header a {
    color: #c94861;
    font-weight: bold;
    padding-left: 15px;
}

@media only screen and (min-device-width:320px) and (max-device-width:480px) {
    .accordion .card .card-header a {
        padding-left: 3px;
    }
}

@media only screen and (min-device-width:375px) and (max-device-height:667px) and (orientation:landscape) and (-webkit-device-pixel-ratio:2) {
    .accordion .card .card-header a {
        padding-left: 3px;
    }
}

@media only screen and (min-device-width:375px) and (max-device-height:812px) and (orientation:landscape) and (-webkit-device-pixel-ratio:3) {
    .accordion .card .card-header a {
        padding-left: 3px;
    }
}

@media only screen and (min-device-width:414px) and (max-device-height:896px) and (orientation:portrait) and (-webkit-device-pixel-ratio:3) {
    .accordion .card .card-header a {
        padding-left: 3px;
    }
}

.accordion .card .card-header .accordion_arrow .accordion_arrowImg {
    width: 20px;
    height: auto;
    transform: rotate(90deg);
    transition: .25s ease all;
}

.accordion .card .card-header.collapsed .accordion_arrow .accordion_arrowImg {
    transform: rotate(0deg);
}

.accordion .card .card-body-inner {
    padding-left: 35px;
}

@media only screen and (min-device-width:320px) and (max-device-width:480px) {
    .accordion .card .card-body-inner {
        padding-left: 0;
    }
}

@media only screen and (min-device-width:375px) and (max-device-height:667px) and (orientation:landscape) and (-webkit-device-pixel-ratio:2) {
    .accordion .card .card-body-inner {
        padding-left: 0;
    }
}

@media only screen and (min-device-width:375px) and (max-device-height:812px) and (orientation:landscape) and (-webkit-device-pixel-ratio:3) {
    .accordion .card .card-body-inner {
        padding-left: 0;
    }
}

@media only screen and (min-device-width:414px) and (max-device-height:896px) and (orientation:portrait) and (-webkit-device-pixel-ratio:3) {
    .accordion .card .card-body-inner {
        padding-left: 0;
    }
}
