/* Buttons CSS */

.cat-button{margin-right: 4px}
.tag-button{background-color: #000 !important; color: #fff !important}

.button-wrap{display: inline-flex; justify-content: space-between; align-items: center; margin: 5px 5px 5px 0; transition:all 600ms ease; text-decoration: none}
.button-wrap > div{transition:all 600ms ease}
.button-wrap:hover{transform:translate(10px, 0)}


.button-wrap .circlearrow{border:2px solid var(--charcoal); padding: 20px; border-radius:40px; position: relative}
.button-wrap .circlearrow i{position: absolute; top:10px; left:12px; font-size:1.2rem}


.button{display:inline-block; border:2px solid var(--charcoal); background-color: #fff; color: var(--charcoal); border-radius:40px; padding: 10px 20px; text-decoration:none; font-size:1.1rem !important; cursor:pointer; transition:all 300ms ease; font-weight:500 !important; text-align: center; position:relative; overflow: hidden}
.button{transition: background-color 800ms ease}
.button:hover{background-color: var(--charcoal); color: #fff !important}
.button:hover{border-color: var(--charcoal)}
.button:hover .inlay{left:0%; opacity: 1; width:100%}
.button:hover .button-text{color:#fff}



.button .button-text{z-index: 4}
.button > .inlay{position: absolute; top:0; left:-101%; width:101%; height: 101%; background: var(--charcoal); border-top-right-radius:100px; border-bottom-right-radius:100px; transition:all 600ms ease; z-index: 1; opacity: 0}



.light-button{}
.light-button .inlay{background: var(--charcoal); opacity: 0.3}
.light-button .circlearrow{color: #000}

.dark-button{}
.dark-button > div:last-of-type{border-color:#fff}
.dark-button > div:last-of-type i{color:#fff}
.dark-button .circlearrow{color: #fff}

.charcoal-button{border-color:var(--charcoal); background-color: var(--charcoal) !important; color: #fff !important}
.charcoal-button:hover{background-color: var(--cream) !important; color: var(--charcoal) !important}
.charcoal-button .inlay{background-color: var(--cream)}
.charcoal-button:hover .button-text{color: var(--charcoal)}
.charcoal-button .circlearrow{background-color: pink !important}

.red-button{border-color:var(--red); background-color: var(--red); color: #fff !important}
.red-button:hover{background-color: #fff !important; color: var(--red) !important}

.gold-button{border-color:var(--gold); background-color: var(--gold); color: var(--charcoal)}
.gold-button:hover{background-color: var(--charcoal) !important; color: var(--charcoal); border-color:var(--charcoal); }


.trans-button{background-color: transparent}
.trans-button:hover{background-color: var(--charcoal)}
.trans-button .inlay{background-color: var(--charcoal) !important}
.trans-button:hover .button-text{color: #fff !important}

.gold-white{border-color:var(--gold); background-color: var(--gold); color: var(--charcoal)}
.gold-white .button-text{color: var(--charcoal) !important}
.gold-white .inlay{background-color: #fff !important}
.gold-white > div{border-color:#fff !important; color: #fff !important}
.gold-white .circlearrow{color: #fff !important; border-color:#fff !important}
.gold-white .circlearrow i{color:#fff !important}
.gold-white:hover{background-color: #fff !important; color: var(--charcoal); border-color: #fff}
.gold-white:hover .button-text{color: var(--charcoal) !important}


.footer-button{border-color:var(--gold); background-color: var(--gold)}
.footer-button:hover .button-text{color: var(--charcoal)}
.footer-button .inlay{background-color: #fff !important}
footer .light-button .circlearrow{border-color:#fff !important; color: #fff}
footer .light-button{cursor: pointer}


/* Circular buttons */
.button-circle{display:block; max-width:60px; max-height: 60px; min-height:60px; min-width:60px; background-image: url("../img/svg/circle-arrow-right-white.svg"); background-size: contain; background-repeat: no-repeat; transition:all 600ms ease; cursor:pointer}
.button-circle-black{
	display:block; 
	max-width:60px; 
	max-height: 60px;
	min-height:60px; 
	min-width:60px; 
	background-image: url("../img/svg/circle-arrow-right2.svg"); 
	background-size: contain; 
	background-repeat: no-repeat; 
	transition:all 600ms ease; cursor:pointer
}

.circle-down-black{background-image: url("../img/svg/circle-arrow-down-black.svg") !important; cursor:pointer}
.circle-down-black.active{transform:rotate(180deg)}

.circle-down-white{background-image: url("../img/svg/circle-arrow-down-white.svg") !important; cursor:pointer}
.circle-down-white.active{transform:rotate(180deg)}

.circle-up-black{background-image: url("../img/svg/circle-arrow-up-black.svg") !important; cursor:pointer}
.circle-up-white{background-image: url("../img/svg/circle-arrow-up-white.svg") !important; cursor:pointer}

.circle-left-black{background-image: url("../img/svg/circle-arrow-left-black.svg") !important; cursor:pointer}
.circle-left-white{background-image: url("../img/svg/circle-arrow-left-white.svg") !important; cursor:pointer}

.circle-left:hover{transform:translate(-5px, 0)}
.circle-left-white:hover{transform:translate(-5px, 0) !important}
.circle-left-black:hover{transform:translate(-5px, 0) !important}

.circle-right:hover{transform:translate(5px, 0)}
.circle-right-white:hover{transform:translate(5px, 0)}
.circle-right-black:hover{transform:translate(5px, 0)}

.circle-up-black:hover{transform:translate(0, -5px)}
.circle-up-white:hover{transform:translate(0, -5px)}
.circle-down-black:hover{transform:translate(0, 5px)}
.circle-down-white:hover{transform:translate(0, 5px)}


/* Cats at risk*/
.risk-row{ display:flex; justify-content:flex-start; align-items:flex-start; text-transform: uppercase; font-weight:500; margin: 0 0 10px}
.risk-row > div:first-of-type{border-radius:100px; background: var(--red); margin: 0 15px; width:20px; height: 20px}
#block-risk .acc-header h2{font-size:2rem}