body {
    background-color: #111;

    font-weight: 400;
    font-style: normal;      

    letter-spacing: 3px;

    background-image: url("../images/re2r-leon-and-claire-alt-5op.jpg");
    background-position: 50% 10%;
    background-size: cover;
}

nav {
    background-color: rgba(7, 7, 7, 0.92);
    font-family: "Bebas Neue", sans-serif;
}

a {
    color: #a1d22e;
}

nav a.navbar-brand {
    font-size: 56px;
    margin: 0 auto;
    color: #eee;
    letter-spacing: -1px;
    padding: 0;
}

nav a.navbar-brand span.red {
    color: #c7261e;
}

nav a.navbar-brand span.yellow {
    color: #a1d22e;
}

nav a.navbar-brand span.subtitle {
    display: block;
    margin: -25px auto 0 auto;
    color: #c0c0d0;
    font-size: 36px;
    text-align: center;
    letter-spacing: 3px;
}

ul.nav {
    width: 100%;
    font-family: "Bebas Neue", sans-serif;
}

ul.nav li.nav-item {
    width: 15%;
    margin-right: 15px;
    text-align: center;
}

a.nav-link {
    padding: 10px 20px 5px 20px;
    color: #eee;
    font-size: 28px;
}

a.nav-link.active {
    color: #c7261e;
    border-bottom: 5px solid rgb(199, 38, 30);
}

a.nav-link:hover {
    color: rgb(199, 38, 30);
}

#container {
    padding: 30px 60px 30px 60px;
    font-size: 20px;
    font-weight: 400;
    color: #fff;
    font-family: "Prompt", sans-serif;
    letter-spacing: 1px;
}

div.page {
    display: none;
}

div.page.active {
    display: block;
}

div.page div.panel {
    display: block;
    float: left;
    width: 45%;
    height: 270px;
    margin: 0 20px 20px 0;
    padding: 0 20px 20px 20px;
    background-color: rgba(64, 7, 5, 0.9);
    border: 5px solid rgba(160, 27, 20, 0.7);
    color: #ddd;
}

div.page div.panel div.step-number {
    float: left;
    font-size: 56px;
    padding: 0 20px 10px 0;
    height: 250px;
    color: #ffffff;
}

div.page div.panel div.images {
    position: relative;
    display: block;
    float: right;
    margin: 17px auto 10px auto;
}

div.page div.panel div.images img {
    width: 220px;
    border: 3px solid #ddd;
}

div.page div.panel div.images img:hover {
    cursor: pointer;
}

div.page div.panel h4 {
    font-size: 24px;
    margin-top: 15px;
}

div.page div.panel ul { margin-left: 30px; }
#clientmods div.panel-2 ul { margin-left: 42px; }
#clientmods div.panel-3 ul { margin-left: 42px; }
#clientmods div.panel-4 ul { margin-left: 42px; }
#generation div.panel-2 ul { margin-left: 42px; }
#generation div.panel-3 ul { margin-left: 42px; }
#generation div.panel-4 ul { margin-left: 42px; }

div.page div.panel li {
    margin-top: 15px;
    font-size: 18px;
}

div.page div.form-group {
    display: block;
    float: left;
    width: 30%;
    height: 300px;
    margin: 0 20px 20px 0;
    padding: 15px 20px 20px 20px;
    background-color: rgba(64, 7, 5, 0.9);
    border: 5px solid rgba(160, 27, 20, 0.7);
    color: #ddd;
    font-size: 18px;
}

div.page div.form-group div.form-check {
    margin-left: -25px;
}

div.page div.form-group div.form-subgroup {
    margin-left: 20px;
    margin-bottom: 5px;
    padding: 10px 20px 10px 20px;
    background-color: rgba(7, 7, 7, 0.4);
}

div.page div.form-group input, div.page div.form-group select {
    margin-bottom: 10px;
}

div.page div.action-group button {
    margin-bottom: 20px;
}

#hosting div.panel {
    height: 400px;
}

#connecting div.panel {
    height: 500px;
}

#datapackage div.panel {
    height: 100%;
}

#datapackage div.panel li {
    margin-top: 0;
}

#datapackage em {
    font-size: 16px;
}

#imgViewer img {
    max-width: 950px;
}

#imgViewer::-webkit-scrollbar {
    -webkit-appearance: none;
    height: 10px;
}

#imgViewer::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: rgba(0,0,0,.5);
    box-shadow: 0 0 1px rgba(255,255,255,.5);
}

div.modal button.btn.close {
    font-size: 32px;
    line-height: 28px;
}

div.modal-dialog {
    width: 1000px;
    max-width: 1000px;
}

div.images::before {
    font-size: 12px;
    content: 'Click Image To View Full Size';
    display: block;
    position: absolute;
    left: 12px;
    bottom: 5px;
}

button.next-step {
    display: block;
    background-color: #a1d22e;
    color: #111;
    font-weight: 500;
}

button.next-step:hover {
    background-color: #7ea81d;
    color: #111;
    font-weight: 600;
}

div.clear { clear: both; }