/* slide */

.slide {
    animation-duration: 1.0s;
    -webkit-animation-duration: 1.0s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    visibility: visible !important;
}
.slideLeft {
    animation-name: slideLeft;
    -webkit-animation-name: slideLeft;
}
.slideRight { 
    animation-name: slideRight;
    -webkit-animation-name: slideRight;
}
.slideLeftOut {
    animation-name: slideLeftOut;
    -webkit-animation-name: slideLeftOut;
}
.slideRightOut {
    animation-name: slideRightOut;
    -webkit-animation-name: slideRightOut;
}
@keyframes slideLeft {
    0% {
        transform: translateX(150%);
    }
    75% {
        transform: translateX(-4%);
    }
    100% {
        transform: translateX(0%);
    }
}
@-webkit-keyframes slideLeft {
    0% {
        transform: translateX(150%);
    }
    75% {
        transform: translateX(-4%);
    }
    100% {
        transform: translateX(0%);
    }
}
@keyframes slideRight {
    0% {
        transform: translateX(-150%);
    }
    75% {
        transform: translateX(4%);
    }
    100% {
        transform: translateX(0%);
    }
}
@-webkit-keyframes slideRight {
    0% {
        transform: translateX(-150%);
    }
    75% {
        transform: translateX(4%);
    }
    100% {
        transform: translateX(0%);
    }
}
@keyframes slideLeftOut {
    0% {
        transform: translateX(0%);
    }
    25% {
        transform: translateX(4%);
    }
    100% {
        transform: translateX(-150%);
    }
}
@-webkit-keyframes slideLeftOut {
    0% {
        transform: translateX(0%);
    }
    25% {
        transform: translateX(4%);
    }
    100% {
        transform: translateX(-150%);
    }
}
@keyframes slideRightOut {
    0% {
        transform: translateX(0%);
    }
    25% {
        transform: translateX(-4%);
    }
    100% {
        transform: translateX(150%);
    }
}
@-webkit-keyframes slideRightOut {
    0% {
        transform: translateX(0%);
    }
    25% {
        transform: translateX(-4%);
    }
    100% {
        transform: translateX(150%);
    }
}
/* slide end */

