:root{
    --default-button-border-radius: 24px;
}

/* primary, secondary buttons */

a.button.primary{
    color: var(--white, var(--default-white));
    background-color: var(--blue, var(--default-blue));
    border: 1px solid var(--blue, var(--default-blue));
}
a.button.secondary{
    background-color: var(--white, var(--default-white));
    color: var(--blue, var(--default-blue));
    border: 1px solid var(--blue, var(--default-blue));
}
a.button.secondary:hover{
    background-color: var(--blue, var(--default-blue));
    color: var(--white, var(--default-white));    
}

header[role="navigation"] .header-buttons
{
    float: right!important;
    margin-right: 1vw;
}

header[role="navigation"] .header-buttons a.button
{
    font-size: var(--font-size-small, var(--default-font-size-small));
    font-weight: normal;
    margin: 1vh 0;    
    padding: .8vh .8vw;
    color: var(--graytone-7, var(--default-graytone-7));
    border: 0;
    border-radius: var(--button-border-radius, var(--default-button-border-radius));
    background-color: var(--graytone-2, var(--default-graytone-2));
    display: inline-block;
    cursor: pointer;
    height: auto;   
	text-decoration: none;	
}
header[role="navigation"] .header-buttons a.button.primary {
    background-color: var(--blue, var(--default-blue));
    color: var(--white, var(--default-white));
}
header[role="navigation"] .header-buttons a.button.secondary {
    background-color: var(--white, var(--default-white));
    color: var(--blue, var(--default-blue));
}
header[role="navigation"] .header-buttons a.button .spinner{
    width: 20px;
    height: 20px;
    display: none;
}


.spin{
	animation:spin 4s linear infinite;
}

.show-on-wide-screen
{
    display: none;
}
@media screen and (min-width: 1170px) {  
    .show-on-wide-screen
    {
        display: initial;
    }
}

.show-on-small-screen
{
    display: none;
}
@media screen and (max-width: 1170px) {  
    .show-on-small-screen
    {
        display: initial;
    }
}