@import url('https://fonts.googleapis.com/css?family=Roboto:100,400,700');

:root {
    --muscle-red: #d21f28;
    --muscle-white: #fff;
    --muscle-black: #011;
    --muscle-text-color: #333;
    --muscle-grey: #aaa;
    --muscle-badge: #797676;
    --muscle-transparent: transparent;
    --front-card-background: linear-gradient(to left, rgba(0,0,0,0), #fff, #eee);
    --front-card-footer-background: linear-gradient(rgba(0, 0, 0, 0), #fff, #eee);
}

@font-face {
    font-family: 'phenomena';
    src: url('../fonts/phenomena-regular-webfont.eot');
    src: url('../fonts/phenomena-regular-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/phenomena-regular-webfont.woff2') format('woff2'),
    url('../fonts/phenomena-regular-webfont.woff') format('woff'),
    url('../fonts/phenomena-regular-webfont.ttf') format('truetype'),
    url('../fonts/phenomena-regular-webfont.svg#robotocondensed') format('svg');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'Roboto';
    font-size: 16px;
    background: var(--muscle-white);
    color: var(--muscle-text-color);
}

.ui-widget *:not(i) {
    font-family: 'Roboto';
    font-size: 16px;
}

.widget.login .dropdown-toggle,
.nav nav .nav-link,
.widget-header,
h1,
h2,
h3 {
    font-family: 'phenomena';
    font-size: 2em;
    font-weight: bold;
}

header {
    background: url(../images/banner.jpg);
    background-position: top 3em center;
    background-repeat: no-repeat;
    background-size: contain;
}

.widget.justify-content-end * {
    justify-content: flex-end;
    text-align: right;
}

.widget.justify-content-start * {
    justify-content: flex-start;
    text-align: left;
}

.widget.justify-content-center * {
    justify-content: center;
}

.login .dropdown {
    display: flex;
}

.menu_buttons .nav-link,
.menu_buttons .nav-link:hover {
    color: var(--muscle-black) !important;
}

.login .dropdown-toggle,
.login .dropdown-menu {
    background: var(--muscle-red);
    color: var(--muscle-white);
}

.ui-state-active,
button.btn:active,
button.btn:focus,
button.btn:hover,
input[type="submit"].btn:active,
input[type="submit"].btn:focus,
input[type="submit"].btn:hover,
a:active,
a:focus,
a:hover,
a.btn:active,
a.btn:focus,
a.btn:hover,
a.card-link:active,
a.card-link:focus,
a.card-link:hover,
button.card-link:active,
button.card-link:focus,
button.card-link:hover {
    opacity: 0.8;
    text-decoration: underline;
}

.btn-sm,
col-form-label-sm,
.form-control-sm {
    font-size: 1em;
}

.rech_simple.widget form div {
    padding: 0;
    margin: 0;
}

.rech_simple.widget input,
.rech_simple.widget select,
.rech_simple.widget button {
    background-color: var(--muscle-white);
    line-height: 1em;
    color: var(--muscle-black);
    vertical-align: middle;
    margin: 0;
    padding: 5px;
    height: 40px;
    min-width: 50px;
    font-size: 1.5em;
}

.rech_simple.widget button[type='submit'] {
    background-color: var(--muscle-red);
    color: var(--muscle-white);
}

.rech_simple.widget ::placeholder {
    color: var(--muscle-grey);
}

.widget.card,
.widget-header,
.breadcrumb,
nav {
    background: var(--muscle-white);
}

.nav nav .nav-link {
    color: var(--muscle-black);
    background: var(--muscle-transparent);
    font-size: 1.8em;
    border-right: 1px solid var(--muscle-black) !important;
    line-height: 0.8em;
}

nav .nav-item:last-child .nav-link {
    border-right: 0px !important;
}

.widget.nav {
    margin-top: 4em;
}

.widget.nav .navbar-toggler {
    margin-top: -4em;
}

#site_web_wrapper {
    box-shadow: var(--muscle-grey) 0px 0px 5px;
}

body,
#site_web_wrapper {
    background: var(--muscle-white);
}

footer {
    font-size: 0.875em;
}

footer .nav-link {
    color: var(--muscle-red);
    background: var(--muscle-transparent);
    border-right: 1px solid var(--muscle-red) !important;
    line-height: 0.8em;
    text-align: center;
}

.nav-item:last-child .nav-link {
    border-right-width: 0 !important;
}

.ui-autocomplete,
.ui-autocomplete *,
.ui-autocomplete *:hover {
    border: none !important;
    background: var(--muscle-white) !important;
    color: var(--muscle-black) !important;
}

.widget.login * {
    color: var(--muscle-white);
}

.widget.login input {
    color: var(--muscle-black);
}

.widget.login form,
.widget.login form * {
    text-align: left;
    justify-content: flex-start;
}

.widget.login .text-secondary {
    color: var(--muscle-white) !important;
}

.widget.login .dropdown-toggle {
    font-size: 20px;
    margin-right: 0;
}

.widget.login .btn-primary {
    background: var(--muscle-black);
    color: var(--muscle-white) !important;
    padding: 5px 15px;
}

.widget.login a {
    font-weight: bold;
}

.widget.login form {
    max-width: 200px;
}

.widget-footer a.btn-secondary {
    color: var(--muscle-red) !important;
    background: var(--muscle-transparent);
}

.widget-footer {
    text-align: right;
}

.badge-group .badge {
    color: var(--muscle-white) !important;
    background: var(--muscle-grey) !important;
}

.badge-group a.badge {
    background: var(--muscle-badge) !important;
}

a,
a:hover {
    color: var(--muscle-black);
}

a.text-primary,
a.text-primary:hover {
    color: var(--muscle-black) !important;
    background: var(--muscle-transparent) !important;
}

.carousel-item .card-footer {
    margin: 0 1rem;
}

.widget > .card-footer,
.card-footer {
    background: transparent;
}

.masonry-content > .card > .card-footer {
    padding: 5px;
    background: var(--front-card-footer-background);
}

.list-group-item.active,
.nav-tabs,
.border-primary {
    border-color: var(--muscle-red) !important;
}

.nav-tabs .nav-item {
    border-bottom: 1px solid transparent;
}

.card-footer {
    border-top: none;
}