:root {
    --primary-color: #fed136;
    --secondary-color: #2F3032;
    --tertiary-color: #333333;
    --primary-text-color:#ffffff;
    --secondary-text-color:#ffffff;
    --tertiary-text-color:#ffffff;
    --primary-font-family: 'Merriweather', 'Helvetica Neue', Arial, sans-serif;
    --secondary-font-family:'Open Sans', 'Helvetica Neue', Arial, sans-serif;
}


body{
   font-family: var( --primary-font-family);
   color: var(--primary-text-color);
}

span:not(.ellip, .flatpickr-day, .glyphicon, .select2-container, .select2-container *, .select2, .select2 *, form *) {
    opacity: .8;
}
#page-wrapper::before{
    z-index: -1;
}

a:hover{
    text-decoration:none;
    cursor:pointer;
}
.text-primary{
    opacity: 1 ;
    color: var(--primary-color) ;
}
/* #my-cart-modal .modal-header *{
    color: #333333 ;
} */

.card, .card-header{
    border-radius: .25rem;
}

.card ul li{
    color: var(--primary-text-color-inverse);
}

.card-title{
    text-align: center;
}

.portfolio-modal .modal-content, #page-wrapper, .not-image-content, .section-content .img-button{
    position: relative;
}
.section-content .img-button:before{
    z-index: -1;
}
.portfolio-modal .modal-content:before,  #page-wrapper::before, .not-image-content::before, .section-content .img-button:before{
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  opacity: .8;
}
.section-content .img-button:before{
    border-radius:6px;
}
.row-pb{
    padding-bottom: 7em;
}

.bg-none{
    background: none ;
}

.btn-primary{
    background: var(--primary-color);
    color: var(--primary-text-color);
    border: 2px solid var(--primary-color);
}

.btn-secondary{
    background: var(--secondary-color);
    color: var(--secondary-text-color);
    border: 2px solid var(--secondary-color);
}

.btn-tertiary{
    background: var(--tertiary-color);
    color: var(--tertiary-text-color);
    border: 2px solid var(--tertiary-color);
}
.btn-primary:hover{
    background: var(--primary-text-color) ;
    color: var(--primary-color) ;
    border-color: var(--primary-color);
}

.btn-secondary:hover{
    background: var(--secondary-text-color) ;
    color: var(--secondary-color) ;
    border-color: var(--secondary-color);
}

.btn-tertiary:hover{
    background: var(--tertiary-text-color) ;
    color: var(--tertiary-color) ;
    border-color: var(--tertiary-color);
}
button:focus{
    outline:none ;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var( --secondary-font-family);
    color: var(--primary-color) ;
}


.btn {
    font-family: var( --secondary-font-family);
    border: none;
    border-radius: 300px;
    font-weight: 700;
    text-shadow: none ;
    padding: 10px 20px;
    text-transform: uppercase;
}
.opacity{
    width: 100%;
    height:100%;
    background: rgba(0,0,0, .25);
    left: 0px;
    top:0px;
}

.modal h3, .modal h2, .modal h1, .modal h4, .modal h5, .modal h6{
    color: var(--primary-text-color-inverse);
    text-shadow: none ;
    z-index: 1;
}

.modal p{
   color: var(--primary-text-color-inverse);
   text-shadow: none ;
}

.swal2-container .swal2-popup .swal2-title, .swal2-container .swal2-popup .swal2-content{
    color: var(--primary-text-color-inverse);
}

.modal-backdrop.show{
	opacity: .95;
}

.swal2-container .swal2-popup, .modal-content{
    background: #f8f9fa;
    position: relative;
}

.swal2-container .swal2-popup:before{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    opacity: .08;
    background: var(--primary-text-color-inverse);
}

.modal-content:before{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    opacity: .08;
    background: var(--primary-text-color-inverse);
    z-index: -1;
}

.modal-dialog .modal-header{
    background: var(--primary-color);
    font-family: var(--primary-font-family);
    position: relative;
}

 .modal-dialog .modal-header:before{
    content: "";
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    background: var(--primary-text-color);
    opacity: .8;
}

 .modal-header, .modal-footer{
    border-bottom: none;
    border-top: none;
}

 .modal-header h4{
    font-size:22px;
    font-weight: 400;
    margin: 0px auto;
    z-index: 1;
    color: #fff;
}
 .modal-header h4 span{
    margin-right: 10px;
}

 .modal-header .close {
    padding: 0px;
    margin: 0px;
    text-shadow: none;
    color: #fff;
}

.parallax{
    background-attachment: fixed ;
    background-repeat: no-repeat ;
    background-size: cover ;
}

/*breadcrumb*/

.section-product .categories .breadcrumb{
    background: transparent;
}

.section-product .categories .breadcrumb a{
    color : var(--primary-text-color);
}

@media screen and (max-width: 769px) {
    h2{
        font-size:40px ;
    }

    h4{
        font-size: 26px ;
    }

    h5{
        font-size: 24px ;
    }

    p{
        font-size: 16px ;
    }
    main{
        padding: 0 40px 0 40px;
    }
}


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

    h2{
        font-size:30px ;
        margin-bottom: 10px;
    }

    h4{
        font-size: 22px ;
    }

    h5{
        font-size: 20px ;
    }

    main{
        padding: 0 30px 0 30px;
    }
}

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

    h2{
        font-size:25px ;
    }

    h4{
        font-size: 20px ;
    }

    h5{
        font-size: 18px ;
    }

    p:not(.product-value p){
        font-size: 14px ;
    }
}


.ellipsis:before {
      content: '...';
      position: absolute;
      right: 0;
      bottom: 0;

}
.ellipsis:after {
      content: '';
      position: absolute;
      right: 0;
      width: 1em;
      height: 2em;
      margin-top: 0.2em;
      background: #fff;
    }


  .ellipsis {
    overflow: hidden;
    position: relative;
    line-height: 1.2em;
    max-height:  2.2em;
    text-align: justify;
    margin-right: -1em;
    padding-right: 1em;
  }
  .ellipsis p{
      text-align: left;
  }