/* BG */

#bg {
    -moz-animation: bg 60s linear infinite;
    -webkit-animation: bg 60s linear infinite;
    -ms-animation: bg 60s linear infinite;
    animation: bg 60s linear infinite;
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    /* Set your background with this */
    /*background: #348cb2 url("images/fjcu.png") bottom left;*/
    background: #FFFABF url("images/fjcu.png") bottom left;
    background-repeat: repeat-x;
    height: 100%;
    left: 0;
    opacity: 1;
    position: fixed;
    top: 0;
}

@-moz-keyframes bg {
    0% {
        -moz-transform: translate3d(0,0,0);
        -webkit-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }

    100% {
        -moz-transform: translate3d(-2250px,0,0);
        -webkit-transform: translate3d(-2250px,0,0);
        -ms-transform: translate3d(-2250px,0,0);
        transform: translate3d(-2250px,0,0);
    }
}

@-webkit-keyframes bg {
    0% {
        -moz-transform: translate3d(0,0,0);
        -webkit-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }

    100% {
        -moz-transform: translate3d(-2250px,0,0);
        -webkit-transform: translate3d(-2250px,0,0);
        -ms-transform: translate3d(-2250px,0,0);
        transform: translate3d(-2250px,0,0);
    }
}

@-ms-keyframes bg {
    0% {
        -moz-transform: translate3d(0,0,0);
        -webkit-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }

    100% {
        -moz-transform: translate3d(-2250px,0,0);
        -webkit-transform: translate3d(-2250px,0,0);
        -ms-transform: translate3d(-2250px,0,0);
        transform: translate3d(-2250px,0,0);
    }
}

@keyframes bg {
    0% {
        -moz-transform: translate3d(0,0,0);
        -webkit-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }

    100% {
        -moz-transform: translate3d(-2250px,0,0);
        -webkit-transform: translate3d(-2250px,0,0);
        -ms-transform: translate3d(-2250px,0,0);
        transform: translate3d(-2250px,0,0);
    }
}

#bg {
    background-size: 2250px auto;
    width: 6750px;
}

/* Overlay */

