@import url(https://fonts.googleapis.com/css?family=Open+Sans);

* {box-sizing: border-box; padding: 0; margin: 0;}

html {width: 100%; height: 100%;}

body { 
	font-family: 'Open Sans', sans-serif;
	font-size: 13px; 
	background-color: #4D4D4D;
}

.wrapper {
	max-width: 1200px;
	width: 100%;
	margin: 10px auto;
}

.container {
	display: grid;
	grid-template-columns: 94px 94px 94px 94px 94px 94px 94px 94px 94px 94px 94px 94px;
	grid-template-rows: auto auto auto auto;
	gap: 8px 6px;
	grid-auto-flow: column;
	justify-content: space-evenly;
	align-items: start;
	grid-template-areas:
    "photos photos photos photos photos photos photos photos photos photos photos photos"
    "banner banner banner banner banner banner advert advert advert advert advert advert"
    "logo logo navigation navigation content content content content content content content content"
    "footer footer footer footer footer footer footer footer footer footer footer footer";
	width: 1200px;
}

.photos { grid-area: photos; }

.banner { grid-area: banner; }

.advert { grid-area: advert; }

.footer { grid-area: footer; }

.logo { grid-area: logo; }

.navigation { grid-area: navigation; }

.content { grid-area: content; }

a {
	text-decoration: none;
	color: #FFE4C4;
}

a:hover {
	text-decoration: underline;
}

hr {
	border: 1px;
	border-top: 1px solid #000;
	float: left;
	height: 1px;
	background-color: red;
}

img {
	max-width: 100%;
	height: auto;
	width: auto;
}

#menu {
	margin-right: 2px;
	font-size: 15px;
	background-color: #5C5C5C;
}

#menu a {
	display: block;
	text-decoration: none;
	color: #000000;
	padding: 1px;
	border-left: 6px solid #CCCCCC;
	margin-top: 3px;
}

#menu a:hover {
	color: #FFE4C4;
	border-left: 6px solid #FF0000;
}

.logotype {
 	border: 2px;
	border-color: #FF0066;
	border-style: double;
	width: 150px;
	height: 150px;
	padding: 5px;
	margin-bottom: 10px; 
}

/* MENU - CLASS: badge */
.badge {
	width: 150px;
	margin: 0 auto;
	display: block;
	list-style-type: none;
	background-color: #4D4D4D;
	display: block;	
}

.badge ul {
	list-style-type:none;
	background-color: #D3D3D3;
	display: block;
}

.badge ul li {
	text-align:center;
	display: block;
}

.badge ul li a {
	text-decoration:none;
	display: block; 
}

.badge ul li:hover {
	background-color: #F36742;
}

.badge  ul li:active {
	background-color: #1F272B;
}

.badge ul li a:active {
	color: #FFFFFF;
}

/* ROTATOR - CLASS: PHOTO */
.slider {
	width: 76%;
	height: 220px;
	overflow: hidden;
	position: relative;
	box-sizing: border-box;
	white-space: nowrap;
	margin: auto;
}
	
.slider>div {
	position: absolute;
	animation: move_slide2 16s infinite;
	opacity: 0;
}

.slider>div:nth-child(1) {
	animation-delay: 5;
}

.slider>div:nth-child(2) {
	animation-delay: 10s;
}

.slider>div:nth-child(3) {
	animation-delay: 15s;
}

.slider>div:nth-child(4) {
	animation-delay: 20s;
}

@keyframes move_slide {
	10% { opacity: 1; }
	80% { opacity: 1; }
	90% { opacity: 0; }
}

@keyframes move_slide2 {
	25% { opacity: 1; }
	40% { opacity: 0; }
}

@media only screen and (max-width: 1000px) {
    .slider {display: none;}	
}	
	
.column {
	border: 1px solid gray;
	margin: 2px;
	padding: 10px;
	height: 3200px;
	&:first-child { margin-left: 0; }
	&:last-child { margin-right: 0; }	
}

.news {
	float: left;
	background-color: #5C5C5C;
}

.panel {
	float: right;
	background-color: #4D4D4D;
	text-align: center;
	color: #F0FFFF;
}

table.teams {
	text-align: left;
	border-collapse: collapse;
	width: 400px;
	margin-left: auto;
	margin-right: auto;
	border: 0px;
}

table.teams td, table.teams th { padding: 4px 6px; }




















.scrolling-box {
  background-color: #eaeaea;
  display: block;
  height: 200px;
  overflow-y: scroll;
  scroll-behavior: auto;
  text-align: center;
  width: 200px;
}

section {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}



.flags {
	border: 0px;
	width: 16px;	
	height: 16px;

	vertical-align: middle;
	margin-left: 4px;
	margin-right: 4px;
}




