@import url(https://fonts.googleapis.com/css?family=Lato);
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css);

@font-face {
    font-family: 'Kaushan';
    src: url('../webfonts/kaushanscript-regular-webfont.woff2') format('woff2'),
         url('../webfonts/kaushanscript-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* The alert message box */
#alertSucc
{
    display: none;
    padding: 0px;
    position: fixed;
    width: 100%;
    height: 50px;
    background-color: #13c60d; /* Green */
    color: white;
    text-align: center;
    margin: auto;
    margin-bottom: 15px;
    z-index: 100;

    -webkit-animation: fadeOut 3s forwards;
    animation: fadeOut 3s forwards;
    -webkit-animation-delay: 4s;
    animation-delay: 4s;

    font-family: 'Kaushan', cursive;
		letter-spacing: 0.20em;
		font-weight: 500;
		font-size: 150%;
}

#alertErr
{
    display: none;
    padding: 0px;
    position: fixed;
    width: 100%;
    height: 50px;
    background-color: #f44336; /* Red */
    color: white;
    text-align: center;
    margin-left: auto;
    margin-bottom: 15px;
    z-index: 100;

    -webkit-animation: fadeOut 3s forwards;
    animation: fadeOut 3s forwards;
    -webkit-animation-delay: 4s;
    animation-delay: 4s;

    font-family: 'Kaushan', cursive;
		letter-spacing: 0.20em;
		font-weight: 500;
		font-size: 150%;
}

@-webkit-keyframes fadeOut
{
    from {opacity: 1;}
    to {opacity: 0;}
}

@keyframes fadeOut
{
    from {opacity: 1;}
    to {opacity: 0;}
}

#alertSucc p,
#alertErr p
{
    margin-left: 8px;
}

/* The close button */
.closebtn
{
    margin-top: 5px;
    margin-right: 5px;
    margin-left: 15px;
    color: white;
    font-weight: bold;
    float: right;
    font-size: 45px;
    line-height: 25px;
    cursor: pointer;
    transition: 0.3s;
}

/* When moving the mouse over the close button */
.closebtn:hover {
    color: black;
}