@-moz-keyframes overlay {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes overlay {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-ms-keyframes overlay {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes overlay {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

#overlay {
    -moz-animation: overlay 0.1s 0.1s forwards;
    -webkit-animation: overlay 0.1s 0.1s forwards;
    -ms-animation: overlay 0.1s 0.1s forwards;
    animation: overlay 0.1s 0.1s forwards;
    background-attachment: fixed, fixed;
    background-image: url("images/overlay-pattern.png"), url("images/overlay.svg");
    background-position: top left, center center;
    background-repeat: repeat, no-repeat;
    background-size: auto, cover;
    height: 100%;
    left: 0;
    opacity: 0;
    position: fixed;
    top: 0;
    width: 100%;
}

/* Main */

#main {
    height: 100%;
    left: 0;
    position: fixed;
    text-align: center;
    top: 0;
    width: 100%;
    overflow-y: auto;
}

    #main:before {
        content: '';
        display: inline-block;
        height: 100%;
        margin-right: 0;
        vertical-align: middle;
        width: 1px;
        overflow-y: auto;
    }

/* Header */

@-moz-keyframes header {
    0% {
        -moz-transform: translate3d(0,1em,0);
        -webkit-transform: translate3d(0,1em,0);
        -ms-transform: translate3d(0,1em,0);
        transform: translate3d(0,1em,0);
        opacity: 0;
    }

    100% {
        -moz-transform: translate3d(0,0,0);
        -webkit-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
        opacity: 1;
    }
}

@-webkit-keyframes header {
    0% {
        -moz-transform: translate3d(0,1em,0);
        -webkit-transform: translate3d(0,1em,0);
        -ms-transform: translate3d(0,1em,0);
        transform: translate3d(0,1em,0);
        opacity: 0;
    }

    100% {
        -moz-transform: translate3d(0,0,0);
        -webkit-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
        opacity: 1;
    }
}

@-ms-keyframes header {
    0% {
        -moz-transform: translate3d(0,1em,0);
        -webkit-transform: translate3d(0,1em,0);
        -ms-transform: translate3d(0,1em,0);
        transform: translate3d(0,1em,0);
        opacity: 0;
    }

    100% {
        -moz-transform: translate3d(0,0,0);
        -webkit-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
        opacity: 1;
    }
}

@keyframes header {
    0% {
        -moz-transform: translate3d(0,1em,0);
        -webkit-transform: translate3d(0,1em,0);
        -ms-transform: translate3d(0,1em,0);
        transform: translate3d(0,1em,0);
        opacity: 0;
    }

    100% {
        -moz-transform: translate3d(0,0,0);
        -webkit-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
        opacity: 1;
    }
}

@-moz-keyframes nav-icons {
    0% {
        -moz-transform: translate3d(0,1em,0);
        -webkit-transform: translate3d(0,1em,0);
        -ms-transform: translate3d(0,1em,0);
        transform: translate3d(0,1em,0);
        opacity: 0;
    }

    100% {
        -moz-transform: translate3d(0,0,0);
        -webkit-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
        opacity: 1;
    }
}

@-webkit-keyframes nav-icons {
    0% {
        -moz-transform: translate3d(0,1em,0);
        -webkit-transform: translate3d(0,1em,0);
        -ms-transform: translate3d(0,1em,0);
        transform: translate3d(0,1em,0);
        opacity: 0;
    }

    100% {
        -moz-transform: translate3d(0,0,0);
        -webkit-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
        opacity: 1;
    }
}

@-ms-keyframes nav-icons {
    0% {
        -moz-transform: translate3d(0,1em,0);
        -webkit-transform: translate3d(0,1em,0);
        -ms-transform: translate3d(0,1em,0);
        transform: translate3d(0,1em,0);
        opacity: 0;
    }

    100% {
        -moz-transform: translate3d(0,0,0);
        -webkit-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
        opacity: 1;
    }
}

@keyframes nav-icons {
    0% {
        -moz-transform: translate3d(0,1em,0);
        -webkit-transform: translate3d(0,1em,0);
        -ms-transform: translate3d(0,1em,0);
        transform: translate3d(0,1em,0);
        opacity: 0;
    }

    100% {
        -moz-transform: translate3d(0,0,0);
        -webkit-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
        opacity: 1;
    }
}

#header {
    -moz-animation: header 1s 2.25s forwards;
    -webkit-animation: header 1s 2.25s forwards;
    -ms-animation: header 1s 2.25s forwards;
    animation: header 1s 2.25s forwards;
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    cursor: default;
    display: inline-block;
    opacity: 0;
    position: relative;
    text-align: center;
    top: 1em;
    vertical-align: top;
    width: 90%;
}

    #header h1 {
        font-size: 4.35em;
        font-weight: 900;
        letter-spacing: -0.035em;
        line-height: 1.2em;
        color: #061882;
        text-decoration: none;
    }

        #header h1 a {
            text-decoration: none;
        }

            #header h1 a:hover {
                text-decoration: none;
            }

    #header p {
        font-size: 1.25em;
        margin: 0.75em 0 0.25em 0;
        opacity: 0.75;
        color: #061882;
    }

    #header nav {
        margin: 1.5em 0 0 0;
    }


/* Footer */

#footer {
    background-image: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.5) 75%);
    background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.5) 75%);
    background-image: -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.5) 75%);
    background-image: linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.5) 75%);
    bottom: 0;
    cursor: default;
    height: 5em;
    left: 0;
    line-height: 6em;
    text-align: center;
    width: 100%;
    color: #061882;
}

/* Wide */

