/*------------------------------*/
/* Initial Button */
/*------------------------------*/
button,
a.btn,
label.btn {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    text-decoration: none;
    padding: 0.3rem 0.7rem;
    margin: 1rem 2rem;
    border-radius: 0.8rem;
    transition-duration: 0.2s;
    border: none;
}
    button:hover,
    a.btn:hover {
        box-shadow: 0 10px 14px 0 rgba(0,0,0,0.24),0 12px 40px 0 rgba(0,0,0,0.19);
    }



/*------------------------------*/
/* Button Type 1 */
/*------------------------------*/
.btn-1 {
    font-size: 1.1rem;
    background-color: var(--skyblue);
    color: var(--white);
    border: 2px solid var(--skyblue) !important;
}
    .btn-1:hover {
        background-color: var(--ghostwhite);
        color: var(--skyblue);
    }

.btn-1.size08 {
    font-size: 0.8rem;
    padding: 0.15rem 0.35rem;
    margin: 0.2rem;
    border-radius: 0.4rem;
}

.btn-1.red {
    background-color: var(--red);
    border: 2px solid var(--red) !important;
}
    .btn-1.red:hover {
        background-color: var(--white);
        color: var(--red);
    }

.btn-1.grey {
    background-color: var(--grey);
    border: 2px solid var(--grey) !important;
    
}
    .btn-1.grey:hover {
        background-color: var(--white);
        color: var(--grey);
    }

.btn-1.green {
    background-color: var(--darkgreen);
    border: 2px solid var(--darkgreen) !important;
}
    .btn-1.green:hover {
        background-color: var(--white);
        color: var(--darkgreen);
    }

.btn-1.gold {
    background-color: var(--gold);
    border: 2px solid var(--gold) !important;
}
    .btn-1.gold:hover {
        background-color: var(--white);
        color: var(--gold);
    }



/*------------------------------*/
/* Button Type 2 */
/*------------------------------*/
.btn-2 {
    font-size: 1.5rem;
    color: var(--white);
    background-color: var(--skyblue);
} 
    .btn-2:hover {
        background-color: var(--gold);
    }



.btn-2.gold {
    background-color: var(--gold);
    color: var(--white);
    border: 2px solid var(--gold);
}
    .btn-2.gold:hover {
        background-color: var(--white);
        color: var(--gold);
    }



/*------------------------------*/
/* Button Type 3 */
/*------------------------------*/
.btn-3 {
    font-size: 1.5rem;
    padding: 0.6rem 1.1rem;
    background-color: var(--black);
}

.btn-3.blue {
    color: var(--black);
    background-color: var(--blue);
    border: 4px solid var(--blue);
}
    .btn-3.blue:hover {
        background-color: var(--lightgold);
        border: 4px solid var(--lightgold);
        box-shadow: 0 10px 14px 0 rgba(0,0,0,0.12),0 12px 40px 0 rgba(0,0,0,0.08);
    }



/*------------------------------*/
/* Button Type 3 */
/*------------------------------*/
.btn-4 {
    font-size: 1.3rem;
}

.btn-4.blue {
    background-color: var(--skyblue);
    color: var(--white);
}
    .btn-4.blue:hover {
        background-color: var(--gold);
    }

.btn-4.gold {
    background-color: var(--gold);
    border: 2px solid var(--gold);
    color: var(--white);
}
    .btn-4.gold:hover {
        color: var(--gold);
        background-color: var(--white);
    }



/*------------------------------*/
/* Button Type Plus */
/*------------------------------*/
.btn-plus {
    background-color: var(--skyblue);
    color: var(--white);
    border-radius: 50%;
    font-size: 3rem;
    padding: 0;
    padding-top: 1px;
    height: 3.5rem;
    width: 3.5rem;
    transition-duration: 0.3s;
}  
    .btn-plus:hover {
        background-color: var(--gold);
    }
    .btn-plus.s2 {
        font-size: 2rem;
        height: 2.5rem;
        width: 2.5rem;
    }



/*------------------------------*/
/* Button Navigation */
/*------------------------------*/
.btn-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    text-decoration: none;
    padding: 0.3rem 0.7rem;
    margin: 1rem 2rem;
    border-radius: 0.8rem;
    transition-duration: 0.2s;
    border: none;

    font-size: 1.5rem;
    background-color: var(--gold);
    color: var(--white);
    border: 2px solid var(--gold);

    position: absolute;
    font-size: 1.5rem;
    line-height: 1.5rem;
    font-weight: bold;
    text-align: center;
    padding: 0.3rem 0.7rem !important;
}
    .btn-nav:hover {
        background-color: var(--white);
        color: var(--gold);
        box-shadow: 0 10px 14px 0 rgba(0,0,0,0.24),0 12px 40px 0 rgba(0,0,0,0.19);
    }

.btn-nav.left {
    left: 0;
}
    
.btn-nav.right {
    right: 0;
}

@media (min-width: 950px) {
    .btn-nav.left {
       left: 2rem;
    }
    .btn-nav.right {
        right: 2rem;
     }
} 
    
@media (max-width: 900px) {
    .btn-nav {
        bottom: -3rem;
        margin: 0 3rem !important;
        width: calc(70% - 17.4rem);
    }
}
    
@media (max-width: 600px) {
    .btn-nav {
        margin: 0 2rem !important;
        width: calc(60% - 9.4rem);
    }  
}
    
@media (max-width: 450px) {
    .btn-nav {
        margin: 0 1.5rem !important;
        width: calc(65% - 8.4rem);
    }  
}
    
@media (max-width: 340px) {
    .btn-nav {
        margin: 0 1.5rem !important;
        width: 4rem;
    }  
}
    
@media (max-width: 250px) {
    .btn-nav {
        margin: 0 0.5rem !important;
    }  
}