@charset "utf-8";
/**
*
* -----------------------------------------------------------------------------
*
* Template : Khelo | Sports HTML Template
* Author : rs-theme
* Author URI : http://www.rstheme.com/
*
* -----------------------------------------------------------------------------
*
**/
/* Table Of Content
---------------------------------------------------------
01. General CSS
02. Common CSS
03. Header Section CSS
04. Slider Section CSS
05. Banner Section CSS
06. Breadcrumbs Section CSS
07. Board Managment Section CSS
08. Upcoming Match Section CSS
09. Countdown Section CSS
10. About Section CSS
11. Tab Section CSS
12. Video Section CSS
13. Result Section CSS
14. Today Match Teams Section CSS
15. Latest News Section CSS
16. Contact Section CSS
17. Point Table Section CSS
18. Team Section CSS
19. Single Team Section CSS
20. Breaking News Section CSS
21. Counter Section CSS
22. Gallery Section CSS
23. Champion Award Section CSS
24. Top Products Section CSS
25. Cart Section
26. Checkout Section CSS
27. My Account Section CSS
28. Our Poll Section CSS
29. Match Fixture Section CSS
30. Subscribe Section CSS
31. Sponsor Logo Section CSS
32. Sponsor Logo Inner Section CSS
33. Single Club Section CSS
34. Footer Section CSS
35. Error Section CSS
36. ScrollUp Section CSS
37. Preloader CSS
--------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css?family=Fira+Sans:400,500,600,700,800,900&display=swap');

@title-font: Fira sans;
@body-font: Fira sans;
@transition: all 0.3s ease 0s;
@primary-color: #fa2d2d;
@secondary-color: #001bdd;
@hover-color: #101010;
@title-color: #111111;
@white-color: #ffffff;
@body-color: #555555;
@gray-color: #eff4fd;
@global-color: #003701;
@global-color-sec:#006a09;
@sec-color: #eff4fd;
@sec-color2: #f9f9f9;
@border-color: #f6f5f5;
@inverted-color: #ffc8fe;

/* -----------------------------------
01. General CSS
-------------------------------------*/
html,
body {
font-size: 15px;
color: @body-color;
font-family: @body-font;
vertical-align: baseline;
font-weight: 400;
overflow-x:hidden;
line-height: 26px;
}
img {
max-width: 100%;
height: auto;
}
p {
margin: 0 0 26px;
line-height: 1.8;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: @title-font;
color: @title-color;
margin: 0 0 26px;
}
h1 {
font-size: 45px;
line-height: 45px;
font-weight: 700;
}
h2 {
font-size: 36px;
line-height: 36px;
font-weight: 700;
}
h3 {
font-size: 25px;
line-height: 30px;
font-weight: 600;
}
h4 {
font-size: 22px;
line-height: 28px;
font-weight: 600;
}
h5 {
font-size: 19px;
line-height: 25px;
font-weight: 600;
}
h6 {
font-size: 17px;
line-height: 20px;
font-weight: 600;
}
a {
color: @primary-color;
transition: @transition;
text-decoration: none !important;
outline: none !important;
}
a:active,
a:hover {
text-decoration: none;
outline: 0 none;
color: @secondary-color;
}
ul {
list-style: outside none none;
margin: 0;
padding: 0;
}

/* -----------------------------------
02. Common CSS
-------------------------------------*/
.clear {
clear: both;
}
.versase {
font-size: 25px;
font-weight: 500;
color: @primary-color;
}
.z-index-0 {
z-index: 0 !important;
}
.primary-color {
color: @primary-color;
}
.title-color {
color: @title-color;
}
.text-center {
text-align: center;
}
.margin-center {
margin: 0 auto;
}
.overflow-hidden {
overflow: hidden;
}
.no-background {
background-color: unset !important;
}
.no-border {
border: none !important;
}
.relative {
position: relative !important;
}
.normal-font-weight {
font-weight: 400 !important;
}
.medium {
font-weight: 500 !important;
}
.semi-bold {
font-weight: 600 !important;
}
.bold {
font-weight: 700 !important;
}
.uppercase {
text-transform: uppercase;
}
.capitalize {
text-transform: capitalize;
}
.bs-none {
box-shadow: none !important;
}
.no-bg {
background: none !important;
}
.lh-1 {
line-height: 1 !important;
}
.container-fluid {
padding: 0 100px;
}
.sec-color{
color: @sec-color !important;
}
.sec-bg {
background-color: @sec-color !important;
}
.sec-bg2 {
background-color: @sec-color2 !important;
}
.radius-0 {
border-radius: unset !important;
}
.gray-color{
color: @sec-color !important;
}
.dark-gray-color{
color: #dddddd;
}
.gray-bg {
background-color: @gray-color !important;
}
.white-color{
color: @white-color!important;
}
.secondary-color{
color: @secondary-color!important;
}
.white-bg{
background-color: @white-color !important;
}
.primary-color {
color: @primary-color !important;
}
.black-color {
color: #000;
}
.primary-bg {
background: @primary-color !important;
}
.secondary-bg {
background: @secondary-color !important;
}
.bg-fixed {
background-attachment: fixed;
background-repeat: no-repeat;
}

.cabeceraTabla {
color: @inverted-color !important;
}

