/* stasysiia.com */
 @import url('https://fonts.googleapis.com/css2?family=Exo&display=swap');
 body {
     background-color: #fff;
     font-family: 'Exo', sans-serif;
     font-size: 22px;
     margin: 0;
     padding: 0;
     color: #111111;
     justify-content: center;
     align-items: center;
}
 a {
     color: #0e1111;
     text-decoration: none;
}
 button {
     appearance: auto;
     -webkit-writing-mode: horizontal-tb !important;
     text-rendering: auto;
     color: -internal-light-dark(black, white);
     letter-spacing: normal;
     word-spacing: normal;
     text-transform: none;
     text-indent: 0px;
     text-shadow: none;
     display: inline-block;
     text-align: center;
     align-items: flex-start;
     cursor: default;
     background-color: -internal-light-dark(rgb(239, 239, 239), rgb(59, 59, 59));
     box-sizing: border-box;
     margin: 0em;
     padding: 1px 6px;
     border-width: 2px;
     border-style: outset;
     border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
     border-image: initial;
     border-radius: 4px;
}
 .btn-check:focus+.btn-primary, .btn-primary:focus {
     color: #fff;
     background-color: #111;
     border-color: transparent;
     box-shadow: 0 0 0 0.25rem rgb(49 132 253 / 50%);
}
 button:hover, .btn:hover {
     box-shadow: 5px 5px 7px #c8c8c8, -5px -5px 7px white;
}
 button:active {
     box-shadow: 2px 2px 2px #c8c8c8, -2px -2px 2px white;
}
 .modal-dialog {
     top: 20%;
    overflow-y: hidden;
}
 .modal-backdrop {
     background:rgba(0, 0, 0,.4);
     overflow-y: hidden;
}
 .modal-body {
     position: relative;
     flex: 1 1 auto;
     padding: 0rem 1rem;
     overflow-y: hidden;
}
 .modal-title {
     font-size:1.3em;
}
 .modal-content {
     background-color: #f7f7f7 ;
     border-radius: none;
     border: 1px white solid !important;
     padding:2px 10px;
     overflow-y: hidden;
}
 .modal-footer button {
     background-color: #fff;
}
 .fade:not(.modal-backdrop) {
     transform: scale(0);
     opacity: 0;
     -webkit-transition: all .25s linear;
     -o-transition: all .25s linear;
     transition: all .25s linear;
}
 .fade.show:not(.modal-backdrop) {
     opacity: 1;
     transform: scale(1);
}
 form {
     margin-bottom: 1.3em;
}
 form div {
     margin-bottom: .4em;
}
 form div:not(.form-check) input, form div textarea {
     border: none;
     /* margin: 0 !important;*/
     padding: .6em;
     border-radius: none;
     background-color: #fff;
     color: #343333;
     box-shadow: 2px 2px 2px #e2e2e2 inset, -2px -2px 2px white inset;
     outline: 0;
     font-size: .7em;
     transition: box-shadow 0.2s;
}
 form div:not(.form-check) input:focus, form div textarea:focus {
     box-shadow: 2px 2px 2px #e2e2e2 inset, -2px -2px 2px white inset;
}
 .form-check {
     display: block;
     min-height: 2rem;
     max-height: 2rem;
     padding-left: 0em;
     margin-bottom: 1em;
}
 .form-check-label {
     font-size: .8em;
     color: #777 !important;
}
 form button {
     width: 100%;
     border-radius: 4px;
     margin-top: .3em;
     padding: 1em 2em;
}
 .invalid-feedback {
    font-size: 12px
}
 .social {
     display: flex;
     justify-content: space-between;
}
 .social button {
     height: 75px;
     width: 75px;
     border-radius: 1em;
     font-size: 1.5em;
}
/*PREVENT BROWSER SELECTION*/
 a:focus, button:focus, input:focus, textarea:focus {
     outline: none;
}
/*main*/
 main:before {
     content: "";
     display: block;
     height: 88px;
}
 h1 {
     font-size: 2.4em;
     font-weight: 600;
     letter-spacing: .15rem;
     text-align: center;
     margin: 30px 6px;
}
 h2 {
     color: rgb(37, 44, 54);
     font-weight: 700;
     font-size: 2.5em;
}
 h3 {
    border-bottom: solid 2px #000
}
 h5{
     padding: 0;
     font-weight: bold;
     color: #92afcc;
}
 p {
     color: #333;
     font-family: "Roboto", sans-serif;
     margin: .6em 0;
}
 h1, h2, h4 {
     text-align: center;
     padding-top: 16px 
}
 .fr {
     float: right;
}
 .featurette-heading, .lead {
     padding: 16px;
}
 .row , .container:not(footer) {
     background: transparent;
}
 .container {
    max-width: 100%
}
 .nav-link.active {
     text-decoration: underline 
}
 .navbar {
     background-color: #fff;
     box-shadow: 0 10px 24px rgb(8, 26, 25 / 16%);
     -webkit-backdrop-filter: blur(7px);
     backdrop-filter: blur(7px);
}
 .navbar-brand {
     font-size: 2.2em;
     padding-right:20px;
}
 .nav-link {
     margin-right: 10px;
}
 .nav-link.active {
    text-decoration: underline;
}
 #navbarSupportedContent {
     position: absolute;
     right: 0%;
}
 .main-header {
     padding-top:180px;
}
 .source {
     font-size: .8em;
}
 .row {
     --bs-gutter-x: 0rem;
}
 .socials {
     fill: #353535;
     display: block;
     margin: 8px;
}
 .socials li, .questions {
     display: inline-block;
     margin-right: 1.8rem;
}
/* yukito bloody */
 .back {
    position: relative;
    top: -30px;
    font-size: 16px;
    margin: 10px 10px 3px 15px
}
 .inline {
    display: inline-block;
}
 .logo {
     float: left;
     margin: 6px;
     transition: all 1s ease;
     color: #000;
}
 #logo:hover, .logo:hover, .nav-link, a, a:hover {
    color: #c41505;
}
 .btn {
     background-color: #000;
     border-radius: none;
     border: none;
}
 .btn:hover {
     background-color: #000;
}
 .btn:hover:not(.buy-now) {
     color: #d3dce5;
}
 .shopnow, .contact {
     background-color: #000;
     padding: 10px 20px;
     font-size: 30px;
     color: white;
     text-transform: uppercase;
     letter-spacing:1px;
     transition: all 0.5s;
     cursor: pointer;
}
 .homebtn {
     position: relative;
     top: -100px;
     right: -28%;
}
 .shopnow:hover {
     text-decoration: none;
     color: white;
     background-color: #c41505;
}
/* for button animation*/
 .shopnow span {
     cursor: pointer;
     display: inline-block;
     position: relative;
     transition: all 0.5s;
}
 .shopnow span:after {
     content: url(img/caticon.png);
     position: absolute;
     font-size: 30px;
     opacity: 0;
     top: 2px;
     right: -6px;
     transition: all 0.5s;
}
 .shopnow:hover span {
     padding-right: 25px;
}
 .shopnow:hover span:after {
     opacity: 1;
     top: 2px;
     right: -6px;
}
 .socials li a svg {
    fill: #000;
    transition: all 1s ease-in
}
 .socials li a:hover svg {
    fill: #c41505
}
 .multi-carousel {
    margin-top: 84px;
}
 .hero-carousel {
    padding: 0;
    margin: 84px 0 0 0;
    width: 100% !important;
     max-width: 100% !important;
}
 .carousel-indicators li {
    position: relative;
    width: 21px;
    height: 21px;
     border-radius: 50%;
    margin: 8px;
    opacity: .6
}
 .hero-carousel .carousel-indicators{
    max-height: 35px
}
 .multi-carousel .carousel-indicators{
    max-height: 20px
}
 .multi-carousel .carousel-indicators li {
    top: 35px
}
 #carousel {
    max-width: 1440px
}
 #hcarousel .carousel-inner {
    height: auto
}
 #hcarousel ol .bg-secondary {
     background-color: #fff!important;
}
 .ma {
    margin: auto
}
 .card {
    border: none
}
 .card-body {
     flex: 1 1 auto;
     padding: 1rem 0rem;
}
 .price {
    color: slategrey;
    font-size:2em
}
 #mycart {
    min-width: 90px
}
 #cartItems {
    font-size: 17px
}
#product .container .row .pr4 {padding-right: 15px}
#product .container .row .pl4 {padding-left: 15px} 
 footer {
    margin-bottom: 30px;
    margin-top: 60px
}
 footer p {
    margin: .33em
}
 footer h3 {
    margin: 50px 0 20px 0
}
/* cat */
 @media (min-width:601px) and (max-width:1100px) {
     .card-title {
         font-size: 1.7em;
    }
}
 @media (max-width:991px) {
     .navbar-brand {
         font-size: 1.8rem;
         padding-right: 0px;
    }
     .socials li {
         margin-right: 0rem;
    }
     .socials {
         margin: 8px 8px 8px 0px;
    }
     #navbarSupportedContent {
         right: 71px;
    }
}
 @media (max-width:767px) {
    #product .container .row .pr4, #product .container .row .pl4 {padding-right: 5px !important;padding-left: 5px !important}
}
 @media (max-width:600px) {
     .no-mobile {
        display: none !important
    }
     .form-control {
         font-size: .9rem !important;
    }
     .card-title {
         font-size: 1.8em;
    }
     .card:not(.card-body) {
         margin: 3%;
         box-shadow:10px 10px 10px #cccccc, 0 0 0 #ffffff, 0 0 0 #cccccc inset, 2px 2px 2px #ffffff inset;
    }
     .card-img, .card-img-top {
         padding:5px !important;
         border-radius: 20px !important;
    }
     footer .navbar-brand {
         font-size: 2.2rem;
    }
    footer div div:nth-child(1), footer div div:nth-child(2) {
        text-align: center ! important}
}
 @media (max-width:400px) {
     .card-title {
         font-size: 1.4em;
    }
     .navbar-brand {
         font-size: 1.4em;
    }
}