/* TABELKA 3w1 */










/* TABELKA */
table.smart {
  border: 1px solid #F7F7FF;
  width: 100%;
  text-align: center;
  border-collapse: collapse;
}
table.smart td, table.smart th {
  border: 1px solid #000000;
  padding: 4px 4px;
}
table.smart thead {
  background: #F2F2F2;
  background: -moz-linear-gradient(top, #f5f5f5 0%, #f3f3f3 66%, #F2F2F2 100%);
  background: -webkit-linear-gradient(top, #f5f5f5 0%, #f3f3f3 66%, #F2F2F2 100%);
  background: linear-gradient(to bottom, #f5f5f5 0%, #f3f3f3 66%, #F2F2F2 100%);
  border-bottom: 2px solid #000000;
}
table.smart thead th {
  font-size: 16px;
  font-weight: bold;
  color: #000000;
  text-align: center;
}
table.smart tfoot {
  font-size: 16px;
  font-weight: bold;
  color: #000000;
  background: #F2F2F2;
  background: -moz-linear-gradient(top, #f5f5f5 0%, #f3f3f3 66%, #F2F2F2 100%);
  background: -webkit-linear-gradient(top, #f5f5f5 0%, #f3f3f3 66%, #F2F2F2 100%);
  background: linear-gradient(to bottom, #f5f5f5 0%, #f3f3f3 66%, #F2F2F2 100%);
  border-top: 2px solid #000000;
}
table.smart tfoot td {
  font-size: 16px;
  text-align: center;		
}

table.smart tr:hover td {
  background-color:  #808b96;
}



/* KOLEJNOŚĆ STARTOWA */
table.PolePosition {
  width: 400px;
  text-align: center;
  border-collapse: collapse;
  margin-left: auto;
  margin-right: auto;  
}
table.PolePosition td, table.PolePosition th {
  padding: 2px 2px;
}
table.PolePosition tfoot td {
  font-size: 14px;
}
table.PolePosition tfoot .links {
  text-align: right;
}
table.PolePosition tfoot .links a{
  display: inline-block;
  background: #1C6EA4;
  color: #FFFFFF;
  padding: 2px 8px;
  border-radius: 5px;
}




/* PODIUM */
#podium-box {
  margin: 0 auto;
  display: flex;
}

.podium-number {
  font-family: DaggerSquare;
  font-weight: bold;
  font-size: 4em;
  color: #ffffff;
  bottom:70px;	
}

.step-container {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.step-container>div:first-child {
  margin-top: auto;
  text-align: center;
}

.step {
  text-align: center;
}

.bg-podium {
  background-color: #5e7399;
}

#first-step {
  height: 50%;
}

#second-step {
  height: 35%;
}

#third-step {
  height: 30%;
}




/* TWITTER */
blockquote.twitter-tweet {
  display: inline-block;
  font-family: "Helvetica Neue", Roboto, "Segoe UI", Calibri, sans-serif;
  font-size: 12px;
  font-weight: bold;
  line-height: 16px;
  border-color: #eee #ddd #bbb;
  border-radius: 5px;
  border-style: solid;
  border-width: 1px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  margin: 10px 5px;
  padding: 0 16px 16px 16px;
  max-width: 468px;
}

blockquote.twitter-tweet p {
  font-size: 16px;
  font-weight: normal;
  line-height: 20px;
}

blockquote.twitter-tweet a {
  color: inherit;
  font-weight: normal;
  text-decoration: none;
  outline: 0 none;
}

blockquote.twitter-tweet a:hover,
blockquote.twitter-tweet a:focus {
  text-decoration: underline;
}



/* WYŚRODKOWANIE OBIEKTÓW */
.outer {
  display: table;
  width: 100%;
  height: 100%;
}
.inner {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.centered {
  position: relative;
  display: inline-block;
  width: 76%;
  padding: 1em;
}



/* RESPONSYWNA LINIA CZASU */
.timeline {
  position: relative;
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 15px 0;

}

.timeline::after {
  content: '';
  position: absolute;
  width: 2px;
  background: #006E51;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -1px;
}

.timeline-container {
  padding: 15px 30px;
  position: relative;
  background: inherit;
  width: 50%;
}

.timeline-container.left {
  left: 0;
}

.timeline-container.right {
  left: 50%;
}

.timeline-container::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  top: calc(50% - 8px);
  right: -8px;
  background: #ffffff;
  border: 2px solid #006E51;
  border-radius: 16px;
  z-index: 1;
}

.timeline-container.right::after {
  left: -8px;
}

.timeline-container::before {
  content: '';
  position: absolute;
  width: 50px;
  height: 2px;
  top: calc(50% - 1px);
  right: 8px;
  background: #006E51;
  z-index: 1;
}

.timeline-container.right::before {
  left: 8px;
}

.timeline-container .timeline-date {
  position: absolute;
  display: inline-block;
  top: calc(50% - 8px);
  text-align: center;
  font-size: 13px;
  font-weight: bold;
  color: #006E51;
  text-transform: uppercase;
  letter-spacing: 1px;
  z-index: 1;
}

.timeline-container.left .timeline-date {
  right: -178px;
}

.timeline-container.right .timeline-date {
  left: -178px;
}

.timeline-container .icon {
  position: absolute;
  display: inline-block;
  width: 40px;
  height: 40px;
  padding: 9px 0;
  top: calc(50% - 20px);
  background: #F6D155;
  border: 2px solid #006E51;
  border-radius: 40px;
  text-align: center;
  font-size: 18px;
  color: #006E51;
  z-index: 1;
}

.timeline-container.left .icon {
  right: 56px;
}

.timeline-container.right .icon {
  left: 56px;
}

.timeline-container .capacity {
  padding: 30px 90px 30px 30px;
  background: #F6D155;
  position: relative;
  border-radius: 0 500px 500px 0;
}

.timeline-container.right .capacity {
  padding: 30px 30px 30px 90px;
  border-radius: 500px 0 0 500px;
}

.timeline-container .capacity h2 {
  margin: 0 0 10px 0;
  font-size: 12px;
  font-weight: bold;
  color: #006E51;
}

.timeline-container .capacity p {
  margin: 0;
  font-size: 11px;
  line-height: 16px;
  color: #5e7399;
}

.timeline-container .capacity a {
  color: #ff0066;
  text-decoration: none;
}

@media (max-width: 767.98px) {
  .timeline::after {
    left: 90px;
  }

  .timeline-container {
    width: 100%;
    padding-left: 120px;
    padding-right: 30px;
  }

  .timeline-container.right {
    left: 0%;
  }

  .timeline-container.left::after, 
  .timeline-container.right::after {
    left: 82px;
  }

  .timeline-container.left::before,
  .timeline-container.right::before {
    left: 100px;
    border-color: transparent #006E51 transparent transparent;
  }

  .timeline-container.left .timeline-date,
  .timeline-container.right .timeline-date {
    right: auto;
    left: 15px;
  }

  .timeline-container.left .icon,
  .timeline-container.right .icon {
    right: auto;
    left: 146px;
  }

  .timeline-container.left .capacity,
  .timeline-container.right .capacity {
    padding: 30px 30px 30px 90px;
    border-radius: 500px 0 0 500px;
  }
}















button:focus,
input:focus,
textarea:focus,
select:focus {
  outline: none; }
.tabs {
  display: block;
  display: -webkit-flex;
  display: -moz-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0;
  overflow: hidden; }
  .tabs [class^="tab"] label,
  .tabs [class*=" tab"] label {
    color: #efedef;
    cursor: pointer;
    display: block;
    padding: 10px 0;
    text-align: center; }
  .tabs [class^="tab"] [type="radio"],
  .tabs [class*=" tab"] [type="radio"] {
    border-bottom: 1px solid rgba(239, 237, 239, 0.5);
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out; }
    .tabs [class^="tab"] [type="radio"]:hover, .tabs [class^="tab"] [type="radio"]:focus,
    .tabs [class*=" tab"] [type="radio"]:hover,
    .tabs [class*=" tab"] [type="radio"]:focus {
      border-bottom: 1px solid #fd264f; }
    .tabs [class^="tab"] [type="radio"]:checked,
    .tabs [class*=" tab"] [type="radio"]:checked {
      border-bottom: 2px solid #fd264f; }
    .tabs [class^="tab"] [type="radio"]:checked + div,
    .tabs [class*=" tab"] [type="radio"]:checked + div {
      opacity: 1; }
    .tabs [class^="tab"] [type="radio"] + div,
    .tabs [class*=" tab"] [type="radio"] + div {
      display: block;
      opacity: 0;
      padding: 0 0;
      width: 90%;
      -webkit-transition: all 0.3s ease-in-out;
      -moz-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out; }
  .tabs .tab-2 {
    width: 50%; }
    .tabs .tab-2 [type="radio"] + div {
      width: 200%;
      margin-left: 200%; }
    .tabs .tab-2 [type="radio"]:checked + div {
      margin-left: 0; }
    .tabs .tab-2:last-child [type="radio"] + div {
      margin-left: 100%; }
    .tabs .tab-2:last-child [type="radio"]:checked + div {
      margin-left: -100%; }