/* GENERAL
--------------------------------------------------- */
.px-button .px-button-link {
display: inline-block;
font-size: 18px;
font-weight: 700;
text-decoration: none;
border-radius:25px;
line-height: 1;
cursor: pointer;
letter-spacing: 1px;
line-height: 1.45;
transition:all 0.2s ease-in-out;
min-height:50px;
}

.px-button .px-button-link {
padding: 8px 20px;
}

.px-button svg {
height:20px;
width:20px;
margin-left:10px;
vertical-align: top;
margin-top:4px;
}


/* HIGHTLIGHT BORDER COLOR
--------------------------------------------------- */
.px-button.button-style-highlight-border .px-button-link {
background-color: white;
color: #FDC300;
border: 2px solid #FDC300;
}

.px-button.button-style-highlight-border .px-button-link:active,
.px-button.button-style-highlight-border .px-button-link:focus,
.px-button.button-style-highlight-border .px-button-link:hover {
color: white;
background-color: #FDC300;
border: 2px solid #FDC300;
}

.px-button.button-style-highlight-border svg {
fill:#FDC300;
}

.px-button.button-style-highlight-border a:hover svg {
fill:white;
}

/* HIGHTLIGHT COLOR
--------------------------------------------------- */
.px-button.button-style-highlight .px-button-link {
color: white;
background-color: #FDC300;
border: 2px solid #FDC300;
}

.px-button.button-style-highlight .px-button-link:active,
.px-button.button-style-highlight .px-button-link:focus,
.px-button.button-style-highlight .px-button-link:hover {
color: #FDC300;
background-color: white;
border: 2px solid #FDC300;
}

.px-button.button-style-highlight svg {
fill:white;
}

.px-button.button-style-highlight a:hover svg {
fill:#FDC300;
}

/* HIGHTLIGHT COLOR WITH SECONDARY HOVER
--------------------------------------------------- */
.px-button.button-style-highlight-hover-secondary .px-button-link {
color: white;
background-color: #FDC300;
border: 2px solid #FDC300;
}

.px-button.button-style-highlight-hover-secondary.px-button-link:active,
.px-button.button-style-highlight-hover-secondary .px-button-link:focus,
.px-button.button-style-highlight-hover-secondary .px-button-link:hover {
color: white;
background-color: #003D58;
border: 2px solid #003D58;
}

.px-button.button-style-highlight-hover-secondary svg {
fill:white;
}

.px-button.button-style-highlight-hover-secondary a:hover svg {
fill:white;
}

/* WHITE TRANSPARENT COLOR
--------------------------------------------------- */
.px-button.button-style-white-transparent .px-button-link {
color: white;
background-color: transparent;
border: 2px solid white;
}

.px-button.button-style-white-transparent .px-button-link:active,
.px-button.button-style-white-transparent .px-button-link:focus,
.px-button.button-style-white-transparent .px-button-link:hover {
color: #FDC300;
background-color: white;
border: 2px solid white;
}

.px-button.button-style-white-transparent svg {
fill:white;
}

.px-button.button-style-white-transparent a:hover svg {
fill:#FDC300;
}

/* PRIMARY COLOR
--------------------------------------------------- */
.px-button.button-style-primary .px-button-link {
color: white;
background-color: #01ADEF;
border: 2px solid #01ADEF;
}

.px-button.button-style-primary .px-button-link:active,
.px-button.button-style-primary .px-button-link:focus,
.px-button.button-style-primary .px-button-link:hover {
color: white;
background-color: #FDC300;
border: 2px solid #FDC300;
}

.px-button.button-style-primary svg {
fill:white;
}

.px-button.button-style-primary a:hover svg {
fill:#FDC300;
}