/* Fonts */
@import url(https://fonts.googleapis.com/css?family=Montserrat:500,400,300,600,700,800&display=swap);
@font-face {
    font-family: 'Myanmar MN';
    font-style: normal;
    font-weight: 300;
    src: url(../../webfonts/MyanmarMN.otf);
    font-display: swap;
}

@font-face {
    font-family: 'Myanmar MN Bold';
    font-style: normal;
    font-weight: 300;
    src: url(../../webfonts/MyanmarMN-Bold.otf);
    font-display: swap;
}

:root{
    --default_color: #212529;
    --sel_color:#f3cabb;
    --pink:#ff1c54;
    --green:#93d50a;
    --grey:#ccc;
    --background_light_grey:#f8f8f8;
    --input_border:#f1f1f1;
    --border_color:#d3d3d3;
    --pagination_color:#6c757d;
}

a{
    color:var(--pink);
}

ul{
    list-style: none;
    padding: 0;
}

img{
    max-width: 100%;
}
.cl-black,
.cl-black > a{
    color:var(--default_color)!important;
}
.bg-white{
    background-color: #fff;
}
.bg-light-grey{
    background-color: var(--background_light_grey);
}
.sel-color{
    color:var(--sel_color);
}
.pink-color{
    color:var(--pink)!important;
}
.grey-color{
    color:var(--grey)!important;
}

.half-15 {
    width: calc(50% - 15px);
}
.point-event-none{
    pointer-events: none;
}
.d-none-none{
    display: none!important;
}

.fs-6{
    font-size: 1rem;
}
.fs-7{
    font-size: .75rem;
}

/*MARGIN RIGHT*/
.mr0{margin-right: 0px}
.mr5{margin-right: 5px}
.mr10{margin-right: 10px}
.mr15{margin-right: 15px}
.mr20{margin-right: 20px}
.mr25{margin-right: 25px}
.mr30{margin-right: 30px}
.mr35{margin-right: 35px}
.mr40{margin-right: 40px}
.mr45{margin-right: 45px}
.mr50{margin-right: 50px}
.mr55{margin-right: 55px}
.mr60{margin-right: 60px}
.mr65{margin-right: 65px}
.mr70{margin-right: 70px}

/*MARGIN TOP*/
.mt0{margin-top: 0px}
.mt5{margin-top: 5px}
.mt10{margin-top: 10px}
.mt15{margin-top: 15px}
.mt20{margin-top: 20px}
.mt25{margin-top: 25px}
.mt30{margin-top: 30px}
.mt35{margin-top: 35px}
.mt40{margin-top: 40px}
.mt45{margin-top: 45px}
.mt50{margin-top: 50px}
.mt55{margin-top: 55px}
.mt60{margin-top: 60px}
.mt65{margin-top: 65px}
.mt70{margin-top: 70px}

/*MARGIN BOTTOM*/
.mb0{margin-bottom: 0px}
.mb5{margin-bottom: 5px}
.mb10{margin-bottom: 10px}
.mb15{margin-bottom: 15px}
.mb20{margin-bottom: 20px}
.mb25{margin-bottom: 25px}
.mb30{margin-bottom: 30px}
.mb35{margin-bottom: 35px}
.mb40{margin-bottom: 40px}
.mb45{margin-bottom: 45px}
.mb50{margin-bottom: 50px}
.mb55{margin-bottom: 55px}
.mb60{margin-bottom: 60px}
.mb65{margin-bottom: 65px}
.mb70{margin-bottom: 70px}
.mb80{margin-bottom: 80px}

.pt0{padding-top: 0px}

.pr0{padding-right: 0px}
.pr5{padding-right: 5px}
.pr10{padding-right: 10px}
.pr15{padding-right: 15px}
.pr20{padding-right: 20px}
.pr25{padding-right: 25px}
.pr30{padding-right: 30px}
.pr35{padding-right: 35px}
.pr40{padding-right: 40px}
.pr45{padding-right: 45px}
.pr50{padding-right: 50px}
.pr55{padding-right: 55px}
.pr60{padding-right: 60px}
.pr65{padding-right: 65px}
.pr70{padding-right: 70px}
.pr80{padding-right: 80px}
.pr90{padding-right: 90px}
.pr100{padding-right: 100px}

.pl0{padding-left: 0px}
.pl0{padding-left: 0px}
.pl5{padding-left: 5px}
.pl10{padding-left: 10px}
.pl15{padding-left: 15px}
.pl20{padding-left: 20px}
.pl25{padding-left: 25px}
.pl30{padding-left: 30px}
.pl35{padding-left: 35px}
.pl40{padding-left: 40px}
.pl45{padding-left: 45px}
.pl50{padding-left: 50px}
.pl55{padding-left: 55px}
.pl60{padding-left: 60px}
.pl65{padding-left: 65px}
.pl70{padding-left: 70px}
.pl80{padding-left: 80px}
.pl90{padding-left: 90px}
.pl100{padding-left: 100px}

.pb0{padding-bottom: 0px}
.pb5{padding-bottom: 5px}
.pb10{padding-bottom: 10px}
.pb15{padding-bottom: 15px}
.pb20{padding-bottom: 20px}
.pb25{padding-bottom: 25px}
.pb30{padding-bottom: 30px}
.pb35{padding-bottom: 35px}
.pb40{padding-bottom: 40px}
.pb45{padding-bottom: 45px}
.pb50{padding-bottom: 50px}
.pb55{padding-bottom: 55px}
.pb60{padding-bottom: 60px}
.pb65{padding-bottom: 65px}
.pb70{padding-bottom: 70px}

.pt0{padding-top: 0px}
.pt5{padding-top: 5px}
.pt10{padding-top: 10px}
.pt15{padding-top: 15px}
.pt20{padding-top: 20px}
.pt25{padding-top: 25px}
.pt30{padding-top: 30px}
.pt35{padding-top: 35px}
.pt40{padding-top: 40px}
.pt45{padding-top: 45px}
.pt50{padding-top: 50px}
.pt55{padding-top: 55px}
.pt60{padding-top: 60px}
.pt65{padding-top: 65px}
.pt70{padding-top: 70px}
.pt80{padding-top: 80px}
.pt90{padding-top: 90px}
.pt100{padding-top: 100px}

.before-1-2:before{
    content:'';
    padding-top: 50%;
    display: block;
}
.before-3-4:before{
    content:'';
    padding-top: 75%;
    display: block;
}
.before-1-1:before{
    content:'';
    padding-top: 100%;
    display: block;
}
.before-4-3:before{
    content:'';
    padding-top: 125%;
    display: block;
}
.before-3-2:before{
    content:'';
    padding-top: 150%;
    display: block;
}
.before-4-2:before{
    content:'';
    padding-top: 200%;
    display: block;
}

.width-10{flex: 0 0 10%}
.width-20{flex: 0 0 20%}
.width-30{flex: 0 0 30%}
.width-40{flex: 0 0 40%}
.width-50{flex: 0 0 50%}
.width-60{flex: 0 0 60%}
.width-70{flex: 0 0 70%}
.width-80{flex: 0 0 80%}
.width-90{flex: 0 0 90%}
.width-100{flex: 0 0 100%}

.n-row-1{
    -webkit-line-clamp: 1;
}
.n-row-2{
    -webkit-line-clamp: 2!important;
}
.n-row-3{
    -webkit-line-clamp: 3;
}
.n-row-4{
    -webkit-line-clamp: 4;
}
.n-row-5{
    -webkit-line-clamp: 5;
}

.minor-title{
    font-size: 1.4rem;
    color: var(--default_color);
    margin: 10px 0;
    font-weight: 300;
}
.minor-title>a{
    color: var(--default_color);
}
.minor-title>a:hover{
    color: var(--pink);
}

#cart_header_number::before{
    content: '(';
}
#cart_header_number::after{
    content: ')';
}
#cart_header_euro{
    margin-left: 10px;
}
.euro-symbol-before:before,
#cart_header_euro:before{
    content: '€ ';
}