body {
    font-family: sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 1.428571429;
    color: #2d2f33;
}
#bg {
    background-image: radial-gradient(farthest-side ellipse at 0 0, rgba(255, 255, 255, 0.33), rgba(50, 147, 255, 0.87) 40%, rgb(98, 255, 197) 170%);
    background-color: black;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -10000;
}
body.nav-expanded .wrap {
    -webkit-filter: blur(4px);
    -moz-filter: blur(4px);
    -o-filter: blur(4px);
    -ms-filter: blur(4px);
}
body.nav-expanded .nav-expander .fa-bars {
    vertical-align: -1px;
}
body.nav-expanded .nav-expander .fa-bars:before {
    content: "\f00d";
}
a:focus,
a:hover {
    text-decoration: none;
}
a {
    cursor: pointer;
}
.wrap {
    margin-top: 50px;
    -webkit-transition: 0.2s -webkit-filter linear;
    -moz-transition: 0.2s -moz-filter linear;
    -o-transition: 0.2s -o-filter linear;
}
.no-padding {
    padding-right: 0;
    padding-left: 0;
}
.square-box {
    position: relative;
    width: 20%;
    overflow: hidden;
    display: block;
    float: left;
    transition: opacity 1s;
}
.square-box:before {
    content: "";
    display: block;
    padding-top: 100%;
}
.square-content,
.square-content .bg {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.square-content i,
.square-content,
.square-content .bg {
    color: white;
}
.square-content {
    display: flex;
}
.square-content .bg {
    background-size: cover;
    background-position-x: 50%;
    z-index: 5;
    opacity: 0.4;
    transition: opacity 0.75s;
}
.square-box:nth-child(1) .square-content .bg {
    background-color: #C72D9E;
}
.square-box:nth-child(2) .square-content .bg {
    background-color: #1AAD93;
}
.square-box:nth-child(3) .square-content .bg {
    background-color: #137AC8;
}
.square-box:nth-child(4) .square-content .bg {
    background-color: #C72D9E;
}
.square-box:nth-child(5) .square-content .bg {
    background-color: #1AAD93;
}
.square-box:nth-child(6) .square-content .bg {
    background-color: #137AC8;
}
.square-box:nth-child(7) .square-content .bg {
    background-color: #C72D9E;
}
.square-box:nth-child(8) .square-content .bg {
    background-color: #1AAD93;
}
.square-box:nth-child(9) .square-content .bg {
    background-color: #137AC8;
}
.square-box:nth-child(10) .square-content .bg {
    background-color: #C72D9E;
}
.square-box:nth-child(11) .square-content .bg {
    background-color: #1AAD93;
}
.square-box:nth-child(12) .square-content .bg {
    background-color: #137AC8;
}
.square-box:hover .square-content .bg {
    opacity: 1;
    transition: opacity 0.25s;
}
.square-box:hover span {
    transform: scale(1.1);
}
.square-content span {
    align-self: center;
    margin: auto;
    transition: 0.2s;
    z-index: 10;
}
.square-content i,
.square-content h1 {
    text-shadow: 0px 0px 10px black;
}
.square-content > span > i {
    font-size: 4em;
}
.square-content h1 {
    font-weight: 100;
    font-size: 1.4em;
    margin: 0.5em 0 0 0;
}
.table {
    background-color: rgba(255, 255, 255, 0.7);
    margin-bottom: 80px;
}
.table.table-calendar {
    background-color: rgba(255, 255, 255, 0.9);
    margin-top: 5px;
}
.table-striped>tbody>tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.4);
}
.table>tbody+tbody {
    border-top: none;
}
.head-wrap,
.date-picker.previous,
.date-picker.next {
    background-color: rgb(26, 173, 147);
    color: white;
    font-weight: 200;
}
.head-wrap-fixed {
	position: fixed;
    left: 0
    /*4em*/
    ;
    right: 0
    /*4em*/
    ;
    height: 4em;
	overflow: auto;
    white-space: nowrap;
    margin-top: 0px;
    z-index: 10;
}
.head-wrap-fixed .pagination {
	padding-top: 8px;
}
.head-wrap-fixed .pagination .active a
{
	padding: 10px 10px 10px 10px;
}
.head-wrap h1 {
    font-size: 12px;
    padding: 10px;
    margin: 0;
    font-weight: 200;
    text-align: center;
}
.head-wrap h1 span {
    white-space: nowrap;
}
.head-wrap.big {
    height: 4em;
    padding: 9px;
}
.head-wrap.empty + .content-wrap {
    margin-top: 0px;
}
.content-wrap {
    z-index: 0;
}
.content-wrap-fixed-head-wrap {
    margin-top: 0px;
	padding-top: 48px !important;
}
.map {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 98px;
}
.padding-sm {
    padding-left: 5px;
    padding-right: 5px;
}
.floating-btn {
    position: fixed;
    bottom: 20px;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.6);
    border: none;
    color: white;
}
.floating-btn:hover,
.floating-btn:active,
.floating-btn:focus,
.floating-btn:visited,
.floating-btn:active:hover,
.floating-btn:active:focus {
    background-color: rgba(0, 0, 0, 0.6);
    border: none;
    color: white;
}
.floating-btn.back {
    left: 20px;
}
.floating-btn.filter {
    right: 20px;
}
.floating-btn.game-day {
    right: 20px;
    padding-left: 8px;
    border-top-right-radius: 0.75em;
    border-bottom-right-radius: 0.75em;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.floating-btn.game-location {
    right: 76px;
    border-radius: 0;
}
.floating-btn.game-status {
    right: 132px;
    padding-right: 4px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: 0.75em;
    border-bottom-left-radius: 0.75em;
}
.floating-btn.game-day,
.floating-btn.game-location,
.floating-btn.game-status {
    width: 1.5em;
    height: 1.5em;
    font-size: 3em;
    line-height: 1.2em;
}
.btn-group-sm>.btn,
.btn-sm,
.btn,
.form-control,
.modal-content {
    /*border-radius: 0;*/
}
.modal-content {
    background: #2d2f33;
}
.modal-header .close {
    color: white;
    opacity: 1;
}
.modal-footer,
.modal-header {
    border-color: #323949;
}
.modal-title {
    color: white;
}
.modal label {
    color: white;
    font-size: 1.3em;
}
.table>thead {
    background-color: #13826E;
    color: white;
}
.table>thead>tr>th {
    font-weight: 200;
    border-bottom: 0;
}
th a,
th a:hover,
th a:focus {
    color: white;
    font-weight: bold;
}
th select {
    color: white;
    background-color: #13826E;
    border: none;
    font-weight: bold;
}
.table>tbody>tr>td {
    border-top: 0;
    font-size: 1.3em;
    vertical-align: middle;
}
.table-truncated {
    white-space: nowrap;
    table-layout: fixed;
}
.table-truncated td:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
}
.col-1pc {
    width: 1%;
}
.col-1px {
    width: 1px;
}
.col-11pc {
    width: 11%;
}
.gold {
    color: #E4C000;
}
.silver {
    color: #CACACA;
}
.bronze {
    color: #C57000;
}
/*li.gold a {
    background-color: #E4C000;
    color:white;
}
li.silver a {
    background-color: #CACACA;
    color:white;
}
li.bronze a {
    background-color: #C57000;
    color:white;
}*/
.pagination {
    margin: 0;
}
.pagination>li>a {
    border:none;
    font-weight: bold;
}
.flag {
    width: 28px;
    height: 18px;
    display: inline-block;
    margin-bottom: 4px;
    background-size: 100%;
    float: left;
    margin-right: 5px;
    margin-top: -2px;
}
.flag > img {
    width: 28px;
    height: 18px;
}
.flag.athlete {
    margin-bottom: 0;
    display: block;
}
.name {
    float: left;
}
.list-header {
    font-size: 1.3em;
}
.no-margin {
    margin: 0;
}
.ellipsis {
    overflow: hidden;
    display: block;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.center-list-content {
    display: flex;
    align-items: center;
    position: relative;
}
.list-link {
    margin-right: 20px;
    min-height: 55px;
}
.list-link .fa-angle-right,
.more {
    position: absolute;
    right: -16px;
    font-size: 2em!important;
    top: 50%;
    margin-top: -0.5em;
    opacity: 0.5;
}
.more {
    right: 8px;
}
.vote-avatar {
    font-size: 7em;
    background: #828282;
    border-radius: 1em;
    width: 1.7em;
    height: 1.7em;
    display: inline-block;
    overflow: hidden;
    margin: 15px;
}
.vote-avatar .fa-user {
    font-size: 1.7em;
    margin-top: 0.1em;
    color:#DFF0D8;
}
.votepage h4 {
    margin: 45px 0;
}
.form-group-lg .form-control.message-for-vote {
    margin-bottom: 10px;
    font-size: 14px;
    padding: 5px;
    height: 85px
}
#white-bg {
    background-color: white;
    position: fixed;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    z-index: -10;
}
.date-picker.active {
    box-shadow: 0 0px 10px rgba(0, 0, 0, 0.5);
    background-color: #5FC5B3;
    transform: scale(1.15);
    height: 3.75em;
}
.date-picker.inactive {
    opacity: 0.4;
    cursor: auto !important;
}
.date-picker {
    width: 4em;
    height: 4em;
    display: inline-block;
    color: white;
    text-align: center;
}
.date-picker:hover,
.date-picker:focus {
    text-decoration: none;
    color: white;
}
.date-picker .date {
    font-size: 1.7em;
}
.date-picker.previous,
.date-picker.next {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.2)
}
.date-picker.previous {
    left: 0;
    margin-top: -9px;
}
.date-picker.next {
    right: 0;
    margin-top: -9px;
}
.date-picker.previous i,
.date-picker.next i {
    font-size: 3em;
    margin: auto;
    line-height: 1.3em;
}
.date-picker-slider {
    position: fixed;
    left: 0
    /*4em*/
    ;
    right: 0
    /*4em*/
    ;
    height: 4em;
    overflow-x: auto;
    white-space: nowrap;
    margin-top: -9px;
    z-index: 10;
    background-color: rgb(26, 172, 146);
    box-shadow: 0 0 20px black;
	overflow-y: hidden;
}
.avatar {
    width: 100%;
	width: 85px;
	height: 85px;
	object-fit: contain;
	object-position: center center;
}
.fa.avatar {
    font-size: 3.5em;
}
.vertical {
    background-color: rgba(0, 0, 0, 0.2);
    height: 1px;
    width: 100%;
}
td.vertical-align {
    vertical-align: middle!important;
}
td > span {
    white-space: nowrap;
}
.hour {
    color: rgba(0, 0, 0, 0.5);
}
.event a {
    display: block;
    background-color: rgb(210, 239, 253);
    border-left: 2px solid rgb(42, 174, 245);
    color: rgb(43, 119, 173);
    padding: 10px;
    padding-right: 20px;
    position: relative;
}
.event {
    margin-bottom: 10px;
}
.event.obsolete a {
    background-color: rgb(223, 232, 236);
    border-color: rgb(188, 195, 201);
    color: rgba(0, 0, 0, 0.3);
}
.event.obsolete .flag {
    opacity: 0.3;
}
.event:last-child,
p.participants {
    margin-bottom: 0;
}
p.sport {
    font-size: 1.3em;
    margin-bottom: 0;
}
p.sport span {
    white-space: nowrap;
}
p.clock,
p.location {
    margin-bottom: 5px;
}
/* slide menu */

