/* ---- primary-btn-slider ----- */ 
.btn_slide { font-family: var(--poppins); font-style: normal; font-weight: 600; font-size: 13px; line-height: 19px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--white)!important; background: var(--quaternary-color); border: 1px solid var(--quaternary-color); padding: 11px 20px; position: relative; z-index: 1; overflow: hidden; max-width: 150px; width: 100%; text-align: center; text-decoration: none!important; display: block; } 
.btn_slide:hover { color: var(--quaternary-color)!important; } 
.btn_slide::after { content: ""; background: var(--white); position: absolute; z-index: -1; padding: 0.85em 0.75em; display: block; } 
.btn_slide[class^="slide"]::after { transition: all 0.35s; } 
.btn_slide[class^="slide"]:hover::after { left: 0; right: 0; top: 0; bottom: 0; transition: all 0.35s; } 
.btn_slide.slide_from_top::after { left: 0; right: 0; top: -100%; bottom: 100%; } 
/* ---- second-slider ----- */ 
.btn_slide_common { background: var(--quaternary-color); border: 1px solid var(--quaternary-color); } 
.btn_slide_two { width: 100%; text-align: center; text-decoration: none!important; z-index: 1; overflow: hidden; display: block; position: relative; color: var(--white)!important; } 
.btn_slide_two:hover { color: var(--quaternary-color)!important; } 
.btn_slide_two::after { content: ""; background: var(--white); position: absolute; z-index: -1; padding: 0.85em 0.75em; display: block; } 
.btn_slide_two[class^="slide"]::after { transition: all 0.35s; } 
.btn_slide_two[class^="slide"]:hover::after { left: 0; right: 0; top: 0; bottom: 0; transition: all 0.35s; } 
.btn_slide_two.slide_from_top::after { left: 0; right: 0; top: -100%; bottom: 100%; } 
.btn_cover { position: relative; } 



@media ( min-width: 1680px ) { .btn_slide { padding: 11px 13px!important; } } 

/* --- btn-sizes ----- */ 
.cover_size { max-width: 150px; } 
.request_join { max-width: 170px; } 
.load_more { max-width: 135px; width: 100%; } 
.add_to_cart { font-family: var(--poppins); font-style: normal; font-weight: 600; font-size: 13px; line-height: 19px; text-align: center; letter-spacing: 0.04em; text-transform: uppercase; color: var(--white); background: var(--quaternary-color); padding: 11px 18px; border: 1px solid var(--quaternary-color); max-width: 175px; width: 100%; } 

@media ( min-width: 1200px ) { .add_to_cart { padding: 17px 20px; width: 175px; } }

