@charset 'UTF-8';

@font-face {
    font-family: comic;
    src: url(../fonts/ComicSansMS3.ttf);
}

@font-face {
    font-family: kaushan;
    src: url('../fonts/KaushanScript_Regular.ttf');
}

@font-face {
    font-family: story;
    src: url(../fonts/Storytime.otf);
}

@font-face {
    font-family: hello;
    src: url('../fonts/HelloUnicorn.otf');
}

@font-face {
    font-family: patahola;
    src: url('../fonts/PataholaRegular.otf');
}

@font-face {
    font-family: pasto;
    src: url('../fonts/pasto_webfont.ttf');
}

@font-face {
    font-family: galler;
    src: url('../fonts/GallerRebunkSolid.otf');
}

@font-face {
    font-family: alexbush;
    src: url('../fonts/AlexBrush_Regular.ttf');
}

@font-face {
    font-family: milkpeach;
    src: url('../fonts/MilkPeach_Regular.ttf');
}

@font-face {
    font-family: lobster;
    src: url('../fonts/Lobster_Regular.ttf');
}

@font-face {
    font-family: clouts;
    src: url('../fonts/Clouts.ttf');
}

/* Base Classes */
.title {
    font-family: clouts;
    font-size: 54px;
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 48px;
    font-weight: normal;
    letter-spacing: 2px;
    /*
    background-repeat:  repeat-x;
    background: linear-gradient(90deg, #f00 0%, #ff9a00 10%, #d0de21 20%, #4fdc4a 30%, #3fdad8 40%, #2fc9e2 50%, #1c7fee 60%, #5f15f2 70%, #ba0cf8 80%, #fb07d9 90%, #f00 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  */
    animation-name: flash0;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-duration: 50000ms;
}

@keyframes flash0 {
    from {
        color: #bbbb08;
    }

    50% {
        color: red;
    }

    to {
        color: darkblue;
    }
}

