/*@import "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";*/
@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css";
@import url('https://fonts.googleapis.com/css?family=Montserrat');

/*Table of content
    1 -> Navbar
        1.1 notifications
        1.2 language

    2 -> fonts

    3  -> Sidebar

    4 -> Backgrounds

!Table of content*/

::selection {
    text-shadow: none;
    /*background: #fed136; */
    background: #FA6A2E;
    color:white;
}

body {
    font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    background: linear-gradient(rgba(235, 235, 235, 0.95), rgba(235, 235, 235, 0.95)), url('../../img/fon.png');
    -webkit-background-size: 100%;
    background-size: 100%;
}

.smooth{
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.active {
    background: #4e555b;
    background: rgba(0,0,0,0.2);
}

/*Navbar */

.navbar{
    background: #343a40;
}

.navbar .img-logo {
    width: 40px;
    height: 40px;
}

.nav-link, .nav-item, .navbar-nav, .navbar-dark{
    color:white;
}

.navbar ul li{
    font-size: 1.2em;
}

nav.navbar.shrink {
    padding: 0px;
}

nav.navbar.shrink a, nav.navbar.shrink i {
    font-size: 14px;
    padding-top: 5px;
    padding-bottom: 5px;
    transition: all 0.3s ease;
}

nav.navbar.shrink .img-logo {
    width: 30px;
    height: 30px;
}

nav.navbar.shrink .shopping-cart {
    width: 30px;
    height: 30px;
    font-size: 13px;
    padding: 7px;
}

nav.navbar.shrink .shopping-cart-items-count {
    padding: 4px;
}

nav, nav.navbar.shrink, nav.navbar.shrink button, nav.navbar.shrink input, nav.navbar input, nav.navbar ul li {
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

/* 1.1 - notifications*/
#notificationsBtn {
    cursor: pointer;
}

#hidden-noti-bar {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    position: absolute;
    top: 30px;
    width: 500px;
    max-height: 450px;
    min-height: 70px;
    right: 1%;
    color: black;
    background: #fff;
    border: solid 1px #e6e6e6;
    border-radius: 3px;
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .0975);
    box-shadow: 0 0 5px rgba(0, 0, 0, .0975);
    display: none;
    overflow: auto;
    z-index: 1000000;
    padding: 5px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#hidden-noti-bar .notifications-list {
    max-height: 320px;
    overflow-y: auto;
}

/*!notifications*/

/* 1.2 language */
.language-selection-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.language-selection {
    font-size: 0.6em;
    margin-left: 10px;
    margin-right: 10px;
}

.lang-option {
    padding: 1px;
}

.lang-icon {
    width: 25px;
    height: 20px;
}

nav.navbar.shrink .lang-option {
    padding: 0;
}

nav.navbar.shrink .lang-icon {
    height: 13px;
    width: 15px;
}
/* !language */

/*!Navbar */


/*Fonts*/
.cookiefont {
    font: normal 36px 'Cookie', cursive;
}

.cookiefont span {
    color: #5383d3;
}
.font-amatic, .font-amatic-big, .font-amatic-very-big {
    font: normal normal normal 45px/1.4em 'amatic sc', cursive;
    color: #251E1B;
    font-size: 1.7em;
}

.font-kirang-hearang {
    font-family: 'Kirang Haerang', 'Montserrat', "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.font-amatic-very-big {
    font-size: 5em;
    font-weight: 700;

}

.text-orange-hover:hover {
    color: #FA6A2E;
}

.btn-outline-viber {
    color: rgb(102, 92, 172);
    border-color: rgb(102, 92, 172);
    background: transparent;
}

.btn-outline-viber:hover {
    background-color: rgb(102, 92, 172);
    color: white;
}

.font-caveat, .font-caveat-big{
    font-family: 'Caveat', cursive;
}

.font-banner{
    font-size: 4.5em;
    text-shadow: 1px 1px 15px black, 1px 1px 15px black, 1px 1px 15px black, 1px 1px 15px black;
}

.text-orange {
    color: #FA6A2E;
}

.t-white{
    color: white;
}

/*!Fonts*/

/* sidebar */
.sidebar-section{

}

.sidebar-background{
    background: #ededed;
    background: linear-gradient(to right, #ededed, rgba(0,0,0,0));
}

.sidebar-item{
    padding: 5px;
}

.side-product{
    cursor: pointer;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.side-product:hover{
    background-color: #00c851!important;
    color: #fff!important;
}

/* end sidebar */


/*Backgrounds*/
.bg-trans-dark {
    background-color: rgba(0, 0, 0, 0.5);
}

.bg-trans-light{
    background-color: rgba(255,255,255,0.5);
}

.bg-trans-gray{
    border-top-color: rgba(169,169,169,0.5) ;
    background-color: rgba(169,169,169,0.5);
}

.stylish-trans-dark {
    background-color: rgba(62, 69, 81, 0.8);
}

.bg-container{
    background: rgba(255, 255, 255, 0.95);
}

/*!Backgrounds*/

.display-none {
    display: none;
}

.show-on-mobile-only {
    display: none;
}

.pb-container{
    padding-bottom: 20px;
}

.mt-container{
    margin-top: 100px;
}

.raw-content{
    white-space: pre-wrap;
}

hr {
    border-color: rgba(255, 191, 183, 0.6);
}

.link-like {
    color: #337ab7;
    cursor: pointer;
    display: inline-block;
}

.link-like:hover {
    text-decoration: underline;
    height: auto;
}

.max-width-container {
    max-width: 1300px;
}

.fit-in-screen, .fit-in-screen-after {
    max-width: 1250px;
    display: block;
    margin: 100px auto 0;
    background: rgba(230, 250, 250, 0.9);
    padding: 25px 5px 10px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

@media screen and (max-width: 1100px) {

}

@media screen and (max-width: 768px) {
    body {
        background: rgba(229, 229, 229, 0.7);
    }

    .d-mobile-none {
        display: none;
    }

    .font-amatic-very-big {
        font-size: 4em;
    }

    .language-selection-container {
        align-items: flex-start;
        justify-content: left;
    }

    .language-selection {
        font-size: 1em;
    }

    .lang-icon {
        width: 32px;
        height: 28px;
    }
}