/* ----- DESIGN -------------------------------------------------------------------------------- */

@font-face {
    font-family: 'Jokerman';
    src: url('public/Jokerman-Regular.woff2') format('woff2'), url('public/Jokerman-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.clear {
    clear: both;
}

/* ----- Layout -------------------------------------------------------------------------------- */

body {
    margin: 20px;
}

.facebook {
    display: none;
}

.body {
    padding-top: 20px;
    clear: both;
}

h1.main-h1 {
    text-align: center;
}

/* ----- Menu ---------------------------------------------------------------------------------- */

.mainmenu {
    padding: 10px 5px;
    text-align: center;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

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

.mainmenu ul li {
    padding: 0;
    display: inline;
}

.mainmenu ul li div {
    display: inline;
}

.mainmenu ul li a {
    display: inline-block;
    padding: 5px;
    color: #005700;
}

/*.mainmenu ul li .active-link a {
    color: #b00f0c;
}*/
    
/* ----- Content ------------------------------------------------------------------------------- */

.content .menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.content .menu ul li {
    padding: 0;
}

.content .menu ul li a {
    display: block;
    padding: 10px;
    font-family: Jokerman;
    font-size: 1.3em;
    text-decoration: none;
    color: #005700;
}

.content .menu ul li a::before {
    content: " ";
    width: 43px;
    height: 26px;
    display: block;
    float: left;
    margin-right: 10px;
    background: url('/file.php?rid=57') no-repeat 0 0;
}

.content .menu ul li a:hover {
    color: #b00f0c;
}

.content .menu ul li a:hover::before {
    background-position-y: -26px;
}

.content .menu ul li a span {
    display: block;
    float: left;
}

.content .menu ul li a::after {
    content: " ";
    display: block;
    clear: both;
}

/* ----- RESPONSIVE ---------------------------------------------------------------------------- */

@media (min-width: 600px) {
    body {
        margin: 0;
        overflow: hidden;
        background: black;
    }
    
    h1.main-h1 {
        display: none;
    }
    
    .container {
        position: absolute;
        width: 1300px;
        height: 870px;
        overflow: hidden;
        background: #A0BAC9;
    }
    
    @keyframes clouds {
        from {
            background-position: 0px;
        }
        to {
            background-position: -2000px;
        }
    }
    
    .clouds {
        position: absolute;
        top: 3.4%;
        width: 100%;
        height: 42.5%;
        background-repeat: repeat-x;
        background-size: cover;
        animation: clouds 100s linear infinite;
    }
    
    .land {
        position: absolute;
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-size: cover;
    }
    
    .tree {
        position: absolute;
        top: 1%;
        left: 1%;
        width: 26.3%;
        height: 90.8%;
        background-repeat: no-repeat;
        background-size: cover;
    }
    
    @keyframes logo {
        0% {
            transform: rotate(10deg);
        }
        50% {
            transform: rotate(-5deg)
        }
        100% {
            transform: rotate(10deg);
        }
    }
    
    .logo {
        position: absolute;
        top: 5%;
        left: 2%;
        width: 13%;
        height: 22%;
        background-repeat: no-repeat;
        background-size: cover;
        transform-origin: 50% 0;
        animation: logo 3s ease-in-out forwards infinite;
    }
    
    .donkey {
        position: absolute;
        top: 38%;
        left: 3%;
        width: 34.8%;
        height: 45.6%;
        background-repeat: no-repeat;
        background-size: cover;
    }
    
    .donkey .ears {
        position: absolute;
        top: 1%;
        left: 42%;
        width: 60%;
        height: 16%;
        background-repeat: no-repeat;
        background-size: cover;
    }
    
    .donkey .head {
        position: absolute;
        top: 2%;
        left: 62%;
        width: 21.5%;
        height: 55%;
        background-repeat: no-repeat;
        background-size: cover;
    }
    
    .donkey .eyes {
        position: absolute;
        top: 14%;
        left: 60.5%;
        width: 25.5%;
        height: 14.5%;
        background-repeat: no-repeat;
        background-size: cover;
    }
    
    .donkey .tail {
        position: absolute;
        top: 33.4%;
        left: -5.7%;
        width: 19%;
        height: 38%;
        background-repeat: no-repeat;
        background-size: cover;
    }
    
    .goat {
        position: absolute;
        top: 63.2%;
        left: 0.2%;
        width: 24.2%;
        height: 32.9%;
        background-repeat: no-repeat;
        background-size: cover;
    }
    
    .goat .ears {
        position: absolute;
        top: 18%;
        left: 35%;
        width: 60.2%;
        height: 16%;
        background-repeat: no-repeat;
        background-size: cover;
    }
    
    .goat .head {
        position: absolute;
        top: 18.3%;
        left: 40.1%;
        width: 43.2%;
        height: 55%;
        background-repeat: no-repeat;
        background-size: cover;
    }
    
    .goat .eyes {
        position: absolute;
        top: 24.3%;
        left: 48%;
        width: 33.2%;
        height: 18%;
        background-repeat: no-repeat;
        background-size: cover;
    }
    
    .goat .tail {
        position: absolute;
        top: 24.4%;
        left: -4%;
        width: 36.5%;
        height: 23%;
        background-repeat: no-repeat;
        background-size: cover;
    }
    
    .dog {
        position: absolute;
        top: 26.1%;
        left: 84.6%;
        width: 13.1%;
        height: 29.9%;
        z-index: 8;
        background-repeat: no-repeat;
        background-size: cover;
    }
    
    .dog .head {
        position: absolute;
        top: 0%;
        left: 0%;
        width: 84.5%;
        height: 51%;
        background-repeat: no-repeat;
        background-size: cover;
    }
    
    .dog .head:hover {
        height: 55%;
    }
    
    .dog .eyes {
        position: absolute;
        top: 5%;
        left: 13.5%;
        width: 56%;
        height: 18%;
        background-repeat: no-repeat;
        background-size: cover;
    }
    
    .doodah {
        position: absolute;
        left: 30.5%;
        top: 30%;
        width: 77%;
        height: 63%;
        z-index: 2;
        background: no-repeat bottom left;
        background-size: cover;
    }
    
    .maker {
        position: absolute;
        top: 14.2%;
        left: 19.9%;
        width: 12.9%;
        height: 85.2%;
        z-index: 3;
        background-repeat: no-repeat;
        background-size: cover;
    }
    
    .sign {
        position: absolute;
        top: 10%;
        left: 73%;
        width: 15%;
        height: 32.5%;
        background-repeat: no-repeat;
        background-size: cover;
    }
    
    .sign .facebook {
        position: absolute;
        top: 69%;
        left: 20%;
        width: 54%;
        height: 11%;
        display: block;
        z-index: 5;
        background-repeat: no-repeat;
        background-size: cover;
    }
    
    .sign .facebook span {
        display: none;
    }
    
    .birds {
        position: absolute;
        width: 15%;
        height: 15%;
        top: 9%;
    }
    
    .birds .bird {
        position: absolute;
        width: 40%;
        height: 40%;
        background: no-repeat;
        background-size: cover;
    }
    
    .birds .bird1 {
        left: 30%;
    }
    
    .birds .bird2 {
        top: 20%;
    }
    
    .birds .bird3 {
        top: 55%;
        left: 20%;
    }
    
    .birds .bird4 {
        top: 30%;
        left: 60%;
    }
    
    @keyframes birds-left-to-right {
        0% {
            left: -115%;
        }
        30%, 100% {
            left: 215%;
        }
    }
    
    .birds-left-to-right {
        left: -115%;
        animation: birds-left-to-right 35s linear infinite;
    }
    
    @keyframes birds-right-to-left {
        0%, 50% {
            left: 215%;
        }
        80%, 100% {
            left: -125%;
        }
    }
    
    .birds-right-to-left {
        left: 215%;
        animation: birds-right-to-left 35s linear infinite;
    }
    
    /* ----- Menu ---------------------------------------------------------------------------------- */
    
    .mainmenu {
        padding: 0;
        border: none;
    }
    
    .mainmenu ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    
    .mainmenu ul li a {
        display: block;
        padding: 0;
    }
    
    .mainmenu ul li a {
        position: absolute;
        z-index: 6;
        background: no-repeat;
        background-size: cover;
    }
    
    .mainmenu ul li a:hover {
        z-index: 10;
    }
    
    .mainmenu ul li a:hover::after {
        position: absolute;
        content: " ";
        display: block;
        z-index: 10;
        pointer-events: none;
        background: no-repeat;
        background-size: cover;
    }
    
    .mainmenu ul li a span {
        display: none;
    }
    
    .mainmenu ul li.li-1 a {
        top: 6.5%;
        left: 26.2%;
        width: 9.1%;
        height: 24%;
    }
    
    .mainmenu ul li.li-1 a:hover::after {
        left: 105%;
        top: 50%;
        width: 117%;
        height: 44%;
        z-index: 7;
    }
    
    .mainmenu ul li.li-2 a {
        top: 8.5%;
        left: 36%;
        width: 8.1%;
        height: 21.5%;
    }
    
    .mainmenu ul li.li-2 a:hover::after {
        left: 110%;
        top: 38%;
        width: 124%;
        height: 64%;
    }
    
    .mainmenu ul li.li-3 a {
        top: 8%;
        left: 44.5%;
        width: 6%;
        height: 21.9%;
    }
    
    .mainmenu ul li.li-3 a:hover::after {
        left: 108%;
        top: 24%;
        width: 148%;
        height: 38%;
    }
    
    .mainmenu ul li.li-4 a {
        top: 7.3%;
        left: 50.5%;
        width: 4.9%;
        height: 21.4%;
    }
    
    .mainmenu ul li.li-4 a:hover::after {
        left: 108%;
        top: 79%;
        width: 250%;
        height: 54%;
    }
    
    .mainmenu ul li.li-5 a {
        top: 5.8%;
        left: 54.2%;
        width: 7.5%;
        height: 13.5%;
    }
    
    .mainmenu ul li.li-5 a:hover::after {
        left: 100%;
        top: 29%;
        width: 110%;
        height: 50%;
    }
    
    .mainmenu ul li.li-6 a {
        top: 16.3%;
        left: 56.2%;
        width: 14.5%;
        height: 26.5%;
        z-index: 0;
    }
    
    .mainmenu ul li.li-6 a:hover::after {
        left: 95%;
        top: 17%;
        width: 106%;
        height: 39%;
    }
    
    /* ----- Content ------------------------------------------------------------------------------- */
    
    .body {
        position: absolute;
        top: 40.2%;
        left: 35.5%;
        width: 38.45%;
        height: 47.6%;
        margin: 0;
        padding: 4.6% 2.6% 3.2% 2.6%;
        z-index: 3;
        background-repeat: no-repeat;
        background-size: cover;
    }
    
    .content {
        height: 100%;
    }
}

@media (min-width: 600px) {
    
    .clouds {
        background-image: url('/file.php?rid=16&width=1500');
    }

    .land {
        background-image: url('/file.php?rid=2&width=650');
    }

    .tree {
        background-image: url('/file.php?rid=5');
    }

    .logo {
        background-image: url('/file.php?rid=39&width=160');
    }

    .doodah {
        background-image: url('/file.php?rid=15&width=600');
    }
    
    .maker {
        background-image: url('/file.php?rid=14&width=100');
    }
    
    .sign {
        background-image: url('/file.php?rid=45&width=240');
    }
    
    .sign .facebook {
        background-image: url('/file.php?rid=44');
    }


    .donkey {
        background-image: url('/file.php?rid=10');
    }
    
    .donkey .ears {
        background-image: url('/file.php?rid=49');
    }
    
    .donkey .head {
        background-image: url('/file.php?rid=51');
    }
    
    .donkey .eyes {
        background-image: url('/file.php?rid=50');
    }
    
    .donkey .tail {
        background-image: url('/file.php?rid=52');
    }


    .dog {
        background-image: url('/file.php?rid=8');
    }
    
    .dog .head {
        background-image: url('/file.php?rid=54');
    }
    
    .dog .head:hover {
        background-image: url('/file.php?rid=55');
    }
    
    .dog .eyes {
        background-image: url('/file.php?rid=53');
    }


    .birds-left-to-right .bird {
        background-image: url('/file.php?rid=37');
    }
    
    .birds-right-to-left .bird {
        background-image: url('/file.php?rid=38');
    }


    .mainmenu ul li.li-1 a {
        background-image: url('/file.php?rid=17');
    }
    
    .mainmenu ul li.li-1 a:hover {
        background-image: url('/file.php?rid=26');
    }
    
    .mainmenu ul li.li-1 a:hover::after {
        background-image: url('/file.php?rid=25');
    }
    
    .mainmenu ul li.li-2 a {
        background-image: url('/file.php?rid=18');
    }
    
    .mainmenu ul li.li-2 a:hover {
        background-image: url('/file.php?rid=24');
    }
    
    .mainmenu ul li.li-2 a:hover::after {
        background-image: url('/file.php?rid=23');
    }
    
    .mainmenu ul li.li-3 a {
        background-image: url('/file.php?rid=19');
    }
    
    .mainmenu ul li.li-3 a:hover {
        background-image: url('/file.php?rid=28');
    }
    
    .mainmenu ul li.li-3 a:hover::after {
        background-image: url('/file.php?rid=27');
    }
    
    .mainmenu ul li.li-4 a {
        background-image: url('/file.php?rid=29');
    }
    
    .mainmenu ul li.li-4 a:hover {
        background-image: url('/file.php?rid=31');
    }
    
    .mainmenu ul li.li-4 a:hover::after {
        background-image: url('/file.php?rid=30');
    }
    
    .mainmenu ul li.li-5 a {
        background-image: url('/file.php?rid=20');
    }
    
    .mainmenu ul li.li-5 a:hover {
        background-image: url('/file.php?rid=33');
    }
    
    .mainmenu ul li.li-5 a:hover::after {
        background-image: url('/file.php?rid=32');
    }
    
    .mainmenu ul li.li-6 a {
        background-image: url('/file.php?rid=34');
    }
    
    .mainmenu ul li.li-6 a:hover {
        background-image: url('/file.php?rid=36');
    }
    
    .mainmenu ul li.li-6 a:hover::after {
        background-image: url('/file.php?rid=35');
    }
    

    .body {
        background-image: url('/file.php?rid=13');
    }
}

@media (min-width: 1400px) {
    .clouds {
        background-image: url('/file.php?rid=16');
    }

    .logo {
        background-image: url('/file.php?rid=39');
    }

    .land {
        background-image: url('/file.php?rid=2');
    }

    .doodah {
        background-image: url('/file.php?rid=15');
    }
    
    .maker {
        background-image: url('/file.php?rid=14');
    }
    
    .sign {
        background-image: url('/file.php?rid=45');
    }
}