.main-menu-logo {
    width: 90%;
    margin-left: 5%;
}
.navbar {
    background-color: #252525;
    box-shadow: 0 0 20px black;
    display: flex;
}
	.navbar h1 {
		color: white;
		margin: 0;
		font-size: 1.25em;
		line-height: 1.5em;
		align-self: center;
		margin: auto;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		/*margin-left: 212px;
		margin-right: 70px;*/
	}
.navbar-brand {
    padding: 4px 3px;
    position: absolute;
}
.navbar-brand img {
    height: 40px;
}
a.nav-expander:before {
    content: "";
    display: block;
    width: 1px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    background-color: #323949;
}
a.nav-expander {
    background: none;
    color: #007ad1;
    display: block;
    font-size: 15px;
    font-weight: 400;
    height: 50px;
    margin-right: 0;
    padding: 1em 1.6em 2em;
    position: absolute;
    right: 0;
    text-decoration: none;
    text-transform: uppercase;
    top: 0;
    transition: right 0.3s ease-in-out 0s;
    z-index: 12;
    transition: right 0.3s ease-in-out 0s;
    -webkit-transition: right 0.3s ease-in-out 0s;
    -moz-transition: right 0.3s ease-in-out 0s;
    -o-transition: right 0.3s ease-in-out 0s;
}
a.nav-expander:hover {
    cursor: pointer;
}
a.nav-expander.fixed {
    position: fixed;
}
.nav-expanded a.nav-expander.fixed {
    right: 0;
}
nav {
    background: #2d2f33;
    display: block;
    height: 100%;
    overflow: auto;
    position: fixed;
    right: -17em;
    font-size: 15px;
    top: 50px;
    width: 17em;
    z-index: 20;
    transition: right 0.3s ease-in-out 0s;
    -webkit-transition: right 0.3s ease-in-out 0s;
    -moz-transition: right 0.3s ease-in-out 0s;
    -o-transition: right 0.3s ease-in-out 0s;
    opacity: 0.9;
}
.nav-expanded nav {
    right: 0;
}
body.nav-expanded {
    margin-left: 0em;
    transition: right 0.4s ease-in-out 0s;
    -webkit-transition: right 0.4s ease-in-out 0s;
    -moz-transition: right 0.4s ease-in-out 0s;
    -o-transition: right 0.4s ease-in-out 0s;
}
#nav-close {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 300;
    font-size: 24px;
    padding-right: 10px;
}
.main-menu {
    padding-bottom: 50px;
}
.main-menu li.credit {
    font-size: 0.7em;
    text-align: center;
}
.main-menu li.credit small {
    opacity: 0.5;
}
h2 small {
    color: inherit;
}
.main-menu li.credit img {
    width: 74px;
}
.main-menu li {
    border-bottom: 1px solid #323949;
    margin-left: 20px;
    font-size: 18px;
}
.main-menu li a {
    color: white;
    text-decoration: none;
    display: block;
    padding: 12px;
}
.main-menu li a:hover {
    color: #FFFFFF;
    text-decoration: none;
}
.main-menu li .sub-nav {
    border-bottom: 0px;
    padding: 4px;
}
.main-menu a .caret {
    width: 0;
    height: 0;
    display: inline-block;
    vertical-align: top;
    border-top: 4px solid #4f5963;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    content: "";
    margin-top: 8px;
}
.main-menu a:hover .caret {
    border-top-color: #4f5963;
}
.main-menu li.open > a > .caret {
    border-top: none;
    border-bottom: 4px solid #4f5963;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}
.main-menu li.open > a:hover > .caret {
    border-bottom-color: #4f5963;
}
.icon:before {
    font-family: 'FontAwesome';
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 1;
    text-transform: none;
    content: '\f105';
}
.main-menu li > a > span.icon {
    float: right;
    margin: 0.1em 1.7em -0.1em 0;
    opacity: 0;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.main-menu li > a:hover > span.icon {
    float: right;
    margin: 0.1em 0.8em -0.1em 0;
    opacity: 1;
}
/* slide menu end */

/* Partials start */

.locationlist-anchor{
	margin-right: 3px !important;
    font-size: 15px;
}

.locationmap-anchor{
	margin-left: 3px !important;
    font-size: 15px;
}

.has-error {
	color: red;
}

.system-message {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    outline: 0;
    display: flex;
    align-items: center;
    z-index: -10;
}
.system-message p {
    margin: auto;
    font-size: 1.5em;
    opacity: 0.5;
}
/* Partials end */

@media (max-width: 75em) {
    .square-box {
        width: 25%;
    }
    .navbar h1 {
        max-width: 860px;
    }
}
@media (max-width: 62em) {
    .square-box {
        width: 25%;
    }
    .navbar h1 {
        max-width: 630px;
    }
}
@media (max-width: 48em) {
    .square-box {
        width: 33.333333333%;
    }
    .navbar h1 {
        max-width: 400px;
    }
}
@media (max-width: 34em) {
    .square-box {
        width: 50%;
    }
    .navbar h1 {
        max-width: 250px;
    }
}
@media (max-width: 24em) {
    .navbar h1 {
        max-width: 190px;
    }
}