* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

a {
  text-decoration: none;
}

/* SCROLLBAR----------------------------------------------------------------------------------- */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: white;
  display: none;
}

::-webkit-scrollbar-thumb {
  background: rgb(97, 97, 97);
}

::-webkit-scrollbar-thumb:hover {
  background: rgb(64, 64, 64);
}

/* CONTAINER----------------------------------------------------------------------------------- */
#container {
  width: 100%;
  min-height: 1200px;
  font-family: "Open Sans", sans-serif;
  font-size: 62.5%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.overlay-back {
  background-image: url("../img/banner/arijan-goricki-sparring-3_49151858001_o.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-clip: content-box;
  width: 100%;
  height: 100%;
  z-index: -2;
  opacity: 0.1;
  position: fixed;
}

/* MENU-ICON----------------------------------------------------------------------------------- */
.menu-icon {
  width: 50px;
  height: 50px;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  right: 30px;
  top: 30px;
  z-index: 1;
}

.menuToggle input {
  display: block;
  width: 50px;
  height: 50px;
  position: absolute;
  left: 0px;
  top: 0px;
  cursor: pointer;
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  -webkit-touch-callout: none;
}

.menuToggle span {
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  border-radius: 0px;
  z-index: 1;
  /* background: rgb(184, 2, 2); */
  transform-origin: 4px 0px;
  transition: transform 0.2s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.2s cubic-bezier(0.77, 0.2, 0.05, 1),
    opacity 0.25s ease;
}

#brzi {
  background-color: rgb(184, 2, 2);
  transition: 500ms ease;
}

.menuToggle span:nth-last-child(2) {
  margin-bottom: 0px;
}

.menuToggle span:first-child {
  transform-origin: 0% 0%;
}

.menuToggle span:nth-last-child(2) {
  transform-origin: 0% 100%;
}

.menuToggle input:checked ~ span {
  opacity: 1;
  transform: rotate(-45deg) translate(-12px, 15px);
}

.menuToggle input:checked ~ span:nth-last-child(3) {
  opacity: 0;
  transform: rotate(0deg) scale(2, 2) translate(-12px, 0px);
}

.menuToggle input:checked ~ span:nth-last-child(2) {
  transform: rotate(45deg) translate(-12px, -17px);
}

.menu-wrap {
  position: fixed;
  top: 0px;
  z-index: 1;
}

.menu {
  height: 100%;
  width: 100%;
  visibility: hidden;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  left: 0px;
  top: 0px;
}

.menu1 {
  background: rgb(0, 0, 0, 0.9);
  border-radius: 50%;
  width: 200vw;
  height: 200vw;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  transform: scale(0);
  transition: all 0.4s ease;
}