.rainbow-tx {
    background: linear-gradient(90deg, #f00 0%, #ff9a00 10%, #d0de21 20%, #4fdc4a 30%, #3fdad8 40%, #2fc9e2 50%, #1c7fee 60%, #5f15f2 70%, #ba0cf8 80%, #fb07d9 90%, #f00 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.menu-size {
    width: 110px;
    height: 20px;
    line-height: 20px;
}

.cssmenu {
    align-content: center;
}

ul.cssmenu, ul.cssmenu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

    /*Style for 1st level Menu header*/
    ul.cssmenu li {
        position: relative;
        float: left;
        margin-right: 2px;
        margin-left: 2px;
        border-radius: 20px;
        box-shadow: 5px 5px 15px #c71f1f inset;
        background: #f89898; /*  background color of Menu header (1st level) */
        border: thin;
        border-width: 1px;
        border-color: #000000;
    }

        ul.cssmenu li:hover {
            background: #69E3E3 /*background color of Menu header (1st level) on hover*/;
            box-shadow: 5px 5px 15px #1889f9 inset;
            animation-name: but-fade2;
            animation-iteration-count: 1;
            animation-duration: .1s;
        }

        ul.cssmenu li a {
            /*Menu link styles*/
            display: block;
            padding-top: 8px;
            padding-bottom: 8px;
            padding-left: 0px;
            padding-right: 0px;
            border-radius: 10px;
            color: #000000;
            letter-spacing: 0.5pt;
            text-decoration: none;
            font-family: inherit;
            font-size: 17px;
            font-weight: normal;
        }

    /* Building Menu items - for 2nd and more level Menu items*/
    ul.cssmenu ul {
        display: none; /*initially Menu item is hidden*/
        position: absolute; /*absolute positioning is important for Menu to float*/
        width: 100px;
        /*Formating of Menu items
        border: 1px solid #AA00AA;
        padding: 1px;
        background: #FFFFFF;*/
        /*optional - to change position of 2nd level Menu item
        top: 100%;
        left: 0;*/
    }

        ul.cssmenu ul li {
            list-style: none;
            margin: 0 auto; /*  */
            display: block;
            width: 200px;
            line-height: 16px;
            float: none;
            text-align: left;
            color: #000000;
        }

            ul.cssmenu ul li a {
                width: 100%;
                display: block;
                background: #e1f8ce /* background color of Menu header (2nd level) on hover */;
                box-shadow: 5px 5px 15px #c1dcc2 inset;
                font-family: inherit;
                font-size: 15px;
                font-weight: normal;
                border: none;
                border-width: 1px;
                border-color: #4f4ff0;
            }

                ul.cssmenu ul li a:hover {
                    background: #95cc95 /* background color of Menu header (2nd level) on hover */;
                    box-shadow: 5px 5px 15px #458c45 inset;
                    color: #840714;
                    font-size: 15px;
                    font-weight: normal;
                    border: black;
                }

        /* Menu item position for 3rd level and more */
        ul.cssmenu ul ul {
            left: 100%;
            top: 0;
        }

    /* Hover effect for Menu*/
    ul.cssmenu li:hover > ul {
        display: block;
    }


/* Basic attributes */
body {
    background-image: radial-gradient(ellipse, #f5eefa 10%, #dbf7ff 30%, #e8ddc5 100% );
    font-family: comic;
    font-size: 13px;
    text-align: center;
    padding-right: 20px;
}

hr.hrgr {
    background-color: #0283c3;
    height: 5px;
    inline-size: 900px;
}

hr.hidden {
    height: 5px;
    visibility: hidden;
    height: 0px;
}

hr.hr1 {
    background-color: #d40000;
    height: 1px;
    inline-size: 900px;
}

p {
    font-family: Dubai;
    font-size: 16px;
}

.date {
    font-family: comic;
    font-size: 18px;
}

.phone {
    font-family: comic;
    font-size: 16px;
}

.evtnote {
    font-size: 13px;
    color: #4169e1;
}

.ebox {
    width: 440px;
    height: 260px;
    padding: 5px;
    padding-left: 15px;
    line-height: 13px;
    overflow-y: scroll;
    overflow-x: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

    .ebox::-webkit-scrollbar {
        display: none;
    }

.edate {
    font-family: Arial;
    font-size: 13px;
    color: #000000;
}

.edefault {
    font-size: 13px;
    font-weight: bold;
    line-height: 75%;
    color: #000000;
}

.ehol {
    font-size: 14px;
    font-weight: bold;
    color: #B20D4E;
}

.nohi {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

.enw {
    font-size: 14px;
    font-weight: bold;
    color: #056dcd;
}

.emed {
    font-size: 14px;
    font-weight: bold;
    color: #9B4528;
}

.emed1 {
    font-size: 14px;
    font-weight: bold;
    color: #b1380f;
}

.emed2 {
    font-size: 14px;
    font-weight: bold;
    color: #d2491b;
}

.dental {
    font-size: 14px;
    font-weight: bold;
    color: #2F55C8;
}

.esp {
    font-size: 14px;
    font-weight: bold;
    font-style: italic;
    color: #14A736;
}

.esp1 {
    font-size: 14px;
    font-weight: bold;
    font-style: italic;
    color: #B48608;
}

.esp2 {
    font-size: 14px;
    font-weight: bold;
    font-style: italic;
    color: #B42C08;
}

.esp3 {
    font-size: 14px;
    font-weight: bold;
    font-style: italic;
    color: #0E8219;
}

.esp4 {
    font-size: 14px;
    font-weight: normal;
    font-style: italic;
    color: #122D9D;
}

.esp5 {
    font-size: 14px;
    font-weight: normal;
    font-style: italic;
    color: #0E8219;
}

.cald { /*   Calendar day     */
    font-size: 15px;
    font-weight: normal;
    height: 15px;
    padding: 4px;
    border: 3px ridge #a58829;
    border-radius: 5px;
    color: black;
    text-align: center;
}

.calevent { /*  Calendar day with events    */
    font-size: 15px;
    font-weight: bold;
    padding: 4px;
    border: 3px ridge #E641E9;
    border-radius: 10px;
    color: #3e52c1;
    text-align: center;
}

.calmed_appt { /*  Calendar day with Med Appt    */
    font-size: 15px;
    font-weight: bold;
    padding: 4px;
    border: 3px ridge #a30923;
    border-radius: 10px;
    color: #086127;
    text-align: center;
}

.calpayday { /*  Calendar day   payday    */
    font-size: 15px;
    font-weight: bold;
    padding: 4px;
    border: 3px ridge #92d70d;
    border-radius: 10px;
    color: #086127;
    text-align: center;
}

.calholiday { /*  Holiday    */
    font-size: 15px;
    font-weight: bold;
    padding: 4px;
    border: 3px ridge #FC2B39;
    border-radius: 10px;
    color: #3e52c1;
    text-align: center;
}

.caltoday { /*  Calendar today     */
    font-size: 15px;
    font-weight: bold;
    padding: 4px;
    border: 3px ridge blue;
    border-radius: 15px;
    color: #C80C0C;
    text-align: center;
    animation-name: dayspin2;
    animation-iteration-count: 8;
    animation-duration: 500ms;
    animation-timing-function: ease-in-out;
    animation-direction: alternate-reverse;
    /*
    animation-name: dayspin1;
    animation-iteration-count: 4;
    animation-duration: 2000ms;
    animation-timing-function: linear;
    animation-direction: alternate-reverse;
    */
}

@keyframes dayflash1 {
    33% {
        border: 3px ridge #7070E7;
    }

    66% {
        border: 3px ridge white;
    }

    100% {
        border: 3px ridge red;
    }
}

@keyframes dayspin1 {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes dayspin2 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.caltitle { /*  Calendar title area    */
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
    color: #203080;
    text-align: center;
}

.calhead-border {
    border: 3px ridge green;
    border-radius: 5px;
    padding: 2px;
}

.calhead {
    color: #d20a90;
    width: 31px;
    font-size: 14px;
    text-align: center;
    line-height: 16px;
    vertical-align: middle;
}

.calbutton-now {
    font-size: 14px;
    color: red;
    background-color: #FFDB52;
    display: block;
    height: 35px;
    width: 55px;
    font-weight: bold;
    border-radius: 10px;
    box-shadow: 5px 5px 5px #D9D2B8 inset;
}

    .calbutton-now:hover {
        font-size: 16px;
        color: #ffffff;
        background-color: #0E38D9;
        font-weight: bold;
        font-weight: normal;
        box-shadow: 5px 5px 5px #5ABFDE inset;
        animation-name: but-fade1;
        animation-iteration-count: 1;
        animation-duration: 1s;
    }

.calbutton-prv {
    font-size: 14px;
    color: red;
    background-color: #FFC0CB;
    display: block;
    height: 35px;
    width: 55px;
    font-weight: bold;
    border-radius: 10px;
    box-shadow: 5px 5px 5px #D7CDCE inset;
}

    .calbutton-prv:hover {
        font-size: 16px;
        color: #ffffff;
        background-color: #0E38D9;
        font-weight: normal;
        box-shadow: 5px 5px 5px #5ABFDE inset;
        animation-name: but-fade1;
        animation-iteration-count: 1;
        animation-duration: 1s;
    }

.calbutton-nt {
    font-size: 14px;
    color: forestgreen;
    background-color: #C7F062;
    display: block;
    height: 35px;
    width: 55px;
    font-weight: bold;
    border-radius: 10px;
    box-shadow: 5px 5px 5px #DAE5BF inset;
}

    .calbutton-nt:hover {
        font-size: 16px;
        color: #ffffff;
        background-color: #0E38D9;
        font-weight: bold;
        font-weight: normal;
        box-shadow: 5px 5px 5px #5ABFDE inset;
        animation-name: but-fade1;
        animation-iteration-count: 1;
        animation-duration: 1s;
    }

@keyframes but-fade1 {
    from {
        opacity: 0.2;
    }

    to {
        opacity: 1;
    }
}

@keyframes but-fade2 {
    from {
        opacity: 0.6;
    }

    to {
        opacity: 1;
    }
}

.nav-button {
    line-height: 30px;
    padding-top: 3px;
    box-shadow: 5px 5px 15px #5ABFDE inset;
    border-radius: 20px;
}

.inside {
    color: #074b8f;
    font-size: 18px;
    text-decoration: none;
    line-height: 40px;
    background-color: #DFC7FA;
    border-radius: 45%;
    box-shadow: 5px 5px 15px #E641E9 inset;
}

    .inside:hover {
        color: #c8e7aa;
        background-color: #b20675;
        box-shadow: 5px 5px 15px #cac6f1 inset;
        animation-name: but-fade1;
        animation-iteration-count: 1;
        animation-duration: .5s;
    }

.garage {
    color: #d50909;
    font-size: 18px;
    text-decoration: initial;
    line-height: 40px;
    background-color: #7AE1E1;
    border-radius: 45%; /* ti  tr  br bl   */
    box-shadow: 5px 5px 15px #6366f6 inset;
}

    .garage:hover {
        color: #f2c1d9;
        background-color: #274ab6;
        box-shadow: 5px 5px 15px #cac6f1 inset;
        animation-name: but-fade1;
        animation-iteration-count: 1;
        animation-duration: .5s;
    }