/* Background Images */
.bg1 {
background-image: url(https://via.placeholder.com/350x460.png);
background-size: cover;
}
.bg2 {
background-image: url(images/background/video1-bg.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.bg3 {
/*background-image: url(https://via.placeholder.com/430x610.png);*/
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: @global-color;
}
.bg4 {
background-image: url(images/background/about-home-bg.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.bg5 {
/*background-image: url(https://via.placeholder.com/1920x322.png);*/
background-color: @global-color-sec;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.bg6 {
background-image: url(images/background/award-bg.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.bg7 {
background-image: url(https://via.placeholder.com/1340x200.png);
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
}
.bg8 {
background-image: url(images/background/result-bg2.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.bg9 {
background-image: url(images/background/video2-bg.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.bg10 {
background-image: url(images/background/home3-about.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.bg11 {
/*background-image: url(https://via.placeholder.com/1920x739.png);*/
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: @global-color;
}
.bg12 {
background-image: url(images/background/result-bg3.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.bg13 {
background-image: url(images/background/team-bg-dark.jpg);
background-repeat: no-repeat;
background-size: cover;
}
.shape-bg {
background: url(images/shape.png);
background-repeat: no-repeat;
background-size: 100%;
}
.title-style {
h2 {
font-size: 30px;
line-height: 40px;
letter-spacing: 2px;
}
h3 {
font-size: 22px;
line-height: 28px;
}
.sub-title {
font-size: 18px;
line-height: 26px;
font-weight: 600;
}
.line-bg {
position: relative;
width: 150px;
display: block;
margin: 0 auto;
&:before,
&:after {
position: absolute;
content: '';
width: 75px;
bottom: 0;
height: 3px;
}
&:after {
left: 0;
border-radius: 0 0 0 10px;
}
&:before {
right: 0;
border-radius: 0 10px 0 0;
}
&.y-w {
&:after {
background: @primary-color;
}
&:before {
background: @white-color;
}
}
&.y-b {
&:after {
background: @primary-color;
}
&:before {
background: @secondary-color;
}
}
&.left-line {
margin: 0;
}
}
.sub-title {
font-size: 18px;
text-transform: capitalize;
margin-top: 9px;
}
&.bracket {
.title {
font-weight: 500;
letter-spacing: normal;
&:after,
&:before {
color: @primary-color;
}
&:before {
content: "[";
padding-right: 6px;
}
&:after {
content: "]";
padding-left: 6px;
}
}
}
.desc {
&.custom {
margin: 0 auto;
max-width: 631px;
}
}
}
.box-shadow {
box-shadow: 0px 14px 30px rgba(0, 0, 0, 0.07);
border-radius: 7px;
}
.max-750 {
max-width: 750px;
margin: 0 auto;
}
.bdru-4 {
border-radius: 4px;
}
.readon {
background-image: linear-gradient(to right,@primary-color 0%,#ea950b 51%,@primary-color 100%);
color: @title-color;
border: none;
padding: 15px 35px 13px;
display: inline-block;
position: relative;
text-align: center;
font-size: 16px;
font-weight: 500;
border-radius: 4px;
text-transform: uppercase;
background-size: 200% auto;
outline: none;
box-shadow: unset;
cursor: pointer;
transition: @transition;
&.big-btn {
font-size: 18px;
}
&.big-btn2 {
font-size: 20px;
}
&.solid {
background: @primary-color;
padding: 11px 24px;
font-size: 15px;
&:hover {
background: darken(@primary-color, 10%);
}
}
&:active,
&:focus,
&:visited {
outline: none;
box-shadow: unset;
}
&:hover {
background-position: right center;
color: @title-color;
}
}

.rs-vertical-bottom {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: flex-end;
-webkit-align-items: flex-end;
align-items: flex-end;
}

.rs-vertical-middle {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
::-moz-selection {
background: @primary-color;
text-shadow: none;
color: #ffffff;
}
::selection {
background: @primary-color;
text-shadow: none;
color: #ffffff;
}
.align-center {
align-items: center;
}
.dot-none {
.owl-controls {
.owl-dots {
display: none !important;
}
}
}
.nav-none {
.owl-controls {
.owl-nav {
display: none !important;
}
}
}
ul.offcanvas-icon {
padding: 0;
list-style: none;
li {
span {
background: @white-color;
height: 2px;
width: 20px;
display: block !important;
margin: 0 0 4px 0 !important;
border-radius: 30px;
transition: @transition;
cursor: pointer;
list-style: none;
&:last-child {
margin: 0 !important;
}
}
}
&:hover {
li {
span {
&:nth-child(1) {
width: 10px;
}
&:nth-child(2) {
width: 15px;
transform: rotate(180deg);
}
}
}
}
}
.page-nav {
ul {
display: inline-block;
border: 2px solid #f2f2f2;
padding: 10px 30px;
border-radius: 30px;
li {
display: inline;
font-size: 18px;
border-right: 1px solid #E6E6E6;
padding-right: 15px;
margin-right: 15px;
a {
color: @body-color;
i {
&:before {
margin: 0;
font-size: 18px;
}
}
&:hover {
color: @primary-color;
}
}
&.active {
a {
color: @primary-color;
}
}
&:last-child {
padding: 0;
margin: 0;
border: none;
}
}
}
}
.stylelisting {
margin-left: 20px;
li {
color: @title-color;
&:before {
font-family: FontAwesome;
color: @primary-color;
content: "\f058";
margin-right: 15px;
font-size: 20px;
}
}
}
.clearfix {
clear: both;
display: block;
content: "";
}
.size-60 {
max-height: 60px;
width: auto !important;
margin: 0 auto;
max-width: 100%;
}
.size-80 {
max-height: 80px;
width: auto !important;
margin: 0 auto;
max-width: 100%;
}
.size-140 {
max-height: 140px;
width: auto !important;
margin: 0 auto;
max-width: 100%;
}
.size-170 {
max-width: 100%;
margin: 0 auto;
width: auto !important;
max-height: 170px;
}
blockquote {
padding: 40px 60px 40px 100px;
margin: 0;
font-size: 20px;
position: relative;
.rotate-icon {
transform: rotate(180deg);
position: absolute;
top: 25px;
left: 50px;
margin-left: 10px;
}
.last-icon {
position: absolute;
bottom: 30px;
margin-left: 10px;
}
i {
&:before {
margin: 0 !important;
font-size: 30px !important;
}
}
}
[class^="flaticon-"]:before,
[class*=" flaticon-"]:before,
[class^="flaticon-"]:after,
[class*=" flaticon-"]:after {
margin: 0;
}

/*Search Modal*/
.search-modal {
.modal-content {
background: transparent;
position: initial;
border: 0;
}
.search-block {
input {
height: 60px;
line-height: 60px;
padding: 0 15px;
background: transparent;
border-width: 0 0 1px 0;
border-radius: 0;
border-color: rgba(255,255,255,1);
box-shadow: none;
color: @white-color;
font-weight: 400;
font-size: 40px;
letter-spacing: 3px;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: @white-color;
opacity: 1;
}
::-moz-placeholder { /* Firefox 19+ */
color: @white-color;
opacity: 1;
}
:-ms-input-placeholder { /* IE 10+ */
color: @white-color;
opacity: 1;
}
:-moz-placeholder { /* Firefox 18- */
color: @white-color;
opacity: 1;
}
}
.close {
color: @secondary-color;
margin-top: 20px;
background-color: rgba(255,255,255,1);
height: 45px;
width: 45px;
line-height: 40px !important;
text-align: center;
border-radius: 50%;
opacity: 1;
outline: none;
transition: @transition;
transition: @transition !important;
transform: rotate(0deg) !important;
&:hover {
transform: rotate(90deg) !important;
}
}
}
.modal-backdrop {
background-color: @secondary-color;
}
.modal-backdrop.show {
opacity: 0.9;
z-index: 99;
}

/*Navigation*/
.nav-style{
.owl-carousel {
padding-top: 0;
.owl-nav {
[class*="owl-"] {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: transparent;
border: 1px solid @primary-color;
color: @primary-color;
font-size: 25px;
width: 45px;
height: 45px;
line-height: 45px;
border-radius: 50%;
display: inline-block;
text-align: center;
opacity: 0 !important;
visibility: hidden !important;
transition: @transition;
&.owl-prev {
left: 0;
}
&.owl-next {
right: 0;
}
&:hover {
background-color: @primary-color;
color: @white-color;
}
}
}
&:hover {
[class*="owl-"] {
opacity: 1 !important;
visibility: visible !important;
.owl-prev {
left: -60px;
}
.owl-next {
right: -60px;
}
}
}
}
}
.slider-navigation{
.owl-carousel {
padding-top: 0;
.owl-nav {
[class*="owl-"] {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: transparent;
border: 1px solid @white-color;
color: @white-color;
font-size: 25px;
width: 45px;
height: 45px;
line-height: 45px;
border-radius: 50%;
display: inline-block;
transition: @transition;
text-align: center;
opacity: 0 !important;
visibility: hidden !important;
&.owl-prev {
left: 0px;
}
&.owl-next {
right: 0px;
}
&:hover {
border-color: @primary-color;
background-color: @primary-color;
color: @white-color;
}
}
}
&:hover {
[class*="owl-"] {
opacity: 1 !important;
visibility: visible !important;
.owl-prev {
left: 30px;
}
.owl-next {
right: 30px;
}
}
}
}
}

/* -----------------------
03. Header Section CSS
--------------------------*/
.full-width-header{
position: relative;
.rs-header{
z-index: 99;
.menu-area {
font-family: @body-font;
.logo-area {
position: relative;
img{
max-width: 182px;
margin: 0;
max-height: 100%;
transition: @transition !important;
}
}
.main-menu {
.expand-btn {
float: right;
position: relative;
z-index: 1;
margin-left: 40px;
transition: @transition;
span {
display: inline-block;
margin-right: 20px;
a {
padding: 0;
color: #fff;
height: 100px;
line-height: 100px;
transition: @transition;
i {
&:before {
font-size: 15px;
margin: 0;
}
}
&.nav-expander {
i {
font-weight: 700;
&:before {
font-size: 21px;
margin-left: 20px;
}
}
}
}
&:last-child {
margin: 0;
}
}
}
.rs-menu{
.nav-menu{
li{
margin-right: 15px;
a {
color: @white-color;
transition: @transition;
&:hover{
color: @primary-color;
}
}
&:last-child{
margin-right: 0!important;
a {
padding-right: 0;
}
i{
margin: 0;
}
}
}
}
.sub-menu{
background-color: @primary-color;
margin: 0;
padding: 15px 0 10px;
-webkit-box-shadow: 0px 3px 20px 0px rgba(0, 0, 0, 0.06);
-moz-box-shadow: 0px 3px 20px 0px rgba(0, 0, 0, 0.06);
box-shadow: 0 3px 20px rgba(0, 0, 0, 0.06);
li{
margin: 0;
border: none;
a{
padding: 10px 30px !important;
height: unset !important;
text-transform: capitalize;
line-height: unset !important;
color: @hover-color;
font-weight: 400;
transition: @transition;
&:hover{
color: @secondary-color !important;
}
}
&:last-child{
margin: 0;
}
&.active,
&.current-menu-item{
> a {
color: @secondary-color !important;
}
}
}
}
.rs-mega-menu {
.mega-menu{
background-color: @primary-color;
-webkit-box-shadow: 0px 3px 20px 0px rgba(0, 0, 0, 0.06);
-moz-box-shadow: 0px 3px 20px 0px rgba(0, 0, 0, 0.06);
box-shadow: 0 3px 20px rgba(0, 0, 0, 0.06);
.mega-menu-container{
padding: 0;
margin: 0;
.single-megamenu {
width: 25%;
float: left;
padding: 0 15px;
.sub-menu {
box-shadow: none;
.menu-title {
font-size: 17px;
text-transform: uppercase;
font-weight: 600;
padding: 10px 15px;
color: @title-color;
transition: @transition;
}
li {
a {
padding: 10px 15px !important;
transition: @transition;
}
}
}
&:hover {
.sub-menu {
.menu-title {
color: @secondary-color;
}
}
}
}
}
}
&.current-menu-item {
.single-megamenu {
.sub-menu {
.menu-title {
&.active {
color: @secondary-color !important;
}
}
}
}
}
}
ul li a:hover,
ul li.active a,
ul li.current-menu-item > a{
color: @primary-color !important;
}
}
}
&.menu-sticky {
box-shadow: none;
transition: @transition;
}
}
.right_menu_togle {
background: #fafafa;
padding: 50px;
right: -100%;
width: 480px;
box-shadow: inset 0px 5px 15px 0px #ccc;
z-index: 999999;
.close-btn{
position: absolute;
top: 20px;
right: 20px;
content: '';
padding: 0;
span{
width: 40px !important;
height: 40px !important;
line-height: 40px !important;
border-radius: 50% !important;
background: @secondary-color;
color: @white-color;
border: none !important;
transition: @transition;
float: none !important;
i {
transition: @transition;
&:before {
margin: 0;
font-size: 15px;
}
}
&:hover {
transform: rotate(90deg);
}
}
}
.canvas-logo{
padding-left: 0;
padding-bottom: 45px;
img{
width: auto;
height: 60px;
}
}
.sidebarnav_menu{
margin-bottom: 47px;
li{
margin-bottom: 15px;
a{
font-size: 17px;
color: @title-color;
padding-left: 0;
display: block;
&:hover{
color: @primary-color;
}
}
&.active {
a {
color: @primary-color;
}
}
&:last-child {
margin: 0;
}
}
}
.canvas-contact{
.canvas-contact-title{
padding: 0 0 15px;
font-size: 20px;
font-weight: 600;
position: relative;
&:before{
content: "";
position: absolute;
background: @primary-color;
height: 2px;
width: 50px;
left: 0;
bottom: 0;
display: block;
z-index: 1;
}
}
.contact{
padding: 0 0 30px;
li{
padding: 0 0 13px;
i{
padding-right: 10px;
}
a{
color:@body-color;
&:hover{
color: @primary-color;
}
}
&:last-child{
padding: 0;
}
}
}
.social{
li{
display: inline-block;
padding-right: 10px;
a{
i{
font-size: 18px;
color: @white-color;
width: 40px;
height: 40px;
line-height: 40px;
background: @secondary-color;
text-align: center;
border-radius: 50%;
}
&:hover{
opacity: 0.82;
}
}
&:last-child{
padding: 0;
}
}
}
}
}
&.homestyle {
position: absolute;
content: '';
left: 0;
top: 0;
width: 100%;
/*background: transparent;*/ /*MODIFICACION 27-01-2020 - @PCASIN*/
background:#000000;
&.dark-sticky {
.sticky {
background: rgba(0,0,0,.8) !important;
}
}
}
}
}

.nav-expanded nav {
right: 0 !important;
}
.rs-canvas-menu {
max-width: 300px;
margin: 0 auto;
.nav-menu {
li {
display: block;
position: relative;
a {
height: 45px;
line-height: 45px;
display: block;
font-size: 15px;
color: @body-color;
&:hover {
color: @primary-color;
}
}
.sub-menu {
opacity: 0;
display: block;
visibility: hidden;
transform: translateX(-10px);
position: absolute;
top: 0;
left: 100%;
width: 300px;
li {
border-bottom: 1px solid @border-color;
&.active {
> a {
color: @primary-color;
}
}
}
}
&:hover {

.sub-menu {
opacity: 1;
visibility: visible;
transform: translateX(0px);
}
}
&.current-menu-item {
> a {
color: @primary-color;
}
}
}
}
}
/* ------------------------------------
04. Slider Section CSS
-----------------------------------*/
.rs-slider {
&.home-slider {
.single-slider {
background: url(images/slider/h1s1.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: relative;
padding: 100px 0 0;
height: 100vh;
display: grid;
align-items: center;
overflow: hidden;
.text-part {
.sub-title {
font-size: 60px;
line-height: 1;
color: @white-color;
font-weight: 500;
margin-bottom: 18px;
}
.title {
font-weight: 800;
color: @white-color;
font-size: 85px;
line-height: 1;
text-transform: uppercase;
margin-bottom: 23px;
}
.desc {
color: @white-color;
font-size: 18px;
line-height: 32px;
}
.slider-btn {
margin-top: 37px;
}
}
.fly-layer {
position: absolute;
right: 0;
top: 54%;
transform: translateY(-46%);
max-width: 50%;
.layer-image {
position: relative;
.parallax-ball {
position: absolute;
top: 113px;
left: 17%;
transform: translateX(-78%) rotate(-20deg) !important;
}
}
}
&.slide2 {
.common {
position: absolute;
width: 50%;
}
.text-part {
right: 0;
top: 60%;
transform: translateY(-60%);
}
.image-part {
left: 5%;
top: 50%;
transform: translateY(-50%);
.image-wrap {
position: relative;
.player {
width:  85%;
}
.ball {
max-width: 90px;
position: absolute;
right: 265px;
bottom: 0;
}
}
}
}
}
}
}

/*----------------------------------------
05. Banner Section CSS
----------------------------------------*/
.rs-banner {
&.home2banner {
background: url(images/banner/home2-banner.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
position: relative;
height: 100vh;
.banner-content {
position: absolute;
content: '';
left: 50%;
top: 54%;
transform: translate(-50%, -46%);
width: 100%;
.banner-title {
h1 {
font-size: 60px;
line-height: 70px;
font-weight: 900;
}
}
.timecounter-inner {
max-width: 550px;
padding-left: 18px;
margin: 0 auto;
.time_circles {
position: relative;
width: 100%;
height: 100%;
left: -14px;
canvas{
opacity: 1;
}
div{
position: absolute;
text-align: left;
padding-right: 0;
span {
padding: 0;
display: block;
width: 100%;
text-align: center;
font-weight: 700;
font-size: 40px !important;
margin: 0 0 9px 0;
color: @primary-color;
}
h4{
color: @white-color;
margin: 0;
padding: 0;
text-align: center;
font-weight: 400;
text-transform: capitalize;
line-height: 17px;
font-size: 12px !important;
}
}
}
}
}
}
&.home3banner {
background: url(images/banner/home3-banner.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
display: grid;
align-items: center;
height: 850px;
position: relative;
.banner-content {
.layer-img {
position: absolute;
content: '';
bottom: 0;
text-align: left;
}
.banner-sub-title {
font-size: 56px;
font-weight: 500;
line-height: 66px;
}
.banner-title {
h1 {
font-size: 66px;
line-height: 76px;
font-weight: 800;
}
}
}
}
&.home4banner {
background: url(images/banner/home4-banner.jpg);
background-repeat: no-repeat;
background-size: cover;
padding: 180px 0;
.banner-content {
.title {
font-size: 80px;
line-height: 85px;
font-weight: 600;
margin-bottom: 18px;
}
.desc {
font-size: 18px;
line-height: 28px;
margin-bottom: 47px;
}
}
.layer-img {
position: relative;
ul {
li {
display: inline;
vertical-align: bottom;
img {
&.ball {
max-width: 90px;
position: absolute;
bottom: 0;
left: 180px;
}
&.man {
max-width: 500px;
}
}
}
}
}
}
}

/* ------------------------------------
06. Breadcrumbs Section CSS
-------------------------------------*/
.rs-breadcrumbs {
.breadcrumbs-wrap{
position: relative;
overflow: hidden;
img {
width: 100%
}
.breadcrumbs-inner{
width: 100%;
position: absolute;
bottom: 55px;
&.vertical-middle {
top: 45%;
transform: translateY(-55%);
bottom: unset;
}
.breadcrumbs-text{
text-align: center;
.breadcrumbs-title{
width: 100%;
font-size: 45px;
text-transform: uppercase;
color: @white-color;
float: left;
line-height: 50px;
}
.categories {
ul {
li {
display: inline;
color: @white-color;
font-size: 15px;
a {
color: @white-color;
&:hover {
color: #ccc;
}
}
&:after {
font-family: Flaticon;
content: '\f147';
margin: 0 3px 0 7px;
color: @white-color;
}
&.active {
color: @primary-color;
}
&:last-child {
&:after {
content: unset;
margin: 0;
}
}
}
}
}
.post-date-author {
margin-top: 10px;
ul {
li {
display: inline;
margin-right: 12px;
color: @body-color;
font-size: 14px;
i {
margin-right: 10px;
}
a {
color: @body-color;
&:hover {
color: lighten(@body-color, 10%);
}
}
&:last-child {
margin-right: 0;
}
}
}
}
}
}
}
}

/* ------------------------------------
07. Board Managment Section CSS
-------------------------------------*/
.rs-board-staff {
.staf-wrap {
.staf-area {
.staff-item {
overflow: hidden;
box-shadow: 0 0 30px rgba(0,0,0,.1);
margin: 0 40px 40px;
padding: 40px 40px;
border-radius: 5px;
.item-wrap {
display: table;
.staff-img {
display: table-cell;
vertical-align: middle;
width: 20%;
text-align: center;
}
.staff-desc {
display: table-cell;
vertical-align: middle;
width: 80%;
.inner-desc {
padding-left: 40px;
h3 {
margin: 0;
padding: 0;
font-size: 20px;
text-transform: uppercase;
line-height: 30px;
font-weight: 500;
color: @title-color;
}
h4 {
margin: 0;
padding: 0 0 15px;
font-size: 14px;
text-transform: capitalize;
line-height: 25px;
color: @body-color;
}
span {
display: block;
margin: 5px 0;
i {
font-style: normal;
font-weight: 600;
display: inline-block;
min-width: 120px;
}
&.sub3 {
padding-bottom: 15px;
}
}
}
}
}
&:last-child {
margin-bottom: 0;
}
}
}
}
}

/* ------------------------------------
08. Upcoming Match Section CSS
-------------------------------------*/
.rs-upcoming-match {
padding: 52px 20px 60px;
border-radius: 4px;
.match-info {
ul {
li {
display: inline;
color: @white-color;
padding-right: 13px;
margin-right: 8px;
position: relative;
&:after {
position: absolute;
content: '';
width: 1px;
height: 12px;
right: 0;
top: 50%;
transform: translateY(-50%);
background: @primary-color;
}
&:last-child {
padding: 0;
margin: 0;
&:after {
display: none;
}
}
}
}
.time {
font-size: 20px;
}
}
&.sl-style {
.items {
text-align: center;
color: @title-color;
.vanues {
text-transform: uppercase;
.date {
color: @primary-color;
font-size: 17px;
font-weight: 500;
line-height: 26px;
}
.time {
font-size: 18px;
line-height: 26px;
font-weight: 500;
padding-top: 5px;
}
.vs {
color: @primary-color;
font-size: 25px;
font-weight: 600;
padding: 50px 0;
}
.stadium {
}
}
.teams {
.score {
font-size: 24px;
line-height: 26px;
font-weight: 600;
}
.logo {
.name {
margin-top: 15px;
font-weight: 600;
text-transform: uppercase;
}
}
}
}
.sl-wrap {
max-width: 800px;
margin: 0 auto;
padding: 50px 40px;
border-radius: 10px;
}
}
&.sl-style2 {
padding: 0;
.owl-stage-outer {
padding: 20px;
margin: 0 -20px;
}
.items {
text-align: center;
background: @white-color;
padding: 23px 30px;
border-radius: 5px;
box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.07);
z-index: 1;
.vanues {
.stadium {
font-weight: 600;
color: @title-color;
}
}
.teams {
display: flex;
align-items: center;
div {
width: 100%;
}
.vs {
font-size: 30px;
font-weight: 500;
text-transform: uppercase;
color: @primary-color;
}
.logo {
display: flex;
align-items: center;
img {
max-height: 70px;
width: auto;
margin: 0 auto;
}
.name {
color: @primary-color;
text-transform: uppercase;
font-weight: 500;
}
}
}
.ligue {
margin-top: -6px;
}
}
}
}

/* ------------------------------------
09. Countdown Section CSS
-------------------------------------*/
.rs-countdown {
.countdown {
width: 100%;
display: inline-flex;
div {
color: @primary-color;
display: inline-block;
font-size: 35px;
font-weight: 600;
width: 100%;
span {
color: @white-color;
text-transform: uppercase;
display: block;
font-size: 15px;
font-weight: 400;
margin-top: 5px;
}
}
}
}

/* ------------------------------------
10. About Section CSS
-------------------------------------*/
.rs-about {
.about-img {
img {
border-radius: 5px;
}
}
&.style2 {
.image-wrap {
position: relative;
border-radius: 3px;
overflow: hidden;
img {
width: 100%;
}
a {
position: absolute;
content: '';
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 1;
color: @white-color;
opacity: 0;
i {
&:before {
font-size: 40px;
}
}
&:hover {
color: @primary-color;
}
}
&:after {
position: absolute;
content: '';
left: 0;
top: 0;
width: 100%;
transition: @transition;
height: 100%;
opacity: 0;
background: rgba(0,0,0,.7);
}
&:hover {
a {
opacity: 1;
}
&:after {
opacity: 1;
}
}
}
}
&.after-bg {
position: relative;
&:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: @secondary-color;
opacity: 0;
visibility: hidden;
z-index: -1;
}
}

}

/* ------------------------------------
11. Tab Section CSS
-------------------------------------*/
.rs-tab {
.club-details_data {
ul.nav {
padding-bottom: 20px;
margin-bottom: 40px;
li {
padding: 0 5px 0 0;
border: none;
border-radius: 0;
display: inline-block;
width: 20%;
text-align: center;
a {
color: @title-color;
font-weight: 600;
text-transform: uppercase;
border: 1px solid #eee;
background: @white-color;
padding: 30px 10px;
border-radius: 2px;
position: relative;
z-index: 1;
display: block;
font-size: 20px;
&.active {
border: 1px solid @primary-color;
background: @primary-color;
&:after {
bottom: -11px;
opacity: 1;
}
}
&:hover {
border: 1px solid @primary-color;
background: @primary-color;
}
&:after {
position: absolute;
bottom: 2px;
left: 50%;
background: @primary-color;
display: block;
width: 15px;
height: 15px;
content: '';
opacity: 0;
transform: rotate(45deg) translateX(-50%);
transition: @transition;
pointer-events: none;
z-index: -1;
}
}
&:last-child {
padding-right: 0;
}
}
}
.tab-content {
.tab-pane {
.about-club {
.alignright {
float: right;
margin-left: 1.5em;
}
}
.squad-list {
.squad-list-item {
border: 1px solid #f9f9f9;
div {
padding: 0 20px;
}
.name {
padding-top: 20px;
font-size: 25px;
margin: 0 0 10px;
font-weight: 600;
a {
color: @title-color;
&:hover {
color: @primary-color;
}
}
}
.position {
font-size: 18px;
display: block;
margin: 0 0 5px;
}
.jersy {
position: absolute;
bottom: 20px;
right: 20px;
font-size: 50px;
font-weight: 700;
color: @primary-color;
opacity: .3;
padding: 0;
}
}
}
.club-awards {
.award-wrap {
border: 1px solid #e6e6e6;
padding: 25px 10px 0;
.champion-logo {
img {
max-height: 260px;
width: auto;
margin: 0 auto;
display: block;
}
}
.champion-details {
margin-top: 15px;
text-align: center;
position: relative;
padding-bottom: 25px;
.year-details {
text-align: center;
span {
margin-top: 10px;
display: block;
}
}
.champion-no {
font-size: 40px;
margin-top: 15px;
text-align: center;
padding: 5px 15px;
color: @primary-color;
display: inline-block;
border-radius: 3px;
font-weight: 900;
}
}
}
}
.club-gallery {
.gallery-wrap {
position: relative;
a {
position: absolute;
content: '';
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
transition: @transition;
color: @title-color;
opacity: 0;
z-index: 2;
text-align: center;
i {
&:before {
font-size: 46px;
}
}
}
&:after {
position: absolute;
content: '';
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 0;
height: 0;
background: @primary-color;
opacity: 0;
transition: @transition;
}
&:hover {
a {
opacity: 1;
}
&:after {
width: 100%;
height: 100%;
opacity: 0.8;
}
}
}
}
.club-jersy {
text-align: center;
.champion-details {
.year-details {
h3 {
margin-top: 20px;
margin-bottom: 0;
font-size: 22px;
}
}
}
}
}
}
}
.single-team-data {
ul.nav {
padding-bottom: 20px;
margin-bottom: 33px;
li {
padding: 0 5px 0 0;
border: none;
border-radius: 0;
display: inline-block;
width: 20%;
text-align: center;
a {
color: @title-color;
font-weight: 600;
text-transform: capitalize;
border: 1px solid #eee;
background: @white-color;
padding: 30px 10px;
border-radius: 2px;
position: relative;
z-index: 1;
display: block;
font-size: 20px;
&.active {
border: 1px solid @primary-color;
background: @primary-color;
&:after {
bottom: -11px;
opacity: 1;
}
}
&:hover {
border: 1px solid @primary-color;
background: @primary-color;
}
&:after {
position: absolute;
bottom: 2px;
left: 50%;
background: @primary-color;
display: block;
width: 15px;
height: 15px;
content: '';
opacity: 0;
transform: rotate(45deg) translateX(-50%);
transition: @transition;
pointer-events: none;
z-index: -1;
}
}
&:last-child {
padding-right: 0;
}
}
}
.tab-content {
.tab-pane {
background: @white-color;
padding: 30px;
.team-gallery {
.gallery-wrap {
position: relative;
a {
position: absolute;
content: '';
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
transition: @transition;
color: @title-color;
opacity: 0;
z-index: 2;
text-align: center;
i {
&:before {
font-size: 46px;
}
}
}
&:after {
position: absolute;
content: '';
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 0;
height: 0;
background: @primary-color;
opacity: 0;
transition: @transition;
}
&:hover {
a {
opacity: 1;
}
&:after {
width: 100%;
height: 100%;
opacity: 0.8;
}
}
}
}
.club-videos {
.video-wrap {
.popup-videos {
position: relative;
display: block;
img {
width: 100%;
}
i {
position: absolute;
content: '';
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-size: 40px;
color: @white-color;
z-index: 1;
}
&:after {
position: absolute;
background: rgba(0,0,0,.5);
content: '';
left: 0;
top: 0;
width: 100%;
height: 100%;
}
}

}
}
}
}
}
}

/* ------------------------------------
12. Video Section CSS
-------------------------------------*/
.rs-video {
position: relative;
.video-contents {
position: absolute;
content: '';
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 100%;
.play-btn {
width: 81px;
height: 80px;
line-height: 90px;
border-radius: 50%;
background: @primary-color;
margin: 0 auto;
display: block;
position: relative;
i {
color: @title-color;
z-index: 1;
position: relative;
font-size: 30px;
&:before {
margin-left: 5px;
}
}
&:after{
content: "";
position: absolute;
z-index: 1;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: block;
width: 75px;
height: 75px;
background: @primary-color;
border-radius: 50%;
animation: pulse-border 1200ms ease-out infinite;
transition: @transition;
z-index: 0;
}
}
}
&.big-space {
padding: 243px 0;
}
&.big-space2 {
padding: 308px 0 300px;
}
}

/* ------------------------------------
13. Result Section CSS
-------------------------------------*/
.rs-result {
.result-info {
table.result-table {
width: 100%;
tr {
td {
padding: 50px;
border: 0;
text-align: center;
.total-goal {
color: @title-color;
padding: 14px 20px;
border-radius: 4px;
text-transform: uppercase;
font-size: 25px;
font-weight: 600;
display: block;
}
.readon {
padding: 10px 20px;
font-size: 15px;
text-transform: capitalize;
font-weight: 400;
}
&.logo {
font-weight: 500;
font-size: 15px;
img {
display: block;
margin-bottom: 7px;
}
}
}
&:nth-child(odd) {
background: #eff4fd;
}
}
}
}
&.style2 {
.items {
text-align: center;
background: @white-color;
padding: 23px 30px;
border-radius: 5px;
z-index: 1;
.vanues {
.stadium {
font-weight: 600;
color: @title-color;
}
}
.teams {
display: flex;
align-items: center;
div {
width: 100%;
}
.score {
font-size: 30px;
font-weight: 500;
text-transform: uppercase;
color: @primary-color;
}
.logo {
display: flex;
align-items: center;
img {
max-height: 70px;
width: auto;
margin: 0 auto;
}
.result {
color: @primary-color;
text-transform: uppercase;
font-weight: 500;
}
}
}
.ligue {
margin-top: -6px;
}
}
.video-frame {
max-width: 750px;
margin: 100px auto -211px;
position: relative;
border-radius: 3px;
overflow: hidden;
a {
position: absolute;
z-index: 1;
content: '';
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: @white-color;
i {
&:before {
font-size: 45px;
}
}
&:hover {
color: @primary-color;
}
}
}
}
}

/* ------------------------------------
14. Today Match Teams Section CSS
-------------------------------------*/
.rs-match-result {
&.style1 {
.items {
border-radius: 3px;
/*background: url(/bmlumbreras/images/background/result-bg.jpg);*/
background-color: @secondary-color;
background-size: cover;
min-height:274px;
text-align: center;
a {
padding: 18px 20px 20px;
color: @white-color;
display: block;
.teams {
display: inline-flex;
vertical-align: middle;
align-items: center;
width: 100%;
margin-top: -5px;
div {
width: 100%;
&.score {
font-size: 24px;
line-height: 26px;
font-weight: 600;
}
&.logo {
.name {
margin-top: 5px;
}
}
}
}
&:hover {
color: @white-color;
}
}
}
&.modify-style {
.items {
a {
.vanues {
.date {
color: @primary-color;
font-size: 16px;
line-height: 26px;
}
.stadium {
font-size: 18px;
margin-top: 15px;
span {
font-weight: 600;
margin-right: 5px;
}
}
}
.teams {
display: inline-flex;
vertical-align: middle;
align-items: center;
width: 100%;
margin-top: -5px;
div {
width: 100%;
&.score {
font-size: 24px;
line-height: 26px;
font-weight: 600;
}
&.logo {
.name {
margin-top: 5px;
}
}
&.time-vs {
span {
display: block;
&.time {
font-size: 25px;
margin-bottom: 25px;
margin-top: 10px;
}
&.vs {
color: @primary-color;
font-size: 16px;
}
}
}
}
}
&:hover {
color: @white-color;
}
}
}
&.fly-box {
max-width: 600px;
margin: 0 auto;
padding-top: -2em;
.items {
background: @white-color;
a {
color: @title-color;
.vanues {
.date {
color: @secondary-color;
}
}
}
}
.owl-controls {
.owl-nav {
z-index: 1;
.owl-prev,
.owl-next {
position: absolute;
content: '';
top: 50%;
transform: translateY(-50%);
transition: @transition;
opacity: 0;
i {
width: 42px;
height: 42px;
line-height: 42px;
color: @white-color;
border-radius: 50%;
text-align: center;
border: none;
background: @primary-color;
transition: @transition;
font-size: 20px;
&:hover {
background: @secondary-color;
}
&.fa-angle-left:before {
margin-right: 3px;
}
}
}
.owl-prev {
left: 0;
}
.owl-next {
right: 0;
}
}
}
&:hover {
&:hover {
.owl-controls {
.owl-nav {
.owl-prev,
.owl-next {
opacity: 1;
}
.owl-prev {
left: -45px;
}
.owl-next {
right: -45px;
}
}
}
}
}
}
}
}
&.style2 {
.items {
.result-item {
display: flex;
align-items: center;
vertical-align: middle;
.common {
float: left;
width: 33.33%;
text-align: center;
}
.today-match-team {
.logo {
.name {
color: @white-color;
font-size: 18px;
margin-top: 15px;
}
}
}
.today-final-score {
color: @white-color;
.score {
font-weight: 600;
font-size: 40px;
line-height: 50px;
margin-bottom: 14px;
}
.info {
opacity: 0.8;
font-size: 14px;
margin-bottom: 5px;
i {
margin-right: 7px;
font-size: 15px;
color: @primary-color;
}
&:last-child {
margin-bottom: 0;
}
}
}
}
}
.owl-controls {
.owl-nav {
position: absolute;
content: '';
left: 50%;
bottom: -15px;
transform: translateX(-50%);
z-index: 1;
.owl-prev,
.owl-next {
display: inline;
i {
width: 30px;
height: 30px;
line-height: 27px;
color: @primary-color;
border-radius: 50%;
text-align: center;
border: 1.5px solid @primary-color;
background: transparent;
transition: @transition;
opacity: 0.7;
font-size: 20px;
&:hover {
opacity: 1;
}
&.fa-angle-left:before {
margin-right: 3px;
}
}
}
.owl-prev {
margin-right: 10px;
}
}
}
}
}

/* ------------------------------------
15. Latest News Section CSS
-------------------------------------*/
.rs-lates-news {
.latest-news-grid {
position: relative;
border-radius: 4px;
overflow: hidden;
transition: @transition;
.news-img {
a {
img {
transition: @transition;
transform: scale(1);
}
}
}
.news-info {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 0 30px 35px;
color: @white-color;
z-index: 1;
.news-date {
color: @primary-color;
margin-bottom: 13px;
}
.news-title {
font-size: 28px;
line-height: 36px;
margin: 0;
a {
color: @white-color;
&:hover {
color: @primary-color;
}
}
}
&:after {
position: absolute;
content: "";
width: 100%;
height: 220%;
left: 0;
bottom: 0;
display: block;
background-image: linear-gradient(to top,rgba(33,71,144,.85) 30%,rgba(255,255,255,0) 70%);
background-image: -webkit-linear-gradient(to top,rgba(33,71,144,.85) 30%,rgba(255,255,255,0) 70%);
background-image: -moz-linear-gradient(to top,rgba(33,71,144,.85) 30%,rgba(255,255,255,0) 70%);
background-image: -ms-linear-gradient(to top,rgba(33,71,144,.85) 30%,rgba(255,255,255,0) 70%);
background-image: -o-linear-gradient(to top,rgba(33,71,144,.85) 30%,rgba(255,255,255,0) 70%);
border-radius: 0 0 4px 4px;
z-index: -1;
}
}
&.small-grid {
.news-info {
padding: 0 25px 25px;
.news-title {
font-size: 18px;
line-height: 27px;
}
.news-desc {
display: none;
}
}
}
&:hover {
.news-img {
a {
img {
transform: scale(1.05);
}
}
}
}
}
.latest-news-slider {
position: relative;
.news-slider-full {
.slider-item {
position: relative;
img {
width: 100%;
}
.contents {
position: absolute;
content: '';
padding: 0 0 30px 30px;
left: 0;
bottom: 0;
width: 48%;
.meta {
li {
display: inline;
margin-right: 15px;
color: #ccc;
font-size: 12px;
i {
margin-right: 5px;
}
span {
a {
color: #ccc;
&:hover {
color: @primary-color;
}
}
}
&:last-child {
margin: 0;
}
}
}
.news-title {
font-size: 24px;
font-weight: 600;
margin-bottom: 8px;
cursor: pointer;
a {
color: @white-color;
&:hover {
color: @primary-color;
}
}
}
.desc {
color: @white-color;
}
}
&:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.6);
}
}
}
.news-slider-nav {
position: absolute;
content: '';
right: 0;
top: 50%;
transform: translateY(-50%);
width: 34%;
padding-right: 30px;
.slick-track {
width: 100% !important;
}
.nav-item {
display: flex;
align-items: center;
width: 100% !important;
margin-bottom: 30px;
.common {
width: 100%;
}
.nav-img {
max-width: 130px;
margin-right: 15px;
img {
width: 100%;
border-radius: 4px;
}
}
.contents {
.meta {
li {
display: inline;
margin-right: 15px;
color: #ccc;
font-size: 12px;
i {
margin-right: 5px;
}
&:last-child {
margin: 0;
}
}
}
.news-title {
font-size: 18px;
font-weight: 500;
margin-bottom: 0;
color: @white-color;
cursor: pointer;
}
}
&.slick-current {
.contents {
.news-title {
color: @primary-color;
}
}
}
&:last-child {
margin: 0;
}
}
}
}
}

.rs-blog {
.blog-item {
.blog-img {
position: relative;
background: @white-color;
.image-wrap {
overflow: hidden;
height: 215px;
a {
img {
transition: @transition;
transform: scale(1);
}
}
}
.all-meta {
padding: 15px 25px 0;
.meta {
display: inline-block;
font-size: 14px;
color: #909090;
margin-right: 24px;
a {
color: #909090;
&:hover {
color: @primary-color;
}
}
i {
&:before {
font-weight: 600;
}
}
.meta-folder {
margin: 0;
}
}
.meta-date {
background: @primary-color;
border-radius: 3px;
color: @title-color;
width: 75px;
height: 75px;
text-align: center;
padding-top: 3px;
line-height: 28px;
font-weight: 500;
margin-top: -48px;
position: relative;
top: -10px;
transition: @transition;
z-index: 30;
.month-day {
margin-top: 7px;
font-size: 30px;
display: block;
}
.month-name {
font-size: 16px;
text-transform: uppercase;
margin-top: 2px;
}
}
.meta-author {
text-transform: capitalize;
i {
margin-right: 7px;
}
}
}
}
.blog-content {
padding: 20px 25px 55px;
background: @white-color;
box-shadow: 0px 15px 34px -5px rgba(193,193,193,.3);
.blog-title {
line-height: 30px;
font-size: 20px;
margin-bottom: 17px;
a {
color: @title-color;
&:hover {
color: @primary-color;
}
}
}
.read-button {
margin-top: 26px;
a {
color: @title-color;
position: relative;
font-size: 16px;
padding-right: 22px;
&:after {
position: absolute;
right: 0;
top: 50%;
font-size: 15px;
transform: translateY(-50%);
content: "\f133";
font-family: Flaticon;
}
&:hover {
color: @primary-color;
padding-right: 26px;
}
}
}
}
&:hover {
.blog-img {
.image-wrap {
a {
img {
transform: scale(1.1);
}
}
}
}
}
}
.cl-sidebar {
.cl-widget-title {
font-weight: 600;
margin-bottom: 48px;
position: relative;
font-size: 20px;
&:after {
position: absolute;
content: '';
height: 2px;
width: 50px;
background: @primary-color;
left: 0;
top: 40px;
}
}

.cl-search {
overflow: hidden;
position: relative;
margin-bottom: 30px;
input {
border: 1px solid #ddd;
color: #444444;
padding: 0 17px;
height: 45px;
width: 100%;
border-radius: 5px;
outline: none;
}
button {
background: transparent;
border: medium none;
color: @title-color;
padding: 0 16px;
position: absolute;
height: 45px;
right: 0px;
top: 0;
z-index: 10;
outline: none;
transition: @transition;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
cursor: pointer;
i {
&:before {
font-size: 18px;
font-weight: 600;
}
}
&:hover {
background: @primary-color;
color: @white-color;
}
}
}

.cl-recentpost {
ul {
li {
border-top: 1px solid rgba(0, 0, 0, 0.06);
padding: 10px 0;
a {
color: #101010;
font-weight: 500;
&:hover {
color: @primary-color;
}
}
&:last-child {
padding-bottom: 0;
}
&:first-child {
padding-top: 0;
border-top: none;
}
}
}
}

.cl-recent-comments {
ul {
li {
border-top: 1px solid rgba(0, 0, 0, 0.06);
padding: 10px 0;
a {
font-weight: 500;
color: #101010;
&:hover {
color: @primary-color;
}
}
&:last-child {
padding-bottom: 0;
}
&:first-child {
padding-top: 0;
border-top: none;
}
}
}
}

.cl-archives {
ul {
li {
+ li {
padding-top: 14px;
}
a {
color: #101010;
transition: @transition;
font-weight: 500;
&:hover{
color: @primary-color;
}
}
&:before {
content: "\f105";
font-family: FontAwesome;
margin-right: 5px;
color: #101010;
}
}
}
}

.cl-categories {
ul {
li {
+ li {
padding-top: 14px;
}
a {
color: #101010;
font-weight: 500;
transition: @transition;
&:hover{
color: @primary-color;
}
}
&:before {
content: "\f105";
font-family: FontAwesome;
margin-right: 5px;
color: #101010;
}
}
}
}

.cl-meta {
ul {
li {
border-top: 1px solid rgba(0, 0, 0, 0.06);
padding: 10px 0;
a {
color: #505050;
&:hover {
color: @primary-color;
}
}
&:last-child {
padding-bottom: 0;
}
&:first-child {
padding-top: 0;
border-top: none;
}
}
}
}

.cl-tags{
a {
display: inline-block;
margin: 10px 3px 0px 0;
line-height: 20px;
padding: 6px 11px;
font-size: 13px !important;
text-transform: capitalize;
-webkit-transition: all .3s ease;
transition: @transition;
background: @white-color;
color: @body-color;
border: 1px solid #f0f0f0;
border-radius: 5px;
&:hover {
background-color: @primary-color;
color: #fff;
border: 1px solid @primary-color;
}
}
}
}
&.style2 {
.blog-item {
.blog-img {
position: relative;
background: @white-color;
.image-wrap {
overflow: hidden;
a {
img {
transition: @transition;
transform: unset;
}
}
}
.all-meta {
padding: 15px 40px 0;
.meta {
margin-right: 24px;
a {
color: #909090;
&:hover {
color: @primary-color;
}
}
i {
margin-right: 7px;
&:before {
font-size: 16px;
}
}
}
.meta-folder {
margin: 0;
}
}
}
.blog-content {
padding: 25px 40px 40px;
box-shadow: 0px 5px 40px 0px rgba(230,230,230,.5);
.blog-title {
line-height: 38px;
font-size: 28px;
margin-bottom: 10px;
font-weight: 500;
}
}
}
}
&.modify {
.blog-item {
.blog-img {
.all-meta {
padding: 15px 25px 0;
.meta {
i {
&:before {
font-size: 16px;
}
}
}
}
}
.blog-content {
padding: 20px 25px 30px;
}
}
}
.single-blog-wrap {
.bs-img {
img {
width: 100%;
}
}
.single-content-full {
box-shadow: 0px 5px 40px 0px rgba(230,230,230,.5);
padding: 25px 40px 37px;
overflow: visible;
margin-bottom: 60px;
h2 {
color: @title-color;
font-size: 30px;
}
h3 {
color: @title-color;
margin-bottom: 17px;
font-size: 22px;
font-weight: 600;
line-height: 28px;
}
blockquote {
margin: 40px 0;
padding: 45px 60px 35px 85px;
color: #666;
position: relative;
background-repeat: no-repeat;
background-position: left 20px top 20px;
background-size: 55px;
font-size: 18px;
font-weight: 400;
font-style: italic;
line-height: 30px;
background: #eff4fd;
p {
margin-bottom: 10px;
}
&:before {
font-family: Flaticon;
content: "\f150" !important;
position: absolute;
left: 40px;
top: 36px;
z-index: 99;
font-size: 60px;
font-weight: 600;
display: block;
color: #101010;
opacity: .05;
transform: rotate(180deg);
}
}
.stylelisting {
margin-bottom: 20px;
}
.single-page-info {
border-top: 1px solid rgba(0,0,0,.05);
padding: 30px 0 0;
margin-top: 40px;
.meta {
text-transform: capitalize;
display: inline-block;
margin-right: 24px;
position: relative;
z-index: 15;
font-size: 14px;
color: #909090;
a {
color: #909090;
&:hover {
color: @primary-color;
}
}
i {
margin-right: 7px;
&:before {
font-size: 16px;
}
}
}
}
}
.ps-navigation {
width: 100%;
border-bottom: 1px solid rgba(170,170,170,.25);
padding: 0 0 30px;
margin: 0 0 55px;
ul {
list-style: none;
li {
width: 50%;
display: inline-block;
a {
span {
text-transform: uppercase;
color: #909090;
display: block;
vertical-align: middle;
transition: @transition;
i {
margin-top: -4px;
display: inline-block;
&:before {
font-size: 15px;
}
}
&.link-text {
text-transform: capitalize;
color: @title-color;
font-weight: 500;
transition: @transition;
}
}
&:hover {
span {
color: @primary-color !important;
}
}
}
&.next {
float: right;
text-align: right;
a {
span {
i {
margin-left: 10px;
}
}
}
}
&.prev {
a {
span {
i {
margin-right: 10px;
}
}
}
}
}
}
}
.comments-area {
.comment-title {
font-size: 24px;
font-weight: 600;
margin-bottom: 17px;
margin-top: 40px;
position: relative;
padding: 0 0 12px;
&:before {
content: "";
position: absolute;
background: @primary-color;
height: 2px;
width: 50px;
left: 0;
bottom: 0;
display: block;
z-index: 1;
}
}
.comment-form {
.from-control {
margin-bottom: 33px;
label {
display: block;
.required {

}
}
input {
height: 50px;
}
textarea {
height: 160px;
}
input,
textarea {
width: 100%;
line-height: normal;
padding: 5px 10px;
border: 1px solid #ddd;
border-radius: 5px;
background: @white-color;
outline: none;
color: #555;
}
}
.submit-comment {
margin-top: -10px;
.readon {
outline: none;
box-shadow: unset;
font-weight: 400;
padding: 14px 30px 12px;
}
}
}
}
}
}

/* ------------------------------------
16. Contact Section CSS
-------------------------------------*/
.rs-contact {
.single-icon {
background: url(images/background/contact-info-bg.jpg);
background-size: cover;
position: relative;
color: @primary-color;
box-shadow: 0px 5px 40px 0px rgba(230,230,230,.5);
padding: 50px;
border-radius: 5px;
.icon-part {
position: relative;
height: 70px;
width: 70px;
line-height: 70px;
border-radius: 100%;
text-align: center;
background: @primary-color;
margin: 0 auto 20px;
z-index: 1;
i {
color: @title-color;
z-index: 1;
&:before {
font-size: 33px;
}
}
&:before {
content: "";
position: absolute;
z-index: -1;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
display: block;
width: 70px;
height: 70px;
background: @primary-color;
border-radius: 50%;
animation: pulse-border 1200ms ease-out infinite;
visibility: hidden;
opacity: 0;
transition: @transition;
}
}
.icon-text {
.icon-title {
color: @primary-color;
font-size: 20px;
margin-bottom: 2px;
}
span {
color: @primary-color;
}
a {
color: @primary-color;
&:hover {
color: @primary-color;
}
}
}
&:hover {
.icon-part {
&:before {
opacity: 1;
visibility: visible;
}
}
}
}
.g-map {
iframe {
width: 100%;
border: none;
float: left;
height: 490px;
filter: grayscale(1);
}
}
.contact-area {
.contact-form {
.from-control {
margin-bottom: 20px;
input,
textarea {
width: 100%;
line-height: normal;
border: 1px solid #ddd;
border-radius: 5px;
background: @white-color;
outline: none;
color: @title-color;
}
input {
height: 50px;
padding: 5px 15px;
}
textarea {
height: 168px;
padding: 10px 18px;
}
::placeholder {
color: @body-color;
opacity: 1;
}
}
}
}
}

/* ------------------------------------
17. Point Table Section CSS
-------------------------------------*/
.rs-pointtable {
table {
color: @white-color;
border-collapse: collapse;
border: 0;
width: 100%;
tr {
border-bottom: 1px solid rgba(255,255,255,.1);
th {
padding: 12px 15px;
color: @primary-color;
}
td {
padding: 7px 15px;
}
&:last-child {
border-bottom: none;
}
}
}
&.style2 {
table {
color: @body-color;
border: 0;
background: @white-color;
tr {
border-bottom: none;
&:nth-child(odd) {
background: #f2f7ff;
}
th {
padding: 14px 10px;
background: @secondary-color;
}
td {
padding: 11px 10px;
}
}
}
}
&.style3 {
table {
color: @body-color;
border: 0;
background: #fff;
box-shadow: 0 0 20px rgba(0,0,0,0.04);
tr {
border-bottom: 1px solid #f9f9f9;
th {
padding: 20px 15px;
}
td {
padding: 15px;
&.dark {
color: @title-color;
}
&:first-child {
padding-left: 30px;
}
}
&:last-child {
border-bottom: none;
}
}
}
.bracket-btn {
a {
display: inline-block;
color: @title-color;
text-transform: capitalize;
font-weight: 500;
border-bottom: 1px solid @primary-color;
&:hover {
color: @primary-color;
}
}
i {
margin-left: 5px;
}
}
}
&.inner-style {
table {
color: @body-color;
border: 0;
background: @white-color;
tr {
border-bottom: none;
&:nth-child(odd) {
background: #f2f7ff;
}
th {
padding: 20px 15px;
background: @secondary-color;
}
td {
padding: 20px 15px;
}
}
}
}
&.no-overflow {
table {
display: inline-table;
overflow: hidden;
}
}
&.gaps {
padding: 26px 15px;
}
}

/* ------------------------------------
18. Team Section CSS
-------------------------------------*/
.rs-team {
&.style1 {
.player-item {
position: relative;
.player-img {
img {
border-radius: 4px 4px 6px 6px;
}
}
.person-details {
padding: 20px 25px;
position: absolute;
content: '';
bottom: 0;
left: 0;
width: 100%;
transition: @transition;
min-height: 80px;
.player-title {
font-size: 15px;
text-align: left;
overflow: hidden;
text-transform: uppercase;
margin: 0 0 10px;
padding-bottom: 2px;
transition: .4s;
margin-bottom: 0;
position: relative;
z-index: 9;
.squad-numbers {
font-size: 55px;
line-height: 60px;
color: @primary-color;
float: left;
padding-right: 16px;
}
a {
padding-top: 4px;
display: inline-block;
font-size: 22px;
font-weight: 600;
padding-bottom: 5px;
color: @title-color;
&:hover {
color: @primary-color;
}
}
.player-position {
display: block;
font-size: 15px;
font-weight: 400;
line-height: 17px;
color: @body-color;
text-transform: capitalize;
}
}
&:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: #eff4fd;
color: #fff;
opacity: 1;
top: 0;
left: 0;
z-index: 0;
border-radius: 0 0 4px 4px;
}
}
}
&.modify-style {
.player-item {
.player-img {
img {
border-radius: 4px 4px 6px 6px;
}
}
.person-details {
.player-title {
color: @white-color;
.squad-numbers {
color: @primary-color;
}
a {
color: @white-color;
&:hover {
color: @white-color;
}
}
.player-position {
color: @white-color;
}
}
&:after {
position: unset;
content: unset;
}
}
&:after {
position: absolute;
content: "";
width: 100%;
height: 50%;
left: 0;
bottom: 0;
display: block;
background-image: linear-gradient(to top,rgba(0,0,0,.85) 30%,rgba(255,255,255,0) 70%);
}
}
.owl-controls {
.owl-nav {
position: absolute;
content: '';
right: 30px;
bottom: 30px;
z-index: 1;
.owl-prev,
.owl-next {
display: inline;
i {
width: 30px;
height: 30px;
line-height: 27px;
color: @primary-color;
border-radius: 50%;
text-align: center;
border: 1.5px solid @primary-color;
background: transparent;
transition: @transition;
opacity: 0.5;
font-size: 20px;
&:hover {
opacity: 1;
}
&.fa-angle-left:before {
margin-right: 3px;
}
}
}
.owl-prev {
margin-right: 10px;
}
}
}
}
}
&.style2 {
.player-item {
position: relative;
.person-details {
padding: 12px 12px 0 18px;
position: absolute;
content: '';
bottom: 0;
left: 0;
width: 100%;
transition: @transition;
min-height: 80px;
.player-title {
font-size: 15px;
text-align: left;
overflow: hidden;
text-transform: capitalize;
transition: @transition;
margin-bottom: 0;
position: relative;
z-index: 9;
.squad-numbers {
font-size: 55px;
line-height: 55px;
color: @primary-color;
float: left;
padding-right: 16px;
}
a {
display: inline-block;
font-size: 18px;
font-weight: 600;
color: @white-color;
&:hover {
color: @primary-color;
}
}
.player-position {
display: block;
font-size: 12px;
font-weight: 400;
line-height: 17px;
color: @white-color;
text-transform: uppercase;
}
}
&:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: @secondary-color;
opacity: 0.8;
top: 0;
left: 0;
z-index: 0;
}
}
}
&.modify-style {
.player-item {
.player-img {
img {
border-radius: 4px 4px 6px 6px;
}
}
.person-details {
.player-title {
color: @white-color;
.squad-numbers {
color: @primary-color;
}
a {
color: @white-color;
&:hover {
color: @white-color;
}
}
.player-position {
color: @white-color;
}
}
&:after {
position: unset;
content: unset;
}
}
&:after {
position: absolute;
content: "";
width: 100%;
height: 50%;
left: 0;
bottom: 0;
display: block;
background-image: linear-gradient(to top,rgba(0,0,0,.85) 30%,rgba(255,255,255,0) 70%);
}
}
.owl-controls {
.owl-nav {
position: absolute;
content: '';
right: 30px;
bottom: 30px;
z-index: 1;
.owl-prev,
.owl-next {
display: inline;
i {
width: 30px;
height: 30px;
line-height: 27px;
color: @primary-color;
border-radius: 50%;
text-align: center;
border: 1.5px solid @primary-color;
background: transparent;
transition: @transition;
opacity: 0.5;
font-size: 20px;
&:hover {
opacity: 1;
}
&.fa-angle-left:before {
margin-right: 3px;
}
}
}
.owl-prev {
margin-right: 10px;
}
}
}
}
}
&.style3 {
.single-team {
.team-img {
position: relative;
overflow: hidden;
a {
img {
transition: @transition;
}
}
.team-social {
position: absolute;
bottom: 0;
right: -50px;
opacity: 0;
padding: 10px 0;
background: @primary-color;
width: 50px;
z-index: 2;
text-align: center;
transition: @transition;
a {
color: @title-color;
display: block;
padding: 6px 8px;
transition: all 0.3s;
&:hover {
color: @white-color;
}
&:last-child {
margin-right: 0;
}
}
}
}
.team-item-text {
.team-details {
padding: 20px;
text-transform: capitalize;
background: #fff;
box-shadow: 0 5px 20px rgba(34, 34, 34, 0.1);
z-index: 1;
position: relative;
text-align: center;
.team-name {
font-weight: 600;
text-transform: uppercase;
font-size: 22px;
margin: 0;
a {
color: #232023;
&:hover {
color: @primary-color;
}
}
}
}
}
&:hover {
.team-img {
a {
img {
opacity: 0.8;
}
}
.team-social {
right: 0;
opacity: 1;
}
}
}
}
}
&.style4 {
.team-grid{
overflow: hidden;
position: relative;
.team-image {
border-bottom: 2px solid @secondary-color;
}
.text-bottom {
text-align: center;
background: @secondary-color;
padding: 20px 0 16px;
position: absolute;
content: '';
width: 100%;
left: 0;
bottom: -130px;
z-index: 1;
transition: @transition;
h4.person-name {
font-size: 22px;
text-transform: uppercase;
font-weight: 600;
margin-bottom: 2px;
a {
color: @white-color;
&:hover {
color: @primary-color;
}
}
}
span.designation {
padding: 0 0 15px;
line-height: 20px;
color: @white-color;
}
}
.social-links {
ul {
li {
display: inline;
margin-right: 10px;
a {
text-align: center;
color: @white-color;
&:hover {
color: @primary-color;
}
}
&:last-child {
margin: 0;
}
}
}
}
&:hover {
.text-bottom {
bottom: 0;
}
}
}
}
&.style5 {
.team-grid{
overflow: hidden;
position: relative;
.team-image {
margin-bottom: 100px;
img {
transition: @transition;
border-radius: 5px 5px 0 0;
}
}
.text-bottom {
text-align: center;
border-bottom: 3px solid @primary-color;
border-radius: 0 0 5px 5px;
background: @white-color;
padding: 15px 0 10px 0;
position: absolute;
content: '';
width: 100%;
left: 0;
bottom: 0;
z-index: 1;
transition: @transition;
h4.person-name {
font-size: 20px;
font-weight: 600;
margin-bottom: 10px;
a {
color: @primary-color;
&:hover {
color: @title-color;
}
}
}
span.designation {
display: block;
color: @title-color;
transition: @transition;
}
}
.social-links {
margin-top: 20px;
padding-bottom: 10px;
transition: @transition;
margin-bottom: -50px;
opacity: 0;
ul {
li {
display: inline;
padding: 0 5px;
a {
text-align: center;
color: @title-color;
&:hover {
color: @white-color;
}
}
}
}
}
&:hover {
.team-image {
img {
transform: scale(1.1);
}
}
.text-bottom {
background: @primary-color;
.person-name {
a {
color: @title-color;
&:hover {
color: @white-color;
}
}
}
.social-links {
margin-bottom: 0;
opacity: 1;
}
}
}
}
}
&.style6 {
.player-item {
.player-img {
border-radius: 3px 3px 0 0;
}
.detail-wrap {
padding: 17px 20px;
background: @title-color;
position: relative;
.player-title {
.title {
font-size: 20px;
font-weight: 500;
margin-bottom: 0;
a {
color: @white-color;
&:hover {
color: @primary-color;
}
}
}
.player-position {
font-size: 15px;
display: block;
color: @primary-color;
text-transform: capitalize;
}
}
.squad-numbers {
position: absolute;
content: '';
right: 25px;
top: -12px;
font-size: 55px;
font-weight: 500;
color: @primary-color;
}
}
}
}
&.swiper-slider {
.swiper-container {
position: relative;
.swiper-pagination {
bottom: 0;
top: unset;
height: 5px;
border-radius: 3px;
background: #555555;
overflow: hidden;
span {
background: @primary-color;
border-radius: 3px;
}
}
.slider-nav {
.nav {
display: inline;
cursor: pointer;
position: absolute;
content: '';
top: 50%;
transform: translateY(-50%);
z-index: 1;
transition: @transition;
opacity: 0;
i {
&:before {
color: @title-color;
width: 40px;
height: 40px;
line-height: 40px;
font-size: 20px;
border-radius: 100%;
border: 1px solid @primary-color;
background: @primary-color;
display: inline-block;
text-align: center;
transition: @transition;
}
}
&.prev {
left: 0;
}
&.next {
right: 0;
}
&:hover {
i {
&:before {
color: @white-color;
}
}
}
}
}
&:hover {
.slider-nav {
.nav {
opacity: 1;
}
}
}
}
}
}

/* ------------------------------------
19. Team Single Section CSS
-------------------------------------*/
.rs-single-team {
.player-image {
.name-box {
background: @white-color;
padding: 31px 31px 35px 120px;
position: relative;
border-top: 5px solid @primary-color;
.player-name {
font-size: 22px;
line-height: 28px;
margin-bottom: 17px;
}
.player-position {
display: block;
font-weight: 700;
font-size: 16px;
text-transform: uppercase;
}
.club {
display: block;
text-transform: capitalize;
}
.social-icon {
margin-top: 10px;
li {
display: inline-block;
margin-right: 8px;
a {
color: @primary-color;
}
&:last-child {
margin-right: 0;
}
}
}
.squad-no {
position: absolute;
top: 55px;
left: 19px;
font-size: 80px;
font-weight: 700;
color: @primary-color;
}
}
}
.player-detail {
background: @white-color;
border-top: 5px solid @primary-color;
padding: 32px;
.title {
font-size: 22px;
margin-bottom: 17px;
padding-bottom: 20px;
border-bottom: 1px solid #ddd;
}
table {
width: 100%;
tr {
td {
padding: 5px 10px;
&:first-child {
font-weight: 600;
}
}
}
}
}
}

/* ------------------------------------
20. Breaking News Section CSS
-------------------------------------*/
.rs-breaking-news {
position: relative;
.sl-wrap {
.breaking-title {
background-image: linear-gradient(to right, @primary-color 0%, #ea950b 51%, @primary-color 100%);
background-size: 200% auto;
display: inline-block;
color: @title-color;
text-align: left;
padding: 20px;
font-weight: bold;
float: left;
}
.item {
padding: 20px;
a {
color: @body-color;
&:hover {
color: @primary-color;;
}
}
}
.owl-stage-outer {
width: 70%;
}
.owl-controls {
.owl-nav {
position: absolute;
content: '';
right: 0;
top: 50%;
transform: translateY(-50%);
z-index: 1;
.owl-prev,
.owl-next {
display: inline;
i {
color: @primary-color;
transition: @transition;
font-size: 15px;
}
}
.owl-prev {
margin-right: 10px;
}
}
}
}
}

/* ------------------------------------
21. Counter Section CSS
-------------------------------------*/
.rs-counter {
&.style1 {
.rs-counter-list {
.counter-number {
margin: 0 0 20px;
font-size: 60px;
&:after {
content: '+';
margin-left: 5px;
}
}
.counter-text {
margin: 0;
font-size: 22px;
font-weight: 500;
}
}
}
}

/* ------------------------------------
22. Gallery Section CSS
-------------------------------------*/
.rs-gallery {
&.style1 {
.gallery-grid {
position: relative;
overflow: hidden;
.view-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
visibility: hidden;
color: @white-color;
text-align: center;
transition: @transition;
z-index: 2;
border-radius: 100%;
i {
display: block;
&:before {
font-size: 45px;
}
}
}
.gallery-title {
position: absolute;
content: '';
left: 0;
bottom: -55px;
background: @secondary-color;
padding: 10px 0;
color: @white-color;
font-size: 18px;
font-weight: 600;
text-align: center;
width: 100%;
z-index: 20;
transition: @transition;
}
&:after {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: @secondary-color;
content: "";
transition: @transition;
visibility: hidden;
opacity: 0;
z-index: 1;
}
&:hover {
.view-btn {
visibility: visible;
opacity: 1;
}
.gallery-title {
bottom: 0;
}
&:after {
opacity: .5;
visibility: visible;
}
}
}
}
}

/* ------------------------------------
23. Champion Award Section CSS
-------------------------------------*/
.rs-awards {
.item {
.award-wrap {
.champion-logo {
img {
max-height: 260px;
width: auto;
margin: 0 auto;
}
}
.champion-details {
margin-top: 24px;
text-align: center;
position: relative;
padding-bottom: 30px;
.year-details {
text-align: center;
h3 {
display: block;
margin-bottom: 0;
font-weight: 600;
font-size: 22px;
position: relative;
z-index: 99;
text-transform: uppercase;
color: @white-color;
}
}
.champion-no {
font-size: 40px;
margin-top: 15px;
text-align: center;
padding: 5px 15px;
color: @primary-color;
display: inline-block;
border-radius: 3px;
font-weight: 900;
position: relative;
z-index: 99;
}
&:after {
position: absolute;
content: "";
width: 100%;
height: 220%;
left: 0;
bottom: 0;
display: block;
background-image: linear-gradient(to top,rgba(0,0,0,.3) 20%,rgba(255,255,255,0) 80%);
background-image: -webkit-linear-gradient(to top,rgba(0,0,0,.3) 20%,rgba(255,255,255,0) 80%);
background-image: -moz-linear-gradient(to top,rgba(0,0,0,.3) 20%,rgba(255,255,255,0) 80%);
background-image: -ms-linear-gradient(to top,rgba(0,0,0,.3) 20%,rgba(255,255,255,0) 80%);
background-image: -o-linear-gradient(to top,rgba(0,0,0,.3) 20%,rgba(255,255,255,0) 80%);
border-radius: 0 0 4px 4px;
}
}
}
}
}

/* ------------------------------------
24. Top Products Section CSS
-------------------------------------*/
.rs-products {
.shop-guide {
.sorting {
select {
padding: 10px;
border: 1px solid #ced4da;
border-radius: 5px;
outline: none;
color: @body-color;
}
}
}
.products {
background: @gray-color;
text-align: center;
padding: 30px;
position: relative;
.product-img {
padding-bottom: 30px;
img {
width: auto;
margin: 0 auto;
}
}
.product-title {
padding-top: 5px;
padding-bottom: 5px;
margin-bottom: 0;
font-size: 18px;
text-transform: uppercase;
a {
color: @title-color;
&:hover {
color: @primary-color;
}
}
}
.product-price {
font-size: 18px;
color: @primary-color;
font-weight: 500;
}
.cart-button {
position: absolute;
bottom: 30%;
right: 20px;
opacity: 0;
transform: scaleY(0);
transition: @transition;
a {
color: @title-color;
i {
&:before {
font-size: 27px;
}
}
}
}
&:hover {
.cart-button {
opacity: 1;
transform: scaleY(1);
bottom: 30px;
}
}
}
}

/* ------------------------------------
25. Cart Section CSS
-------------------------------------*/
.rs-cart {
.cart-wrap {
table.cart-table {
border: 1px solid rgba(0,0,0,.1);
width: 100%;
border-collapse: collapse;
td, th {
padding: 25px;
text-align: center;
border: 1px solid #ccc;
}
th {
border: none;
font-size: 18px;
padding: 25px;
text-align: center;
vertical-align: middle;
font-weight: 700;
}
td {
border-bottom: none;
border-left: none;
border-right: none;
border-top: 1px solid #e6e6e6;
}
.product-remove {
a {
margin: 0 auto;
color: @title-color;
display: block;
border-radius: 100%;
border: 1px solid #ddd;
font-size: 16px;
font-weight: 400;
height: 20px;
width: 20px;
line-height: 17px;
text-align: center;
&:hover {
background: #ff0000;
color: @white-color;
}
}
}
.product-thumbnail {
min-width: 32px;
a {
img {
width: 80px;
height: auto;
}
}
}
.product-name {
a {
color: @body-color;
font-weight: 700;
&:hover {
color: @primary-color;
}
}
}
.product-price {
font-weight: 700;
}
.product-quantity {
input {
border: 1px solid #e6e6e6;
border-radius: 4px;
padding: 0 0 0 10px;
max-width: 65px;
margin: 0 auto;
outline: none;
}
}
.action {
.coupon {
float: left;
input {
box-sizing: border-box;
border: 1px solid #d3ced2;
padding: 6px 6px 5px;
margin: 0 4px 0 0;
outline: none;
width: 320px;
border-radius: 4px;
height: 51px;
margin-right: 20px;
text-align: left;
padding-left: 22px;
}
}
}
}
}
.cart-collaterals {
width: 100%;
overflow: hidden;
.cart-totals {
float: right;
width: 48%;
.title {
font-weight: 700;
color: @body-color;
text-transform: capitalize;
}
table.cart-total-table {
text-align: left;
width: 100%;
border-collapse: collapse;
border-radius: 5px;
tr {
border-top: 1px solid rgba(0,0,0,.1);
th {
font-size: 18px;
font-weight: 700;
}
td,th {
padding: 30px 10px;
}
}
}
}
}
}

/* ------------------------------------
26. Checkout Section CSS
-------------------------------------*/
.rs-checkout {
.checkout-title {
margin-bottom: 30px;
h3 {
font-size: 26px;
margin: 0;
}
}
.coupon-toggle {
.accordion {
.card {
border: unset;
border-top: 3px solid @primary-color;
border-radius: 0;
.card-header {
border: none;
margin: 0;
border-radius: unset;
.card-title {
margin: 0;
span {
i {
margin-right: 10px;
}
}
button {
background: unset;
border: none;
color: @secondary-color;
transition: @transition;
outline: none;
cursor: pointer;
&:hover {
color: @primary-color;
}
}
}
}
.card-body {
border: 1px solid #d3ced2;
padding: 20px 20px 50px 20px;
margin-top: 2em;
text-align: left;
.coupon-code-input {
width: 47%;
float: left;
margin-right: 50px;
input {
width: 100%;
height: 55px;
outline: none;
padding: 10px 18px;
color: @body-color;
border: 1px solid rgba(54, 54, 54, 0.1);
}
}
}
}
}
}

.full-grid {
margin-top: 25px;
.form-content-box {
margin-bottom: 50px;
.form-group {
label {
line-height: 2;
display: block;
margin-bottom: 5px;
font-weight: 600;
}
select {
color: #666666;
opacity: .5;
padding-left: 8px;
padding-right: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
border: 1px solid #ccc;
border-radius: 0;
height: 45px;
line-height: 45px;
cursor: pointer;
width: 100%;
outline: none;
}
textarea {
height: 4em;
line-height: 1.5;
display: block;
box-shadow: none;
width: 100%;
border: 1px solid rgba(54, 54, 54, 0.1);
padding: 10px 18px;
margin: 0;
outline: none;
}
.form-control-mod {
border: 1px solid rgba(54, 54, 54, 0.1);
height: 45px;
padding: 10px 18px;
width: 100%;
margin: 0;
outline: none;
line-height: normal;
border-radius: unset;
&.margin-bottom {
margin-bottom: 10px !important;
}
}
}
}
.ordered-product {
table {
width: 100%;
tr {
th {
border: 1px solid #ccc;
padding: 9px 12px;
}
td {
border: 1px solid #ccc;
padding: 6px 12px;
}
}
}
}

.payment-method {
.top-area {
border-bottom: 1px solid #d3ced2;
.payment-co {
margin-bottom: 20px;
span {
font-weight: 600;
margin-right: 10px;
}
img {

}
}
.p-msg {
position: relative;
box-sizing: border-box;
width: 100%;
padding: 1em;
margin: 1em 0 2em;
font-size: .92em;
border-radius: 2px;
line-height: 1.5;
background-color: #f9f9f9;
&:before {
content: '';
display: block;
border: 1em solid #f9f9f9;
border-right-color: transparent;
border-left-color: transparent;
border-top-color: transparent;
position: absolute;
top: -.75em;
left: 0;
margin: -1em 0 0 2em;
}
}
}
}
}
}

/* ------------------------------------
27. My Account Section CSS
-------------------------------------*/
.rs-my-account {
.login-side,
.recover-psw-side {
padding: 30px 40px;
form.login-form {
&.border-style {
border: 1px solid rgba(54, 54, 54, 0.1);
padding: 20px;
border-radius: 5px;
}
.input-label {
font-weight: 600;
margin-bottom: 15px;
span {
color: #ff0000;
font-weight: 700;
font-size: 18px;
}
}
.input-control {
width: 100%;
display: block;
border: 1px solid rgba(54, 54, 54, 0.1);
height: 45px;
outline: none;
padding: 10px 18px;
line-height: 50px;
margin-bottom: 15px;
border-radius: 30px;
}
.login-control {
margin-bottom: 15px;
ul {
li {
margin-right: 15px;
display: inline;
.readon {
padding: 0 25px;
height: 40px;
font-size: 15px;
outline: none;
line-height: 40px !important;
}
&:last-child {
margin-right: 0;
}
}
}
}
}
.recover-info {
margin-bottom: 50px;
}
}
.regi-side {
padding: 30px 40px;
background: #f9f9f9;
border-radius: 10px;
form.register-form {
&.border-style {
border: 1px solid rgba(54, 54, 54, 0.1);
padding: 20px;
border-radius: 5px;
}
label.input-label {
font-weight: 600;
margin-bottom: 15px;
span.req {
color: red;
font-weight: 700;
font-size: 17px;
}
}
input.custom-placeholder {
width: 100%;
display: block;
border: 1px solid rgba(54, 54, 54, 0.1);
height: 45px;
outline: none;
padding: 10px 18px;
line-height: 50px;
margin-bottom: 15px;
border-radius: 30px;
}
.margin-space {
margin-bottom: 25px;
}
.gender-detect {
label {
span {
margin-left: 5px;
margin-right: 5px;
}
&:last-child {
span {
margin-right: 0;
}
}
}
}
.date {
padding: 7px;
color: @body-color;
border-radius: 3px;
outline: unset;
border: 1px solid #e4e4e4;
margin-right: 15px;
}
.checkbox {
margin-bottom: 25px;
}
}
}
}

/* ------------------------------------
28. Our Poll Section CSS
-------------------------------------*/
.rs-our-poll {
background: url(images/background/our-poll-bg.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
form {
padding: 40px 25px 45px;
.title {
font-size: 18px;
line-height: 28px;
font-weight: 500;
margin-bottom: 17px;
color: @white-color;
}
label {
color: @white-color;
display: flex;
align-items: center;
font-weight: 500;
cursor: pointer;
transition: @transition;
&:hover {
color: @primary-color;
}
input {
margin-right: 15px;
outline: none;
}
}
ul {
li {
display: inline;
margin-right: 10px;
button {
border-radius: 3px;
border: none;
padding: 0 16px;
height: 34px;
background: @primary-color;
color: @title-color;
outline: none;
cursor: pointer;
transition: @transition;
&:hover {
background: lighten(@primary-color, 10%);
}
}
&:last-child {
margin: 0;
}
}
}
}
}

/* ------------------------------------
29. Match Fixture Section CSS
-------------------------------------*/
.rs-match-fixture {
.match-list {
table {
text-align: center;
width: 100%;
tr {
td {
padding: 15px 5px;
&.medium-font {
font-weight: 500;
text-transform: uppercase;
}
&.big-font {
color: @primary-color;
font-weight: 500;
text-transform: uppercase;
}
}
&:nth-child(2n) {
td {
background: @white-color;
}
}
}
}
}
&.style2 {
.match-list {
table {
tr {
td {
color: @white-color;
&:nth-child(2n) {
color: @primary-color;
}
}
&:nth-child(2n) {
td {
background: rgba(0,0,0,.1);
}
}
}
}
}
}
}

/* ------------------------------------
30. Subscribe Section CSS
-------------------------------------*/
.rs-subscribe {
padding: 60px 60px 50px;
border-radius: 5px;
margin-bottom: -94px;
position: relative;
z-index: 9;
.subscribe-form {
.title-part {
.title {
font-size: 35px;
margin-bottom: 14px;
text-transform: uppercase;
}
.desc {
font-size: 14px;
}
}
.subscribe-form-fields {
position: relative;
input {
display: inline-block;
padding: 20px;
border: none;
height: 60px;
outline: none;
&.news-email {
width: 100%;
background: @white-color;
border-radius: 5px;
font-size: 14px;
color: @body-color;
}
&.news-submit {
position: absolute;
right: 0;
padding: 0 30px;
background-image: linear-gradient(to right,@primary-color 0%,#ea950b 51%,@primary-color 100%);
background-size: 200% auto;
color: @title-color;
border-radius: 0 5px 5px 0;
transition: @transition;
cursor: pointer;
&.solid {
background: @primary-color;
&:hover {
background: darken(@primary-color, 10%);
}
}
&:hover {
background-position: right center;
}
}
}
}
}
&.shadow-style {
box-shadow: 0 0 20px 5px rgba(0,0,0,0.04);
}
}

/* ------------------------------------
31. Sponsor Logo Section CSS
-------------------------------------*/
.rs-sponsor {
.logos {
a {
img {
filter: grayscale(100%);
opacity: .6;
width: 70%;
&:hover {
filter: grayscale(0);
opacity: 1;
}
}
}
}
&.normal-mood {
.logos {
a {
img {
filter: unset;
opacity: 1;
}
}
}
}
}

/* ------------------------------------
32. Sponsor Logo Inner Section CSS
-------------------------------------*/
.rs-sponsor-inner {
.sponsor-item {
text-align: center;
img {
transition: @transition;
filter: grayscale(0);
opacity: 1;
border: 1px solid rgba(0,0,0,.05);
padding: 0 24px;
box-shadow: 0 0 30px rgba(0,0,0,.07);
border-radius: 5px;
cursor: pointer;
&:hover {
opacity: 0.9;
filter: grayscale(9);
}
}
}
}

/* ------------------------------------
33. Single Club Section CSS
-------------------------------------*/
.rs-single-club {
.club-details {
.team-info-list {
overflow: hidden;
li {
margin: 0 0 12px;
width: 33.333%;
float: left;
strong {
display: block;
font-weight: 700;
font-size: 18px;
color: @secondary-color;
}
}
}
}
.rs-count {
.rs-counter-list {
.counter-number {
font-size: 24px;
width: 120px;
height: 120px;
margin: 0 0 15px;
border-top: 4px solid @primary-color;
border-bottom: 4px solid #ddd;
line-height: 120px;
text-align: center;
border-radius: 50%;
}
.counter-text {
font-size: 18px;
margin: 0;
}
}
}
.club-videos {
.video-wrap {
.popup-videos {
position: relative;
display: block;
img {
width: 100%;
}
i {
position: absolute;
content: '';
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-size: 40px;
color: @white-color;
z-index: 1;
}
&:after {
position: absolute;
background: rgba(0,0,0,.5);
content: '';
left: 0;
top: 0;
width: 100%;
height: 100%;
}
}

}
}
}

/* ------------------------------------
34. Footer Section CSS
-------------------------------------*/
.rs-footer {
/*background: url(images/background/footer-bg.jpg);*/
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
.footer-bootom {
padding: 15px 0;
background: @secondary-color;
.copyright {
p {
margin: 0;
color: @white-color;
font-size: 14px;
a {
color: @primary-color;
&:hover {
color: @white-color;
}
}
}
}
.footer-share {
ul {
li {
display: inline-block;
margin-right: 1px;
a {
font-size: 13px;
display: block;
width: 30px;
height: 30px;
border-radius: 50%;
line-height: 32px;
text-align: center;
color: @secondary-color;
transition: @transition;
background-color: @white-color;
&:hover {
background: @primary-color;
}
}
&:last-child {
margin: 0;
}
}
}
}
}
&.dark-mode {
background: url(images/background/footer-dark-bg.jpg);
position: relative;
.footer-bootom {
position: absolute;
content: '';
left: 0;
bottom: 0;
width: 100%;
background: rgba(0,0,0,0.6);
.footer-share {
ul {
li {
a {
color: @title-color;
background: @white-color;
&:hover {
color: @primary-color;
}
}
}
}
}
}
}
}

/* -------------------------------------
35. Error Section CSS
--------------------------------------*/
.rs-page-error{
background: url(images/404.jpg);
background-repeat: no-repeat;
background-size: cover;
padding: 127px 0 145px 0;
.error-text {
color: @secondary-color;
text-align: center;
.error-code {
font-size: 110px;
line-height: 110px;
font-weight: 800;
margin-bottom: 5px;
color: @secondary-color;
}
h3.error-message {
color: @body-color;
font-size: 24px;
line-height: 24px;
font-weight: 600;
}
form {
position: relative;
max-width: 400px;
margin: 0 auto;
input {
border: 1px solid #ddd;
color: #444444;
padding: 0 17px;
height: 50px;
line-height: 50px;
width: 100%;
border-radius: 5px;
outline: none;
margin-bottom: 30px;
}
button {
background: transparent;
border: medium none;
color: #666666;
padding: 0 16px;
height: 48px;
line-height: 48px;
position: absolute;
right: 0px;
top: 1px;
z-index: 10;
font-size: 20px;
outline: none;
cursor: pointer;
border-radius: 0 5px 5px 0;
transition: @transition;
&:hover {
background: @secondary-color;
color: @white-color;
}
}
}
}
}

/*----------------------------------------
36. ScrollUp Section CSS
----------------------------------------*/
#scrollUp {
text-align: center;
bottom: 40px;
cursor: pointer;
position: fixed;
right: 40px;
z-index: 999;
background: @primary-color;
color: @title-color;
border-radius: 50%;
width: 40px;
line-height: 40px;
font-size: 20px !important;
height: 40px;

transition: @transition;
box-shadow: 0px 0px 2px rgba(0,0,0,.4);
&:hover {
opacity: 0.8;
}
}

/*----------------------------------------
37. Preloader Section CSS
----------------------------------------*/
.loading {
z-index: 99999;
position: fixed;
top: 0;
width: 100%;
height: 100%;
background: @white-color;
.rs-loader {
margin: 0 auto;
width: 120px;
height: 185px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
.rs-shadow {
position: absolute;
width: 100%;
height: 10px;
background-color: rgba(175, 175, 175, 0.3);
bottom: 0;
border-radius: 100%;
transform: scaleX(.8);
opacity: .6;
animation: shadowScale 1s linear infinite;
}
}
.rs-gravity {
width: 80px;
height: 80px;
animation: bounce 1s cubic-bezier(0.68, 0.35, 0.29, 0.54) infinite;
margin: 0 auto;
}
.rs-ball {
width: 80px;
height: 80px;
background-image: url('images/ball.svg');
background-size: cover;
animation: roll 1s linear infinite;
}
}


@keyframes roll {
0% {}
100% { transform: rotate(360deg) }
}
@keyframes bounce {
0% {}
50% { transform: translateY(100px) }
100% {}
}
@keyframes shadowScale {
0% {}
50% { transform: scaleX(1); opacity: .8;}
100% {}
}

.logo_principal{
margin-right:20px!important;
}

@media only screen and (max-width: 600px) {
#tituloNoticia {
margin-bottom: -2.5em !important;
}
#nClub{
font-size: 0.7em !important;
}
}