:root { --wallpaper: #fff; --first-color: #fbca1b; --second-color: #fff; --second-color-text: #000; --thirth-color: #fff; } @font-face { font-family: 'DINCondensedBold'; src: url('../../fonts/DINCondensedBold.ttf'); } @font-face { font-family: 'Frutiger Light'; src: url('../../fonts/Frutiger/Frutiger-Light.ttf'); } @media screen and (min-width: 1201px) { html {scroll-behavior: smooth; overflow-x: hidden;} body {display: grid; grid-gap: 0%; grid-template-columns: repeat(19, minmax(0, 1fr)); align-items: start; justify-content: start; width: 100%; font-family: 'DINCondensedBold'; font-style: normal; letter-spacing: 0.15em; background-color: #000; overflow-x: hidden;} * {margin: 0; padding:0; box-sizing: border-box; /*white-space: nowrap;*/ text-decoration: none;} h1 {font-size: 6em; line-height: 1.4em; letter-spacing: 0.3em; font-weight: 700; color: var(--first-color);} h2 {font-size: 6em; line-height: 1.4em; letter-spacing: 0.3em; font-weight: 700; color: var(--first-color);} h3 {font-size: 1.2em; line-height: 1.2em; letter-spacing: 0.1em; color: #000;} h4 {font-size: 0.7em; margin-bottom: 1em; color: #000;} p {font-size: 0.9em; letter-spacing: 0.1em; line-height: 1.3em; color: #555;} strong {font-weight: 700;} #menumain {grid-column: 1 / 20; position: fixed; display: none; flex-direction: row; align-items: center; justify-content: space-around; width: 100%; padding: 2% 0 2% 0; top: 0; left: 0; background-color: #000; z-index: 6;} #menumain .logo {position: relative; display: flex; align-items: center; justify-content: center; width: 20%; } #menumain .logo img {width: 100%;} #menumain .menu {display: block; display: flex; gap: 0.5%; align-items: center; justify-content: right; width: 60%;} #menumain .menu a {padding: 1%; font-size: 1.3em; font-weight: 700; background-color: var(--second-color); color: #000;} #menumain .menu a {background-color: #fff; color: #000;} #menumain .menu a:hover {background-color: var(--first-color); color: #fff;} #menumain .menu a:hover {background-color: #000; color: #fff;} #menumainTransparent {grid-column: 1 / 20; position: fixed; display: flex; flex-direction: row; align-items: center; justify-content: space-around; width: 100%; padding: 2% 0 2% 0; top: 0; background-color: #000; left: 0; z-index: 6;} #menumainTransparent .logo {position: relative; display: flex; align-items: center; justify-content: center; width: 20%; } #menumainTransparent .logo img {width: 100%;} #menumainTransparent .menu {display: block; display: flex; gap: 0.5%; align-items: center; justify-content: right; width: 60%;} #menumainTransparent .menu a {padding: 1%; font-size: 1.3em; font-weight: 700; background-color: var(--second-color); color: #000;} #menumainTransparent .menu a {background-color: #fff; color: #000;} #menumainTransparent .menu a:hover {background-color: var(--second-color); color: #fff;} #menumain .menu a:hover {background-color: #000; color: #fff;} #menuMobile {grid-column: 1 / 20; position: fixed; display: none; flex-direction: column; align-items: center; justify-content: center; width: 100%; padding: 2% 0 25% 0; top: 0; left: 0; background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(145,145,145,0) 100%); z-index: 6;} header {grid-column: 1 / 20; display: flex; width:100%; height: 20vh; flex-direction: column; align-items: start; justify-content: center; overflow: hidden;} main {grid-column: 1 / 20; display: flex; width:100%; margin-top: 5%; flex-direction: column; align-items: center; justify-content: center;} footer {grid-column: 1 / 20; display: flex; flex-direction: column; align-items: center; justify-content: center;} #headerContent {display: none; width: 100%; align-items: center; justify-content: center;} #headerContent .sliderbasic {display: block; width: 100%; height: 40vh;} #headerContent .sliderbasic .container {position: relative; float: left; width: 100%; height: 100%;} #headerContent .sliderbasic .container .mask {position: relative; display: block; width: 100%; height: 100%; overflow: hidden; z-index: 3;} #headerContent .sliderbasic .container .mask .carrousel {position: relative; display: flex; gap: 0%; flex-direction: row; align-items: flex-start; justify-content: flex-start; width: 100%; height: 100%; z-index: 4;} #headerContent .sliderbasic .container .mask .carrousel .slide {display: block; width: 100%; height: 100%; z-index: 5;} #headerContent .sliderbasic .container .mask .carrousel .slide .post {position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; align-items: center; justify-content: center; background-position: center center; background-size: cover; z-index: 5;} #headerContent .sliderbasic .container .mask .carrousel .slide .post img.wallpaperImg {position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover; object-position: center; opacity: 0.2; z-index: 6;} #headerContent .sliderbasic .container .mask .carrousel .slide .post img.logo {display: block; width: 20%; margin-top: 5%; z-index: 9;} #headerContent .sliderbasic .container .mask .carrousel .slide .post h2 {display: block; font-size: 5em; margin-top: 1%; color: #fff; z-index: 8;} #headerContent .sliderbasic .container .mask .carrousel .slide .post h3 {display: block; font-size: 1.4em; color: #fff; z-index: 7;} #headerContent .sliderbasic .container .mask .carrousel .slide .post .gradient {position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); z-index: 7;} #headerContent .sliderbasic .container .mask .carrousel .slide .post .rrss {position: absolute; top: 5%; left: 5%; display: flex; flex-direction: row; margin-top: -2%; gap: 4%; align-items: center; justify-content: center; z-index: 10;} #headerContent .sliderbasic .container .mask .carrousel .slide .post .rrss a {display: block; width: 2vw; height: 2vw; z-index: 11;} #headerContent .sliderbasic .container .mask .carrousel .slide .post .rrss a img {display: block; width: 100%; z-index: 12;} #mainContent {display: flex; width: 100%; align-items: center; justify-content: center;} } @media screen and (min-width: 901px) and (max-width: 1201px) { html {scroll-behavior: smooth; overflow-x: hidden;} body {display: grid; grid-gap: 0%; grid-template-columns: repeat(19, minmax(0, 1fr)); align-items: start; justify-content: start; width: 100%; font-family: 'DINCondensedBold'; font-style: normal; letter-spacing: 0.15em; background-color: #000; overflow-x: hidden;} * {margin: 0; padding:0; box-sizing: border-box; /*white-space: nowrap;*/ text-decoration: none;} h1 {font-size: 6em; line-height: 1.4em; letter-spacing: 0.3em; font-weight: 700; color: var(--first-color);} h2 {font-size: 6em; line-height: 1.4em; letter-spacing: 0.3em; font-weight: 700; color: var(--first-color);} h3 {font-size: 1.2em; line-height: 1.2em; letter-spacing: 0.1em; color: #000;} h4 {font-size: 0.7em; margin-bottom: 1em; color: #000;} p {font-size: 0.9em; letter-spacing: 0.1em; line-height: 1.3em; color: #555;} strong {font-weight: 700;} #menumain {grid-column: 1 / 20; position: fixed; display: none; flex-direction: row; align-items: center; justify-content: space-around; width: 100%; padding: 2% 0 2% 0; top: 0; left: 0; background-color: #000; z-index: 6;} #menumain .logo {position: relative; display: flex; align-items: center; justify-content: center; width: 20%; } #menumain .logo img {width: 100%;} #menumain .menu {display: block; display: flex; gap: 0.5%; align-items: center; justify-content: right; width: 60%;} #menumain .menu a {padding: 1%; font-size: 1.3em; font-weight: 700; background-color: var(--second-color); color: #000;} #menumain .menu a {background-color: #fff; color: #000;} #menumain .menu a:hover {background-color: var(--first-color); color: #fff;} #menumain .menu a:hover {background-color: #000; color: #fff;} #menumainTransparent {grid-column: 1 / 20; position: fixed; display: flex; flex-direction: row; align-items: center; justify-content: space-around; width: 100%; padding: 2% 0 2% 0; top: 0; background-color: #000; left: 0; z-index: 6;} #menumainTransparent .logo {position: relative; display: flex; align-items: center; justify-content: center; width: 20%; } #menumainTransparent .logo img {width: 100%;} #menumainTransparent .menu {display: block; display: flex; gap: 0.5%; align-items: center; justify-content: right; width: 60%;} #menumainTransparent .menu a {padding: 1%; font-size: 1.3em; font-weight: 700; background-color: var(--second-color); color: #000;} #menumainTransparent .menu a {background-color: #fff; color: #000;} #menumainTransparent .menu a:hover {background-color: var(--second-color); color: #fff;} #menumain .menu a:hover {background-color: #000; color: #fff;} #menuMobile {grid-column: 1 / 20; position: fixed; display: none; flex-direction: column; align-items: center; justify-content: center; width: 100%; padding: 2% 0 25% 0; top: 0; left: 0; background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(145,145,145,0) 100%); z-index: 6;} header {grid-column: 1 / 20; display: flex; width:100%; height: 65vh; flex-direction: column; align-items: start; justify-content: center; overflow: hidden;} main {grid-column: 1 / 20; display: flex; width:100%; margin-top: 5%; flex-direction: column; align-items: center; justify-content: center;} footer {grid-column: 1 / 20; display: flex; flex-direction: column; align-items: center; justify-content: center;} #headerContent {display: flex; width: 100%; align-items: center; justify-content: center;} #headerContent .sliderbasic {display: block; width: 100%; height: 40vh;} #headerContent .sliderbasic .container {position: relative; float: left; width: 100%; height: 100%;} #headerContent .sliderbasic .container .mask {position: relative; display: block; width: 100%; height: 100%; overflow: hidden; z-index: 3;} #headerContent .sliderbasic .container .mask .carrousel {position: relative; display: flex; gap: 0%; flex-direction: row; align-items: flex-start; justify-content: flex-start; width: 100%; height: 100%; z-index: 4;} #headerContent .sliderbasic .container .mask .carrousel .slide {display: block; width: 100%; height: 100%; z-index: 5;} #headerContent .sliderbasic .container .mask .carrousel .slide .post {position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; align-items: center; justify-content: center; background-position: center center; background-size: cover; z-index: 5;} #headerContent .sliderbasic .container .mask .carrousel .slide .post img.wallpaperImg {position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover; object-position: center; opacity: 0.2; z-index: 6;} #headerContent .sliderbasic .container .mask .carrousel .slide .post img.logo {display: block; width: 20%; margin-top: 5%; z-index: 9;} #headerContent .sliderbasic .container .mask .carrousel .slide .post h2 {display: block; font-size: 5em; margin-top: 1%; color: #fff; z-index: 8;} #headerContent .sliderbasic .container .mask .carrousel .slide .post h3 {display: block; font-size: 1.4em; color: #fff; z-index: 7;} #headerContent .sliderbasic .container .mask .gradient {position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); z-index: 7;} #headerContent .sliderbasic .container .mask .rrss {display: flex; flex-direction: row; margin-top: -2%; gap: 4%; align-items: center; justify-content: center;z-index: 3; z-index: 10;} #headerContent .sliderbasic .container .mask .rrss a {display: block; width: 2vw; height: 2vw; z-index: 4; z-index: 11;} #headerContent .sliderbasic .container .mask .rrss a img {display: block; width: 100%; z-index: 4; z-index: 12;} #mainContent {display: flex; width: 100%; align-items: center; justify-content: center;} } @media screen and (min-width: 701px) and (max-width: 900px) { html {scroll-behavior: smooth; overflow-x: hidden;} body {display: grid; grid-gap: 0%; grid-template-columns: repeat(19, minmax(0, 1fr)); align-items: start; justify-content: start; width: 100%; font-family: 'DINCondensedBold'; font-style: normal; letter-spacing: 0.15em; background-color: #000; overflow-x: hidden;} * {margin: 0; padding:0; box-sizing: border-box; /*white-space: nowrap;*/ text-decoration: none;} h1 {font-size: 6em; line-height: 1.4em; letter-spacing: 0.3em; font-weight: 700; color: var(--first-color);} h2 {font-size: 6em; line-height: 1.4em; letter-spacing: 0.3em; font-weight: 700; color: var(--first-color);} h3 {font-size: 1.2em; line-height: 1.2em; letter-spacing: 0.1em; color: #000;} h4 {font-size: 0.7em; margin-bottom: 1em; color: #000;} p {font-size: 0.9em; letter-spacing: 0.1em; line-height: 1.3em; color: #555;} strong {font-weight: 700;} #menumain {grid-column: 1 / 20; position: fixed; display: none; flex-direction: row; align-items: center; justify-content: space-around; width: 100%; padding: 2% 0 2% 0; top: 0; left: 0; background-color: #000; z-index: 6;} #menumain .logo {position: relative; display: flex; align-items: center; justify-content: center; width: 25%; } #menumain .logo img {width: 100%;} #menumain .menu {display: block; display: flex; gap: 0.5%; align-items: center; justify-content: right; width: 60%;} #menumain .menu a {padding: 1%; font-size: 0.7em; font-weight: 700; background-color: var(--second-color); color: #000;} #menumain .menu a {background-color: #fff; color: #000;} #menumain .menu a:hover {background-color: #000; color: #fff;} #menumainTransparent {grid-column: 1 / 20; position: fixed; display: flex; flex-direction: row; align-items: center; justify-content: space-around; width: 100%; padding: 2% 0 2% 0; top: 0; left: 0; z-index: 6;} #menumainTransparent .logo {position: relative; display: flex; align-items: center; justify-content: center; width: 25%; } #menumainTransparent .logo img {width: 100%;} #menumainTransparent .menu {display: block; display: flex; gap: 0.5%; align-items: center; justify-content: right; width: 60%;} #menumainTransparent .menu a {padding: 1%; font-size: 0.7em; font-weight: 700; background-color: var(--second-color); color: #000;} #menumainTransparent .menu a {background-color: #fff; color: #000;} #menumainTransparent .menu a:hover {background-color: #000; color: #fff;} #menuMobile {grid-column: 1 / 20; position: fixed; display: none; flex-direction: column; align-items: center; justify-content: center; width: 100%; padding: 2% 0 25% 0; top: 0; left: 0; background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(145,145,145,0) 100%); z-index: 6;} header {grid-column: 1 / 20; display: flex; width:100%; height: 85vh; flex-direction: column; align-items: start; justify-content: center; overflow: hidden;} main {grid-column: 1 / 20; display: flex; width:100%; margin-top: 5%; flex-direction: column; align-items: center; justify-content: center;} footer {grid-column: 1 / 20; display: flex; flex-direction: column; align-items: center; justify-content: center;} #headerContent {display: flex; width: 100%; align-items: center; justify-content: center;} #headerContent .sliderbasic {display: block; width: 100%; height: 40vh;} #headerContent .sliderbasic .container {position: relative; float: left; width: 100%; height: 100%;} #headerContent .sliderbasic .container .mask {position: relative; display: block; width: 100%; height: 100%; overflow: hidden; z-index: 3;} #headerContent .sliderbasic .container .mask .carrousel {position: relative; display: flex; gap: 0%; flex-direction: row; align-items: flex-start; justify-content: flex-start; width: 100%; height: 100%; z-index: 4;} #headerContent .sliderbasic .container .mask .carrousel .slide {display: block; width: 100%; height: 100%; z-index: 5;} #headerContent .sliderbasic .container .mask .carrousel .slide .post {position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; align-items: center; justify-content: center; background-position: center center; background-size: cover; z-index: 5;} #headerContent .sliderbasic .container .mask .carrousel .slide .post img.wallpaperImg {position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover; object-position: center; opacity: 0.2; z-index: 6;} #headerContent .sliderbasic .container .mask .carrousel .slide .post img.logo {display: block; width: 30%; margin-top: 2%; z-index: 9;} #headerContent .sliderbasic .container .mask .carrousel .slide .post h2 {display: block; font-size: 5em; margin-top: 1%; color: #fff; z-index: 8;} #headerContent .sliderbasic .container .mask .carrousel .slide .post h3 {display: block; font-size: 1.4em; color: #fff; z-index: 7;} #headerContent .sliderbasic .container .mask .gradient {position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); z-index: 7;} #headerContent .sliderbasic .container .mask .rrss {display: flex; flex-direction: row; margin-top: -6%; gap: 4%; align-items: center; justify-content: center;z-index: 3; z-index: 10;} #headerContent .sliderbasic .container .mask .rrss a {display: block; width: 4vw; height: 4vw; z-index: 4; z-index: 11;} #headerContent .sliderbasic .container .mask .rrss a img {display: block; width: 100%; z-index: 4; z-index: 12;} #mainContent {display: flex; width: 100%; align-items: center; justify-content: center;} } @media screen and (max-width: 700px) { html {scroll-behavior: smooth; overflow-x: hidden;} body {display: grid; grid-gap: 0%; grid-template-columns: repeat(19, minmax(0, 1fr)); align-items: start; justify-content: start; width: 100%; font-family: 'DINCondensedBold'; font-style: normal; letter-spacing: 0.15em; background-color: #000; overflow-x: hidden;} * {margin: 0; padding:0; box-sizing: border-box; /*white-space: nowrap;*/ text-decoration: none;} h1 {font-size: 6em; line-height: 1.4em; letter-spacing: 0.3em; font-weight: 700; color: var(--first-color);} h2 {font-size: 6em; line-height: 1.4em; letter-spacing: 0.3em; font-weight: 700; color: var(--first-color);} h3 {font-size: 1.2em; line-height: 1.2em; letter-spacing: 0.1em; color: #000;} h4 {font-size: 0.7em; margin-bottom: 1em; color: #000;} p {font-size: 0.9em; letter-spacing: 0.1em; line-height: 1.3em; color: #555;} strong {font-weight: 700;} #menumain {grid-column: 1 / 20; position: fixed; display: none; flex-direction: column; align-items: center; justify-content: center; width: 100%; padding: 2% 0 25% 0; top: 0; left: 0; background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(145,145,145,0) 100%); z-index: 6;} #menumain .logo {position: relative; display: flex; align-items: center; justify-content: center; width: 60%; } #menumain .logo img {width: 100%;} #menumain .menu {display: block; display: flex; gap: 0.5%; align-items: center; justify-content: center; width: 80%;} #menumain .menu a {padding: 2% 2% 1% 2%; font-size: 0.8em; font-weight: 700 ;background-color: #fff; color: #000; text-align: center;} #menumainTransparent {grid-column: 1 / 20; position: fixed; display: none; flex-direction: column; align-items: center; justify-content: center; width: 100%; padding: 2% 0 2% 0; top: 0; left: 0; z-index: 6;} #menumainTransparent .logo {position: relative; display: flex; align-items: center; justify-content: center; width: 60%; } #menumainTransparent .logo img {width: 100%;} #menumainTransparent .menu {display: block; display: flex; gap: 0.5%; align-items: center; justify-content: center; width: 80%;} #menumainTransparent .menu a {padding: 2% 2% 1% 2%; font-size: 0.8em; font-weight: 700 ;background-color: #fff; color: #000; text-align: center;} #menuMobile {grid-column: 1 / 20; position: fixed; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; padding: 2% 0 2% 0; top: 0; left: 0; z-index: 6;} #menuMobile .logo {position: relative; display: flex; align-items: center; justify-content: center; width: 60%; } #menuMobile .logo img {width: 100%;} #menuMobile .menu {display: block; display: flex; gap: 2%; align-items: center; justify-content: center; width: 80%;} #menuMobile .menu a {display: block; width: 8vw; height: 8vw; background-position: center center; background-size: cover; background-repeat: no-repeat;} #menuMobile .menu .th {background-image: url(https://sportpublictv.com/img/twitch_w.png);} #menuMobile .menu .yt {background-image: url(https://sportpublictv.com/img/youtube_w.png);} #menuMobile .menu .fb {background-image: url(https://sportpublictv.com/img/facebook_w.png);} #menuMobile .menu .tw {background-image: url(https://sportpublictv.com/img/twitter_w.png);} #menuMobile .menu .ig {background-image: url(https://sportpublictv.com/img/instagram_w.png);} header {grid-column: 1 / 20; display: flex; width:100%; height: 20vh; flex-direction: column; align-items: start; justify-content: center; overflow: hidden;} main {grid-column: 1 / 20; display: flex; width:100%; margin-top: 5%; flex-direction: column; align-items: center; justify-content: center;} footer {grid-column: 1 / 20; display: flex; flex-direction: column; align-items: center; justify-content: center;} #headerContent {display: none; width: 100%; align-items: center; justify-content: center;} #headerContent .sliderbasic {display: block; width: 100%; height: 55vh;} #headerContent .sliderbasic .container {position: relative; float: left; width: 100%; height: 100%;} #headerContent .sliderbasic .container .mask {position: relative; display: block; width: 100%; height: 100%; overflow: hidden; z-index: 3;} #headerContent .sliderbasic .container .mask .carrousel {position: relative; display: flex; gap: 0%; flex-direction: row; align-items: flex-start; justify-content: flex-start; width: 100%; height: 100%; z-index: 4;} #headerContent .sliderbasic .container .mask .carrousel .slide {display: block; width: 100%; height: 100%; z-index: 5;} #headerContent .sliderbasic .container .mask .carrousel .slide .post {position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; align-items: center; justify-content: center; background-position: center center; background-size: cover; z-index: 5;} #headerContent .sliderbasic .container .mask .carrousel .slide .post img.wallpaperImg {position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover; object-position: center; opacity: 0.2; z-index: 6;} #headerContent .sliderbasic .container .mask .carrousel .slide .post img.logo {display: block; width: 90%; margin-top: 5%; z-index: 9;} #headerContent .sliderbasic .container .mask .carrousel .slide .post h2 {display: block; font-size: 5em; margin-top: 1%; color: #fff; z-index: 9;} #headerContent .sliderbasic .container .mask .carrousel .slide .post h3 {display: block; font-size: 1.4em; color: #fff; z-index: 7;} #headerContent .sliderbasic .container .mask .gradient {position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); z-index: 7;} #headerContent .sliderbasic .container .mask .rrss {display: flex; flex-direction: row; margin-top: -2%; gap: 4%; align-items: center; justify-content: center;z-index: 3; z-index: 10;} #headerContent .sliderbasic .container .mask .rrss a {display: block; width: 8vw; height: 8vw; z-index: 4; z-index: 11;} #headerContent .sliderbasic .container .mask .rrss a img {display: block; width: 100%; z-index: 4; z-index: 12;} #mainContent {display: flex; width: 95%; align-items: center; justify-content: center;} }