.image{    
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}
.image.contain{
    background-size: contain;
}
.image.cover{
    background-size: cover;
}
.image>a{
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.transition{
    transition:all 400ms!important;
}
.transition-600{
    transition:all 600ms;
}

.alert{
    position:relative;
    width:100%;
    box-sizing: border-box;
    padding:10px 0;
    text-align: center;
    margin:0;
}
.alert i:not(.remove){
    display: inline-block;
    padding-right: 5px
}
.alert i.remove{
    position:absolute;
    top:5px;
    right:8px;
}
.not-available{
    color:#e00;
    font-weight: 600;
    flex: 0 0 80%;
    min-height: 27px;
    max-width: 100%;
    text-align: center;
}

#success,
#noSize,
.popup-notify,
#failed{ 
    position: fixed; 
    width: 100vw; 
    height: 100%; 
    background: rgba(0,0,0,0.5); 
    display:none; 
    z-index: 9999; 
    top:0;
}
#success .top,
#noSize p,
.popup-notify p,
#failed p { 
    background: #FFF;
    padding: 20px 10px; 
    border:3px solid var(--sel_color);
    border-radius: 3px; 
    box-shadow: 0 0 20px rgba(0,0,0,0.6); 
    width: 400px; 
    line-height: 20px;	
    margin: -30px 0 0 -150px; 
    text-align: center; 
    top: 50%; 
    left: 50%;
    position:relative;
    text-transform: uppercase;
    font-weight: 600;
    z-index: 9999; 
}