.menu2 {
  width: 200px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.menu2 a {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  text-transform: uppercase;
  color: rgb(103, 103, 103);
  transition-duration: 0.4s;
  margin: 5px;
}

.menu2 a:hover {
  color: rgb(255, 255, 255);
}

.toggler:checked ~ .menuToggle span {
  background: white;
}

.toggler:checked ~ .menu {
  visibility: visible;
}

.toggler:checked ~ .menu .menu1 {
  transform: scale(1);
  transition-duration: 1s;
}

.toggler:checked ~ .menu .menu1 .menu2 {
  opacity: 1;
  transition: opacity 0.4s ease 0.4s;
}

/* CARD----------------------------------------------------------------------------------------- */
.box {
  width: 100%;
  min-height: 1000px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  /* border: 1px solid red; */
}

.naslov {
  height: 100px;
  width: 1100px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  /* border: 1px solid black; */
}

h3 {
  padding: 20px;
  font-size: 60px;
  color: rgb(97, 97, 97, 0.3);
}

.con {
  min-height: 900px;
  width: 1100px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column-reverse;
  border-top: 2px solid rgb(97, 97, 97, 0.3);
}

.co {
  height: 500px;
  width: 800px;
  margin: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  /* border: 2px solid rgb(97, 97, 97, 0.3); */
}

.con:last-child {
  margin-bottom: 100px;
}

.co .slika {
  height: 500px;
  width: 800px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-radius: 3px;
  overflow: hidden;
  /* box-shadow: 0px 0px 10px 10px rgb(207, 207, 207, 0.2); */
  box-shadow: 0px 0px 10px rgb(0, 0, 0, 0.2);
  /* border: 1px solid green; */
  position: relative;
}
.co .naslov {
  height: 70px;
  width: 800px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
  /* text-transform: uppercase; */
  color: rgb(97, 97, 97, 0.5);
  /* border: 1px solid red; */
}

.co .naslov span {
  color: rgb(97, 97, 97, 0.7);
}

.slika .back {
  display: flex;
  align-items: center;
  justify-content: center;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-clip: content-box;
  height: 100%;
  width: 100%;
  cursor: pointer;
  transition: 0.4s ease-in-out;
}

.con .co:nth-child(1) .slika .back {
  background-image: url("../img/Borbe/1. Arijan Goricki vs Milovan Dragojevic/slike/Milovan Dragojevic.jpg");
}

.con .co:nth-child(2) .slika .back {
  background-image: url("../img/Borbe/2. Arijan Goricki vs Petr Gina/slike/Petr Gina 4.jpg");
}

.con .co:nth-child(3) .slika .back {
  background-image: url("../img/Borbe/3. Arijan Goricki vs Istvan Kovacs/slike/Istvan Kovacs 3.jpg");
}

.con .co:nth-child(4) .slika .back {
  background-image: url("../img/Borbe/4. Arijan Goricki vs Malkhaz Tatrishvili/slike/Malkhaz Tatrishvili.jpg");
}

.con .co:nth-child(5) .slika .back {
  background-image: url("../img/Borbe/5. Arijan Goricki vs David Botos/slike/David Botos 4.jpg");
}

.con .co:nth-child(6) .slika .back {
  background-image: url("../img/Borbe/6. Arijan Goricki vs Szilveszter Ajtai/slike/Szilveszter Ajtai.jpg");
}

.con .co:nth-child(7) .slika .back {
  background-image: url("../img/Borbe/7/PSX_20200928_164023_20210201155337916.jpg");
}

.con .co:nth-child(8) .slika .back {
  background-image: url("../img/Borbe/8/Arijan Goricki vs Jozsef Ajtai (2)_20210201155325237.jpg");
}

.con .co:nth-child(9) .slika .back {
  background-image: url("../img/Borbe/9/Goricki vs Beruashvili.jpg");
}

.con .co:nth-child(10) .slika .back {
  background-image: url("../img/Borbe/10. Arijan Goricki vs Valerii Romanenia/PSX_20210717_210606.jpg");
}

.con .co:nth-child(11) .slika .back {
  background-image: url("../img/Borbe/11. Arijan Goricki vs Valerii Romanenia/PSX_20211017_025043-01_20211019054609159.jpg");
}

.con .co:nth-child(12) .slika .back {
  background-image: url("../img/Borbe/12. Arijan Goricki vs Emiliano Salvini/Srednja kvaliteta.jpg");
}

.con .co:nth-child(13) .slika .back {
  background-image: url("../img/Borbe/13. Arijan Goricki vs Jaba Memishishi/medium quality (1).jpg");
}

.con .co:nth-child(14) .slika .back {
  background-image: url("../img/Borbe/14. Arijan Goricki vs Suat Laze/Low quality.jpg");
}

.con .co:nth-child(15) .slika .back {
  background-image: url("../img/Borbe/15. Arijan Goricki vs Giorgi Gachechiladze/Low quality .jpg");
}

.con .co:nth-child(16) .slika .back {
  background-image: url("../img/Borbe/16. Arijan Goricki vs Luis Millan/Low quality 200 .jpg");
}

.con .co:nth-child(17) .slika .back {
  background-image: url("../img/Borbe/17. Arijan Goricki vs Caril Herrera/Low Quality 22.jpg");
}

.con .co:nth-child(18) .slika .back {
  background-image: url("../img/Borbe/18/1698071374939.jpg");
}

.con .co:nth-child(19) .slika .back {
  background-image: url("../img/Borbe/19/PSX_20240502_212105-01.jpeg");
}

.con .co:nth-child(20) .slika .back {
  background-image: url("../img/Borbe/20/PSX_20240510_173653-01.jpeg");
}

.con .co:nth-child(21) .slika .back {
  background-image: url("../img/Borbe/21/PSX_20241017_153444_20241029070930212.jpg");
}

.con .co:nth-child(22) .slika .back {
  background-image: url("../img/Borbe/22/PSX_20241025_153704_20241029070522761_20241029072018517.jpg");
}

.con .co:nth-child(23) .slika .back {
  background-image: url("../img/Borbe/23/PSX_20241222_003151.jpg");
}

.con .co:nth-child(24) .slika .back {
  background-image: url("../img/Borbe/24/PSX_20250413_121232_20250511234859345_20250511235526761.jpg");
}

.con .co:nth-child(25) .slika .back {
  background-image: url("../img/Borbe/25/PSX_20250707_011543.jpg");
}

.con .co:nth-child(26) .slika .back {
  background-image: url("../img/Borbe/26/1000099205.jpg");
}

.slika input {
  position: absolute;
  opacity: 0;
}

.bar {
  height: 60px;
  width: 100%;
  background: rgb(0, 0, 0, 0.7);
  position: absolute;
  bottom: 0;
  cursor: pointer;
  transition: 0.8s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.bar .title {
  width: 740px;
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  padding-left: 10px;
  padding-right: 10px;
  /* border-bottom: 2px solid rgb(97, 97, 97, 0.3); */
}

.bar .title p {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 22px;
  color: rgb(255, 255, 255, 0.8);
  transition: 0.8s ease;
}

.bar .title i {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 35px;
  color: rgb(255, 255, 255, 0.4);
  transition: 0.8s ease;
}

.bar .title i:nth-child(3) {
  display: none;
}

.bar .title i:hover {
  color: rgb(255, 255, 255, 0.8);
}

.bar .sad {
  width: 670px;
  height: 40px;
  margin-right: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  display: none;
  /* margin-right: 40px; */
  padding-bottom: 20px;
  /* font-weight: 600; */
  transition: 0.8s ease;
  /* border: 1px solid red; */
}

.bar .sad p:nth-child(2) {
  font-size: 17px;
  font-weight: 600;
  text-transform: uppercase;
  padding-bottom: 5px;
  color: rgb(97, 97, 97);
}

.bar .sad p:nth-child(1),
.bar .sad p:nth-child(3) {
  font-size: 15px;
  text-transform: uppercase;
  color: rgb(97, 97, 97);
}

.slika input:checked ~ .back {
  filter: blur(1.5px);
}

.slika input:checked ~ .bar {
  height: 80px;
  background: rgb(255, 255, 255, 0.9);
  transition: 0.8s ease;
}

.slika input:checked ~ .bar .title {
  height: 40px;
}

.slika input:checked ~ .bar .title p {
  color: rgb(69, 145, 48, 0.8);
  font-weight: 800;
  font-size: 20px;
}

.slika input:checked ~ .bar .title .draw {
  color: rgb(0, 107, 143, 0.8);
  font-weight: 800;
  font-size: 20px;
}

.slika input:checked ~ .bar .title .didnt-happened {
  color: rgb(97, 97, 97, 0.8);
  font-weight: 800;
  font-size: 20px;
}

.slika input:checked ~ .bar .title .loss {
  color: rgb(184, 2, 2, 0.6);
  font-weight: 800;
  font-size: 20px;
}

.slika input:checked ~ .bar .title i {
  color: rgb(0, 0, 0);
  /* font-weight: 800; */
}

.slika input:checked ~ .bar .title i:nth-child(2) {
  display: none;
}

.slika input:checked ~ .bar .title i:nth-child(3) {
  display: flex;
}

.slika input:checked ~ .bar .sad {
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: 0.8s ease;
  font-size: 20px;
  /* border: 1px solid yellow; */
}

/* ZAG----------------------------------------------------------------------------------- */
.zag {
  width: 100%;
  height: 30vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  background: rgb(73, 73, 73);
}

.zag .tekst {
  height: 100%;
  width: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-size: 13px;
  color: white;
}

.social {
  width: 500px;
  height: 100px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-direction: row;
  /* margin-top: 25px; */

  /* border: 1px solid green; */
}

.zag .mail {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  /* margin-bottom: 10px; */
}

.mail p {
  font-size: 20px;
  padding-top: 15px;
  font-weight: 400;
  /* display: none; */
  transition: ease-in-out 0.2s;
}

.mail i {
  font-size: 50px;
  color: rgb(207, 207, 207, 0.6);
  cursor: pointer;
  border-radius: 50%;
  padding: 15px;
  transition: ease-in-out 0.2s;

  background: rgb(207, 207, 207, 0.1);
  border: 3px solid rgb(207, 207, 207, 0);
}

.mail a {
  border-radius: 50%;
}

.mail i:hover {
  background: none;
  color: rgb(207, 207, 207, 0.8);
  border: 3px solid rgb(207, 207, 207, 0.4);
}

.copy {
  width: 100%;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 15px;
  font-size: 13px;
  color: rgb(200, 200, 200, 0.8);
}

.ig {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: white;
  /* margin-bottom: 10px; */
}

.ig a {
  color: rgb(207, 207, 207, 0.6);
  font-size: 50px;
  border-radius: 50%;
  padding: 16px;
  padding-top: 13px;
  padding-bottom: 13px;
  transition: ease-in-out 0.2s;

  background: rgb(207, 207, 207, 0.1);
  border: 3px solid rgb(207, 207, 207, 0);
}

.ig a:hover {
  background: none;
  color: rgb(207, 207, 207, 0.8);
  border: 3px solid rgb(207, 207, 207, 0.4);
}

.ig p {
  font-size: 20px;
  padding-top: 15px;
  font-weight: 400;
  /* display: none; */
}

.yt {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  /* margin-bottom: 10px; */
}

.yt a {
  color: rgb(207, 207, 207, 0.6);
  font-size: 46px;
  border-radius: 50%;
  padding: 20px;
  padding-top: 17px;
  padding-bottom: 17px;
  transition: ease-in-out 0.2s;

  background: rgb(207, 207, 207, 0.1);
  border: 3px solid rgb(207, 207, 207, 0);
}

.yt a:hover {
  background: none;
  color: rgb(207, 207, 207, 0.8);
  border: 3px solid rgb(207, 207, 207, 0.4);
}

.yt p {
  font-size: 20px;
  padding-top: 10px;
  font-weight: 400;
  /* display: none; */
}