a.btn.btn-primary {    padding: 16px 28px;    border-radius: 0;    background: #093d87;    border: none;   box-shadow: 0 4px 5px -3px #333;    transition: 0.5s;    font-weight: bold;transition: ease-out 0.4s;}
a.btn.btn-primary:hover {    box-shadow: inset 0 0 0 50px #3a639f; }

#reusable{
    padding-inline:5%;
}
body,
html {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-size:18px;
    font-family: "Poppins", sans-serif;
}

.maincontent {
    max-width: 100%;
    padding: 0;
    margin: 0;
}

.maincontent_wrapper {
    padding-top: 0;
}

#reusable img {
    width: 100%;
}

.r-container{
    max-width:1400px;
    padding-inline:2%;
    margin:0 auto;
}

.r-header{
    max-width:1000px;
    padding:2%;
    margin:0 auto;
    text-align: center;
}

.r-hr { 
    border: 0; 
    height: 1px; 
    background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
    background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
    background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
    background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0); 
  }

.flex-group{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap:wrap;
}
.flex-item{
    margin:0 .5rem;
}
.flex-item p{
    font-size:12px
}
p img{
    display:inline-block;
}
.hero-container{
    position: absolute;
    top:10%;
    left:2%;
    width:100%;
}

.swatch{
    min-width:100px;  
    max-width:100px;
    height:100px; 
    display:block;
    margin:10px auto 0;
    text-align: center; 
}
#reusable .btn{
    margin-block:5px;
}