#success .top{
    padding: 40px 20px;
    text-align: start;
    border-radius: 10px;
    left: 0;
    margin: 0 auto;
    top: 40%;
    display: block !important;
}

#success .top p{}

@media only screen and (min-width: 769px){
    #success .top{
        width: 500px;
    }
}

@media only screen and (max-width: 768px){
    #success .top{
        width: 90%;
    }
}




#success .top-btn{
    background: #FFF;
    outline: none;
    border: none;
    position: absolute;
    right: 10px;
    top: 10px;
    color: #e5007e;
    font-size: 20px;
}

#success .left{
    background: #FFF;
    outline: none;
    border: 1px solid #000;
    padding: 12px 18px;
}

#success .right{
    background: #000;
    outline: none;
    border: none;
    color: white;
    padding: 12px 18px;
    font-weight: 600;
    transition: all .3s
}

#success .right:hover{
    background-color: #e5007e;
}

#success .right a:hover{
        text-decoration: none;
}



#success h5{
    font-weight: 600;
}
.popup-notify p.error-form{
    border: none;
    color:#fff;
    background-color: #f70031;
    width: 500px;
    max-width: 100%;
}
.message-success{
    background: #dff0d8;
    border:1px solid #d6e9c6;
    color:#3c763d
}
.message-offers{
    background: var(--pink);
    border:1px solid var(--pink);
    color:#fff
}
.message-success a,
.message-success a i,
.message-success i{
    color:#3c763d;
}

.message-failed{
    background: #f2dede;
    border:1px solid #ebccd1;
    color:#a94442;
    margin-bottom: 20px;
    padding: 16px;
}
.message-failed a,
.message-failed a i,
.message-failed i{
    color:#a94442;
}
.message-advise{
    background-color: #ffd38a;
    border-left: 5px solid #8c5502;
    color:#8c5502;
    text-align: center;
    padding: 0 15px;
    margin-bottom: 6px
}
@media(min-width: 768px){
    .only-mobile{
      display: none!Important;
  }
}
@media(max-width: 767px){
  .only-mobile{
      display: block!Important;
  }
  .no-mobile{
      display: none!important
  }
  #success p, #noSize p, .popup-notify p, #failed p,.popup-notify p.error-form{
      left: 5%;
      width: 90%;
      margin:-50px 0 0
  }
  
    .width-mobile-10{flex: 0 0 10%}
    .width-mobile-20{flex: 0 0 20%}
    .width-mobile-30{flex: 0 0 30%}
    .width-mobile-40{flex: 0 0 40%}
    .width-mobile-50{flex: 0 0 50%}
    .width-mobile-60{flex: 0 0 60%}
    .width-mobile-70{flex: 0 0 70%}
    .width-mobile-80{flex: 0 0 80%}
    .width-mobile-90{flex: 0 0 90%}
    .width-mobile-100{flex: 0 0 100%}
    
}

@media (max-width: 767px) {
    #success .top p{
        margin: unset !important;
    }
}

.btn.bg-main-color{
    background-color: var(--sel_color);
    border-color: var(--sel_color);
    color: var(--default_color);
    transition: all 400ms;
}
.btn.bg-main-color:hover{
    background-color: var(--default_color);
    border-color: var(--default_color);
    color: var(--sel_color);
    
}

@media(min-width: 768px){
    .col-sm-10{
        flex: 0 0 10%;
        max-width: 10%;
    }
    .col-sm-15{
        flex: 0 0 15%;
        max-width: 15%;
    }
    .col-sm-20{
        flex: 0 0 20%;
        max-width: 20%;
    }
    .col-sm-30{
        flex: 0 0 30%;
        max-width: 30%;
    }
    .col-sm-40{
        flex: 0 0 40%;
        max-width: 40%;
    }
    .col-sm-50{
        flex: 0 0 50%;
        max-width: 50%;
    }
    .col-sm-60{
        flex: 0 0 60%;
        max-width: 60%;
    }
    .col-sm-70{
        flex: 0 0 70%;
        max-width: 70%;
    }
    .col-sm-80{
        flex: 0 0 80%;
        max-width: 80%;
    }
    .col-sm-85{
        flex: 0 0 85%;
        max-width: 85%;
    }
    
}