body {
    font-family: 'Raleway', sans-serif;
}

.main-section {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: url('/banner.jpg') center no-repeat;
    background-size: cover;
    height: 100%;
    width: 100%;
}

.main-content {
    margin-top: -4rem;
    width: 100% !important;
    height: 100vh !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.main-start {
    position: absolute;
    margin: 0 auto;
    top: 70%;
    text-transform: uppercase;
    font-weight: 600;
    padding: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    background: #fff;
    border: 2px solid #fff;
    color: #424242;
    border-radius: 5px;
    margin-bottom: 1rem;
    transition: all .3s ease;
}

.main-start:focus {
    position: absolute;
    margin: 0 auto;
    top: 70%;
    text-transform: uppercase;
    font-weight: 600;
    padding: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    background: #fff;
    border: 2px solid #fff;
    color: #424242;
    border-radius: 5px;
    margin-bottom: 1rem;
    transition: all .3s ease;
}

.credit {
    position: absolute;
    bottom: 35px;
    color: #ccc;
    margin: 0 auto;
}

.credit-2 {
    padding-top: 2rem;
    padding-bottom: 3rem;
    color: #ccc;
    margin: 0 auto;
}

.main-start:hover {
    position: absolute;
    margin: 0 auto;
    top: 70%;
    text-transform: uppercase;
    font-weight: 600;
    padding: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    background: transparent;
    border: 2px solid #fff;
    color: #fff;
    border-radius: 5px;
    margin-bottom: 1rem;
    transition: all .3s ease;
}

.main-links {
    text-align: center;
    width: 85%;
}

.link-icons {
    text-transform: uppercase;
    font-weight: 600;
    padding: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    background: transparent;
    border: 2px solid #424242;
    color: #424242;
    margin-bottom: 1rem;
}

.link-space {
    margin-bottom: 3rem;
}

.teams {
    background: url('/images/teams.jpg') center no-repeat;
    background-size: cover;
    width: 100%;
    height: 25%;
    padding: 3.5rem;
}

.fixtures {
    background: url('/images/fixtures.jpg') center no-repeat;
    background-size: cover;
    width: 100%;
    height: 25%;
    padding: 3.5rem;
}

.schedules {
    background: url('/images/schedule.jpg') center no-repeat;
    background-size: cover;
    width: 100%;
    height: 25%;
    padding: 3.5rem;
}

.policy {
    background: url('/images/policy.jpg') center no-repeat;
    background-size: cover;
    width: 100%;
    height: 25%;
    padding: 3.5rem;
}

.btn-teams {
    text-transform: uppercase;
    font-weight: 600;
    padding: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    background: #fff;
    border: 2px solid #fff;
    color: #424242;
    border-radius: 60px;
    margin-bottom: 1rem;
    transition: all .3s ease;
}

.btn-teams:hover {
    text-transform: uppercase;
    font-weight: 600;
    padding: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    background: transparent;
    border: 2px solid #fff;
    color: #fff;
    border-radius: 60px;
    margin-bottom: 1rem;
    transition: all .3s ease;
}

.btn-teams:focus {
    text-transform: uppercase;
    font-weight: 600;
    padding: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    background: #fff;
    border: 2px solid #fff;
    color: #424242;
    border-radius: 60px;
    margin-bottom: 1rem;
    transition: all .3s ease;
}

.title {
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
}

.exp {
    margin-bottom: 3rem;
    color: #fff;
}

.back {
    position: fixed;
    right: 35px;
    bottom: 35px;
    background: #424242;
    padding: 1.3rem;
    text-align: center;
    border-radius: 5px;
    color: #fff;
    box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.3);
}

.team-bg {
    background: url('/images/teams.jpg') center no-repeat;
    background-size: cover;
}

.fixtures-bg {
    background: url('/images/fixtures.jpg') center no-repeat;
    background-size: cover;
}

.team-name {
    font-weight: 600;
}

.btn-teams-1 {
    text-transform: uppercase;
    font-weight: 600;
    padding: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    background: #424242;
    border: 2px solid #424224;
    color: #fff;
    border-radius: 60px;
    margin-bottom: 1rem;
    transition: all .3s ease;
}

.btn-teams-1:hover {
    text-transform: uppercase;
    font-weight: 600;
    padding: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    background: #525252;
    border: 2px solid #525252;
    color: #fff;
    border-radius: 60px;
    margin-bottom: 1rem;
    transition: all .3s ease;
}

.btn-teams-1:focus {
    text-transform: uppercase;
    font-weight: 600;
    padding: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    background: #424242;
    border: 2px solid #424224;
    color: #fff;
    border-radius: 60px;
    margin-bottom: 1rem;
    transition: all .3s ease;
}

.team-bg-uhfc {
    background: url('/images/uhfc.jpg') center no-repeat;
    background-size: cover;
}

.team-image {
    width: 50px;
    height: 50px;
    border-radius: 100px;
}

.player-name {
    font-weight: 600;
    text-transform: uppercase;
}

.cm {
    background: #673AB7;
    width: 50px;
    height: 50px;
    padding: 13px;
    color: #fff;
    border-radius: 5px;
}

.st {
    background: #F44336;
    width: 50px;
    height: 50px;
    padding: 13px;
    color: #fff;
    border-radius: 5px;
}

.lw {
    background: #009688;
    width: 50px;
    height: 50px;
    padding: 13px;
    color: #fff;
    border-radius: 5px;
}

.rw {
    background: #E65100;
    width: 50px;
    height: 50px;
    padding: 13px;
    color: #fff;
    border-radius: 5px;
}

.rm {
    background: #607D8B;
    width: 50px;
    height: 50px;
    padding: 13px;
    color: #fff;
    border-radius: 5px;
}

.lm {
    background: #33691E;
    width: 50px;
    height: 50px;
    padding: 13px;
    color: #fff;
    border-radius: 5px;
}

.cb {
    background: #006064;
    width: 50px;
    height: 50px;
    padding: 13px;
    color: #fff;
    border-radius: 5px;
}

.rb {
    background: #880E4F;
    width: 50px;
    height: 50px;
    padding: 13px;
    color: #fff;
    border-radius: 5px;
}

.lb {
    background: #2196F3;
    width: 50px;
    height: 50px;
    padding: 13px;
    color: #fff;
    border-radius: 5px;
}

.gk {
    background: #4A148C;
    width: 50px;
    height: 50px;
    padding: 13px;
    color: #fff;
    border-radius: 5px;
}

.number-jersey {
    background: #424242;
    width: 50px;
    height: 50px;
    padding: 13px;
    color: #fff;
    border-radius: 5px;
    text-align: center;
}