@media screen and (max-width: 1680px) {

    /* Basic */

    body, input, select, textarea {
        font-size: 13pt;
    }

    /* BG */

    @-moz-keyframes bg {
        0% {
            -moz-transform: translate3d(0,0,0);
            -webkit-transform: translate3d(0,0,0);
            -ms-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
        }

        100% {
            -moz-transform: translate3d(-1500px,0,0);
            -webkit-transform: translate3d(-1500px,0,0);
            -ms-transform: translate3d(-1500px,0,0);
            transform: translate3d(-1500px,0,0);
        }
    }

    @-webkit-keyframes bg {
        0% {
            -moz-transform: translate3d(0,0,0);
            -webkit-transform: translate3d(0,0,0);
            -ms-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
        }

        100% {
            -moz-transform: translate3d(-1500px,0,0);
            -webkit-transform: translate3d(-1500px,0,0);
            -ms-transform: translate3d(-1500px,0,0);
            transform: translate3d(-1500px,0,0);
        }
    }

    @-ms-keyframes bg {
        0% {
            -moz-transform: translate3d(0,0,0);
            -webkit-transform: translate3d(0,0,0);
            -ms-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
        }

        100% {
            -moz-transform: translate3d(-1500px,0,0);
            -webkit-transform: translate3d(-1500px,0,0);
            -ms-transform: translate3d(-1500px,0,0);
            transform: translate3d(-1500px,0,0);
        }
    }

    @keyframes bg {
        0% {
            -moz-transform: translate3d(0,0,0);
            -webkit-transform: translate3d(0,0,0);
            -ms-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
        }

        100% {
            -moz-transform: translate3d(-1500px,0,0);
            -webkit-transform: translate3d(-1500px,0,0);
            -ms-transform: translate3d(-1500px,0,0);
            transform: translate3d(-1500px,0,0);
        }
    }

    #bg {
        background-size: 1500px auto;
        width: 4500px;
    }
}

/* Normal */

@media screen and (max-width: 1280px) {

    /* Basic */

    body, input, select, textarea {
        font-size: 12pt;
    }

    /* BG */

    @-moz-keyframes bg {
        0% {
            -moz-transform: translate3d(0,0,0);
            -webkit-transform: translate3d(0,0,0);
            -ms-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
        }

        100% {
            -moz-transform: translate3d(-750px,0,0);
            -webkit-transform: translate3d(-750px,0,0);
            -ms-transform: translate3d(-750px,0,0);
            transform: translate3d(-750px,0,0);
        }
    }

    @-webkit-keyframes bg {
        0% {
            -moz-transform: translate3d(0,0,0);
            -webkit-transform: translate3d(0,0,0);
            -ms-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
        }

        100% {
            -moz-transform: translate3d(-750px,0,0);
            -webkit-transform: translate3d(-750px,0,0);
            -ms-transform: translate3d(-750px,0,0);
            transform: translate3d(-750px,0,0);
        }
    }

    @-ms-keyframes bg {
        0% {
            -moz-transform: translate3d(0,0,0);
            -webkit-transform: translate3d(0,0,0);
            -ms-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
        }

        100% {
            -moz-transform: translate3d(-750px,0,0);
            -webkit-transform: translate3d(-750px,0,0);
            -ms-transform: translate3d(-750px,0,0);
            transform: translate3d(-750px,0,0);
        }
    }

    @keyframes bg {
        0% {
            -moz-transform: translate3d(0,0,0);
            -webkit-transform: translate3d(0,0,0);
            -ms-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
        }

        100% {
            -moz-transform: translate3d(-750px,0,0);
            -webkit-transform: translate3d(-750px,0,0);
            -ms-transform: translate3d(-750px,0,0);
            transform: translate3d(-750px,0,0);
        }
    }

    #bg {
        background-size: 750px auto;
        width: 2250px;
    }
}

/* Mobile */

@media screen and (max-width: 736px) {

    /* Basic */

    body {
        min-width: 320px;
    }

    body, input, select, textarea {
        font-size: 11pt;
    }

    /* BG */

    @-moz-keyframes bg {
        0% {
            -moz-transform: translate3d(0,0,0);
            -webkit-transform: translate3d(0,0,0);
            -ms-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
        }

        100% {
            -moz-transform: translate3d(-300px,0,0);
            -webkit-transform: translate3d(-300px,0,0);
            -ms-transform: translate3d(-300px,0,0);
            transform: translate3d(-300px,0,0);
        }
    }

    @-webkit-keyframes bg {
        0% {
            -moz-transform: translate3d(0,0,0);
            -webkit-transform: translate3d(0,0,0);
            -ms-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
        }

        100% {
            -moz-transform: translate3d(-300px,0,0);
            -webkit-transform: translate3d(-300px,0,0);
            -ms-transform: translate3d(-300px,0,0);
            transform: translate3d(-300px,0,0);
        }
    }

    @-ms-keyframes bg {
        0% {
            -moz-transform: translate3d(0,0,0);
            -webkit-transform: translate3d(0,0,0);
            -ms-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
        }

        100% {
            -moz-transform: translate3d(-300px,0,0);
            -webkit-transform: translate3d(-300px,0,0);
            -ms-transform: translate3d(-300px,0,0);
            transform: translate3d(-300px,0,0);
        }
    }

    @keyframes bg {
        0% {
            -moz-transform: translate3d(0,0,0);
            -webkit-transform: translate3d(0,0,0);
            -ms-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
        }

        100% {
            -moz-transform: translate3d(-300px,0,0);
            -webkit-transform: translate3d(-300px,0,0);
            -ms-transform: translate3d(-300px,0,0);
            transform: translate3d(-300px,0,0);
        }
    }

    #bg {
        background-size: 300px auto;
        width: 900px;
    }

    /* Header */

    #header h1 {
        font-size: 2.5em;
    }

    #header p {
        font-size: 1em;
    }

    #header nav {
        font-size: 1em;
    }

        #header nav a:hover {
            font-size: 1em;
        }

        #header nav a:active {
            font-size: 1em;
        }
}

