html, body, form#Form {
    background:#888;
}

body {
    animation: slideRight 0.3s;
    transition: 0.3s ease-in;
}

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

@keyframes slideRight {
    from { transform:translate3d(100%,0,0 )}
    to { transform:translate3d(0,0,0 )}
}

#siteWrapper {
    max-width: 768px;
    margin: auto;
}

.blue-gradient {
    background: -webkit-linear-gradient(272deg, rgb(78, 86, 73) 0%, rgb(166, 189, 207) 11%, rgb(225, 232, 238) 70%, rgb(252, 254, 253) 100%);
    background: -o-linear-gradient(272deg, rgb(78, 86, 73) 0%, rgb(166, 189, 207) 11%, rgb(225, 232, 238) 70%, rgb(252, 254, 253) 100%);
    background: -ms-linear-gradient(272deg, rgb(78, 86, 73) 0%, rgb(166, 189, 207) 11%, rgb(225, 232, 238) 70%, rgb(252, 254, 253) 100%);
    background: -moz-linear-gradient(272deg, rgb(78, 86, 73) 0%, rgb(166, 189, 207) 11%, rgb(225, 232, 238) 70%, rgb(252, 254, 253) 100%);
    background: linear-gradient(178deg, rgb(78, 86, 73) 0%, rgb(166, 189, 207) 11%, rgb(225, 232, 238) 70%, rgb(252, 254, 253) 100%);
}

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

.kiosk-width {
    padding: 5px 60px;
} .kiosk-width > div {
    width: 100%;
}

/* Kiosk homepage */
a.kiosk-btn {  
    padding: 5px;
    margin: 15px;
    width: 275px;
    height: 90px;
    text-align: center;
    transition: box-shadow 0.1s ease-in;
    background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ced1d6), color-stop(1, #ffffff) );
    background-color: #ced1d6;
    border-radius: 6px;
    border: 1px solid #050525;
    color: #000;
    text-shadow: 1px 1px 0px #ffffff;
}

a.kiosk-btn:hover {
    box-shadow: inset 0px 0px 5px 1px #777;
    text-decoration:none;
}
/* Kiosk inner page */
.nav-pane {
    margin: auto;
    padding: 1rem;
}

/* Rich text container styling */
.rich-text table {
    width: 100%;
}

.rich-text td {
    padding: 10px;
}

.rich-text h1, .rich-text h2, .rich-text h3 {
    font-weight: bold;
    margin-bottom: 2rem;
}
.rich-text li {
    margin: 5px 0
}

.footer {
    text-align: center;
    font-weight: bold;
    background-color: #94ACC6;
    padding: 10px;
}

@media screen and (max-width: 596px) {
    .kiosk-width {
        padding: 5px 20px;
    }

    a.kiosk-btn {  
        margin: 5px;
        width: 150px;
        height: 120px;
        font-size: 0.85rem;
    }

    a.kiosk-btn img {
        width: 100%;
    }

    .rich-text td {
        display: block;
    }

    .rich-text p, .rich-text li {
        font-size: 0.85rem;
    }

    .rich-text h1 {
        font-size: 1.5rem;
    }

    .rich-text h2 {
        font-size: 1.25rem;
    }
}

@media screen and (max-width: 320px) {
    a.kiosk-btn {  
        width: 130px;
    }
}

@media all and (min-height: 1000px) and (max-height:1400px) {
    html, body, form#Form, #siteWrapper {
        height: 100%;
    }

    .nav-pane {
        position: fixed;
        width: 762px;
        bottom : 36px;
    }

    .footer {
        position: fixed;
        width: 762px;
        bottom: 0;
    }
}