/** BUTTONS **/
.btn-primary {
    background: black;
    color: white;
    border: 1px solid black;
    transition: .3s;
    width: 160px;
    padding: 9px;
    font-weight: 500;
    font-size: 1.6rem;
    margin-top: 7px;
    margin-bottom: 0px;
}

.btn-primary:hover,
.btn-primary:focus {
    background: grey;
    color: white;
    border: 1px solid grey;
}

.btn-secondary,
.btn-default {
    background: white;
    color: black;
    border: 1px solid black;
    transition: .3s;
    width: 160px;
    padding: 9px;
    font-weight: 500;
    font-size: 1.6rem;
    margin-top: 7px;
    margin-bottom: 0px;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-default:hover,
.btn-default:focus {
    background: grey;
    color: white;
    border: 1px solid grey;
}

.btnOutline {
    background: white;
    color: black;
}

.boxBtn {
    border-radius: 0px;
}

.roundBtn {
    border-radius: 7px;
}

.pillBtn {
    border-radius: 100px;
}

.polyBtn {
    border-radius: 10px 0 10px 0;
}

/** ANIMATED BUTTONS **/
/** FANCY BUTTON **/
.fancyButton {
    color: #555555;
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 2.5rem;
    max-width: 160px;
    width: 100%;
    letter-spacing: 0.3rem;
    position: relative;
    text-decoration: none;
    display: flex;
    justify-content: center;
    transition: all 1s ease-in;
    background: none;
    height: 40px;
    align-items: center;
}

.fancyButton:hover {
    color: #fff;
    background: #000;
}

.fancyButton svg {
    height: 40px;
    left: 0;
    top: 0;
    position: absolute;
    width: 100%;
}

.fancyButton rect {      
    fill: none;
    stroke: #555;
    stroke-width: 2;
    stroke-dasharray: 450, 00;
    transition: all 0.5s linear;
}

.fancyButton:hover rect {
    stroke-dasharray: 20, 500;
    stroke-dashoffset: 50;
    stroke: #fff;
    transition: all 2s cubic-bezier(
        0.22, 1, 0.25, 1
    );
}

/** FLOAT BUTTON **/
.floatButton {
    border-radius: 0;
    padding: 9px;
    font-weight: 500;
    font-size: 1.6rem;
    margin-top: 7px;
    margin-bottom: 0px;
    transition: .3s;
    background: black;
    width: 160px;
}

.floatButton:hover {
    margin-top: 0;
    margin-bottom: 7px;
    background: grey;
}

/** SLIDE BUTTON **/
.slideButton {
	border-radius: 0;
	padding: 9px;
	font-weight: 500;
	font-size: 1.6rem;
	margin-top: 7px;
	margin-bottom: 0px;
	transition: .5s;
	background: none;
	color: black;
	border: 1px solid black;
	width: 160px;
}

.slideButton:hover,
.slideButton:focus {
	box-shadow: inset 10em 0 0 0 black;
	border: 1px solid black;
	background: none;
	color: white;
}

/** FILL BUTTON **/
.fillButton {
    border-radius: 0;
    padding: 9px;
    font-weight: 500;
    font-size: 1.6rem;
    margin-top: 7px;
    margin-bottom: 0px;
    transition: .5s;
    background: none;
    color: black;
    border: 1px solid black;
    width: 160px;
}

.fillButton:hover,
.fillButton:focus {
    box-shadow: inset 0 0 0 2em black;
    border: 1px solid black;
    color: white;
}

/** CORNER BUTTON **/
.cornerButton {
    border-radius: 0;
    padding: 9px;
    font-weight: 500;
    font-size: 1.6rem;
    margin-top: 7px;
    margin-bottom: 0px;
    transition: .3s;
    background: white;
    color: black;
    width: 160px;
	border: 1px solid black;
    box-shadow: 2px 2px black;
}

.cornerButton:hover,
.cornerButton:focus {
    border: 1px solid black;
    background: grey;
    color: white;
}

/** SHADOW BUTTON **/
.shadowButton {
    border-radius: 10px;
    padding: 9px;
    font-weight: 500;
    font-size: 1.6rem;
    margin-top: 7px;
    margin-bottom: 0px;
    transition: .3s;
    background: white;
    color: black;
    width: 160px;
    border: 1px solid black;
    box-shadow: 3px 5px black;
}


.shadowButton:hover,
.shadowButton:focus {
    border: 1px solid black;
    background: white;
    color: black;
    box-shadow: 0 0 black;
}


/** 3D BUTTONS **/
.btn3D {
    margin-top: 0px;
    margin-bottom: 0px;
    border: 1px solid #b16262;
    border-radius: 10px;
    background: linear-gradient(150deg, rgb(255 255 255) 0%, rgb(255 0 0) 15%);
    border-bottom: 7px solid darkred;
    box-shadow: 2px 5px 2px grey;
	transition: none;
}

.btn3D:hover,
.btn3D:focus,
.btn3D:active,
.btn3D:active:focus {
    margin-top: 3px;
    margin-bottom: 0px;
    border: 1px solid #b16262;
    border-radius: 10px;
    background: linear-gradient(150deg, rgb(255 255 255) 0%, rgb(255 0 0) 25%);
    border-bottom: 4px solid darkred;
    box-shadow: 0px 2px 2px grey;
}