/* Mobile (Portrait) */

@media screen and (max-width: 480px) {

    /* BG */

    @-moz-keyframes bg {
        0% {
            -moz-transform: translate3d(0,0,0);
            -webkit-transform: translate3d(0,0,0);
            -ms-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
        }

        100% {
            -moz-transform: translate3d(-412.5px,0,0);
            -webkit-transform: translate3d(-412.5px,0,0);
            -ms-transform: translate3d(-412.5px,0,0);
            transform: translate3d(-412.5px,0,0);
        }
    }

    @-webkit-keyframes bg {
        0% {
            -moz-transform: translate3d(0,0,0);
            -webkit-transform: translate3d(0,0,0);
            -ms-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
        }

        100% {
            -moz-transform: translate3d(-412.5px,0,0);
            -webkit-transform: translate3d(-412.5px,0,0);
            -ms-transform: translate3d(-412.5px,0,0);
            transform: translate3d(-412.5px,0,0);
        }
    }

    @-ms-keyframes bg {
        0% {
            -moz-transform: translate3d(0,0,0);
            -webkit-transform: translate3d(0,0,0);
            -ms-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
        }

        100% {
            -moz-transform: translate3d(-412.5px,0,0);
            -webkit-transform: translate3d(-412.5px,0,0);
            -ms-transform: translate3d(-412.5px,0,0);
            transform: translate3d(-412.5px,0,0);
        }
    }

    @keyframes bg {
        0% {
            -moz-transform: translate3d(0,0,0);
            -webkit-transform: translate3d(0,0,0);
            -ms-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
        }

        100% {
            -moz-transform: translate3d(-412.5px,0,0);
            -webkit-transform: translate3d(-412.5px,0,0);
            -ms-transform: translate3d(-412.5px,0,0);
            transform: translate3d(-412.5px,0,0);
        }
    }
    #bg {
        background-size: 412.5px auto;
        width: 1237.5px;
    }
    /* Header */
    #header nav {
        padding: 0 1em;
    }
}

/*my menu*/
.mymenu {
    display: inline-block;
    line-height: 20px;
    text-align: right;
    width: 100%;
}
.mymenu > .mainItem ul {
    position: absolute;
    z-index: 2;
    visibility: hidden;
    opacity: 100;
    list-style: none;
}
.mainItem {
    position: relative;
    text-align: left;
    padding-right: 20px;
    display: inline-block;
}
.mainItem .title:hover {
    background-color: antiquewhite;
    color:darkblue;
    font-weight:700;
}
    .mainItem:hover > ul {
        position: absolute;
        visibility: visible;
        background-color: white;
        width: 200px;
        padding: 2px;
        border: 1px solid black;
    }
.mymenu > .mainItem > .title {
    font-size: 1.5em;
}

.mainItem > li {
    list-style: none;
}
.mainItem ul > li  span {
    font-size: 1.2em;
    display: inline-block;
    width:100%;
}
    .mainItem ul > li > span:hover {
        background-color: aquamarine;
    }
    

/*my news ol li*/
.myNews {
    margin-top: 1em;
    background-color: #f6d8af;
    color:black;
    text-align: left;
    font-size: 1.5em;
    border-radius: 5px;
    box-shadow: 10px 10px 10px 5px #808080;
    border: 2px solid Highlight;
}
    .myNews .news-Title {
        font-size: 2em;
        line-height: 2em;
        font-weight: 400;
        color: #f6d8af;
        border: 2px #000079 solid;
        background-color: #000079;
        padding-left: 5px;
    }
    .myNews .date {
        line-height: 1.5em;
        padding-left: 3px;
        margin-right: 10px;
        color: white;
        background-color: #000079;
    }
    .myNews li {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .myNews .item:hover {
        background-color: antiquewhite;
    }
    .myNews .hotitem {
        color: red;
        font-weight: 600;
    }
        .myNews .hotitem:hover {
            background-color: antiquewhite;
        }

/* Style the tab */
.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}
    /* Style the buttons inside the tab */
    .tab button {
        background-color: inherit;
        float: left;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 14px 16px;
        transition: 0.3s;
        font-size: 17px;
    }
        /* Change background color of buttons on hover */
        .tab button:hover {
            background-color: #ddd;
        }
        /* Create an active/current tablink class */
        .tab button.active {
            background-color: #ccc;
        }
/* Style the tab content */
.tabcontent {
    text-align: left;
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
    max-height: 100%;
    /*overflow-y: auto;*/
}


/*my forms */
.myForms {
    margin-top: 1em;
}
    .myForms .p-left {
        text-align: left;
    }
    .myForms .p-right {
        text-align: right;
    }
    .myForms .p-center {
        text-align: center;
    }
    .myForms table {
        /*overflow: auto;*/
        width: 100%;
        border: 1px solid #8b8bb6;
        height: 100%;
        table-layout: fixed;
        border-collapse: collapse;
        border-spacing: 1px;
        text-align: center;
        background-color: #ffffff;
    }
        .myForms table th {
            border: 1px solid #8b8bb6;
            background-color: #003d66;
            color: #ffffff;
            padding: 5px;
        }
        .myForms table td {
            border: 1px solid #8b8bb6;
            text-align: left;
            color:black;
            padding: 5px;
        }
        .myForms table tr:hover {
            background-color: antiquewhite;
        }
    .myForms input[type=text], input[type=date], input[type=number], input[type=password], input[type=file] {
        padding: 10px;
        border: solid .1px black;
        border-radius: 10px;
        background-color: #fff;
        outline: none;
      
    }
    .myForms select {
        padding: 5px;
        border-radius: 35px;
        border: 1px solid black;
        outline: none;
      
    }
    .myForms textarea {
        width: 100%;
        height: 250px;
        padding: 12px 20px;
        box-sizing: border-box;
        border: 2px solid #ccc;
        border-radius: 4px;
        background-color: #f8f8f8;
        resize: none;
      
    }
    .myForms button, input[type=button], input[type=submit] {
        background-color: darkblue;
        padding: 5px;
        border-radius: 20px;
        border: 1px solid black;
        outline: none;
        font-size: 1.5em;
        color: white;
    }
        .myForms button:hover, input[type=button]:hover, input[type=submit]:hover {
            background-color: deepskyblue;
        }
    .myForms label {
        font-size: 1.5em;
        /*background-color: burlywood;*/
        display: inline-block;
    } 
    .myForms .FORMLINE-title {
        text-align: center;
        font-size: 2em;
        padding-bottom: 5px;
        padding-top: 5px;
        background-color: Highlight;
        color: white;
    }
    .myForms .FORMLINE-body {
        text-align: left;
        width: 99%;
        background-color: lightgray;
        border-radius: 5px;
        border: 1px solid Highlight;
    }
    .myForms .FORMLINE-item div{
        margin: 5px 0px 5px 0px;
    }
    .myForms .FORMLINE-footer {
        text-align: center;
        padding-top: 5px;
        padding-bottom: 5px;
        background-color: Highlight
    }
    .myForms .FORMLINE-footer a:hover {
            background-color: deepskyblue;
            
        }
    .myForms .FORMLINE-filedname  {
        font-weight:600;
        font-size:1.5em;
       
    }

.mylink {
    background-color: darkblue;
    padding: 8px;
    border-radius: 20px;
    border: 1px solid black;
    outline: none;
    font-size: 1.5em;
    color: white;
    text-decoration: none;
}