/**

  |============================

  | include css partials with

  | default @import url()

  |============================

*/

@import url('./reset.css');

@import url('./vite-promo.css');

@import url('./social.css');

@import url('./social1.css');

@import url('./header.css');

@import url('./header1.css');

@import url('./home.css');

@import url('./modal.css');

@import url('./footer.css');

@import url('content-temp.css');



@import url('./single-participants.css');

@import url('./asside1.css');

@import url('./asside2.css');

@import url('./asside3.css');

@import url('./gallery.css');

@import url('./tv.css');

@import url('./news.css');

@import url('./single.css');

@import url('./contacts.css');

@import url('./table.css');

@import url('./results.css');

@import url('./calendar.css');





:root {



  --primary-color: #26294c;

  /* --primary-color: #047161; */

  --second-color: #A6A6BB;

  --background-color: #F9F9FF;

  --border-color: 1px solid #A6A6BB;

  --border-line-color: 1.2px solid #CECFE2;

  --border-color-header: 1.2px solid #E4E5F4;

  --button-background-color: #EDEDFA;

  --button-color: #8E8EAB;

  --second-text-color: #808080;







}



/* 14px перетворено в 1.5135vw */



body {

  margin: 0;

  background: var(--background-color);

  /* background: linear-gradient(to bottom right, rgba(0, 123, 56, 0.2), rgba(254, 221, 3, 0.2)); */
  /* 
  color: var(--primary-color); */

  color: #26294c;

}

.mask1 {

  -webkit-mask-image: url(../img/ballb.png);
  mask-image: url(../img/ballb.png);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
  width: 90%;
	
  aspect-ratio: 1 / 1;
	height:auto;
	max-height:100%;
  display: block;
}

.mask1>img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.wrapes {

  position: relative;

  overflow: hidden;

}



.white-back .breadcrumb-home-icon {

  stroke: #777C7C;

}



.white-back .breadcrumb-icon {

  stroke: #B3B3B3;

}



.white-back .breadcrumb-link {

  color: var(--second-text-color);

}





.white-back .breadcrumb-span {

  color: #B3B3B3;

}



.white-back .filter-item {

  background: none;

  border: 1px solid var(--primary-color);

  color: var(--primary-color);

  transition: all 0.3s ease;

}



.white-back .filter-item:hover {

  background-color: #CBCFFF;

  cursor: pointer;



}











.white-back .current-filter {

  background: var(--primary-color);

  transition: all 0.3s ease;

  color: var(--button-background-color);

}



.white-back .current-filter:hover {

  background: var(--primary-color);

  color: var(--button-background-color);

  cursor: default;

}





.black-back .breadcrumb-home-icon {

  stroke: var(--button-background-color);

}



.black-back .breadcrumb-icon {

  stroke: #A6A6BB;

}



.black-back .breadcrumb-span {

  color: #A6A6BB;

}



.black-back .breadcrumb-link {

  color: var(--button-background-color);

}





.black-back .filter-item {

  background: none;

  border: 1px solid var(--button-background-color);

  color: var(--button-background-color);

  transition: all 0.3s ease;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

}



.black--back .filter-item:hover {

  background-color: #40457D;

  cursor: pointer;



}





.black-back .current-filter {

  background: var(--button-background-color);

  transition: all 0.3s ease;

  color: var(--primary-color);

}



.black-back .current-filter:hover {

  background: var(--button-background-color);

  cursor: default;

  color: var(--primary-color);



}







.breadcrumb-home-icon {

  width: 18px;

  height: 20px;





}



.breadcrumb-icon {



  width: 8px;

  height: 14px;

}



.breadcrumb {

  margin: 40px 0;

  text-align: left;

}



.breadcrumb-list {

  display: flex;

  gap: 12px;

  align-items: center;

}



.breadcrumb-item {



  font-size: 16px;

  font-weight: 600;

  line-height: 16px;





}



.breadcrumb-item:nth-child(even) {

  width: 24px;

  height: 24px;

  display: flex;

  justify-content: center;

  align-items: center;



}





.breadcrumb-link {

  width: auto;

  height: auto;

}



.title-page {



  font-size: 48px;

  font-weight: 500;

  line-height: 55.2px;

  letter-spacing: -0.03em;

  text-align: left;



}



.filter {

  margin-top: 32px;

  margin-bottom: 32px;

}



.filter-list {

  display: flex;

  gap: 16px;

  align-items: center;

}



.filter-item {

  width: auto;

  height: auto;

  font-size: 16px;

  font-weight: 700;

  line-height: 16px;

  text-align: left;





  border-radius: 16px;

  -webkit-border-radius: 16px;

  -moz-border-radius: 16px;

  -ms-border-radius: 16px;

  -o-border-radius: 16px;

}



.filter-item>a {



  display: block;



  padding: 12px 24px;



}



@media(max-width: 1420px) {



  .filter-list {



    flex-wrap: wrap;

  }





}









@media(max-width: 768px) {



  .breadcrumb-list {

    flex-wrap: wrap;



  }







}



@media(max-width: 468px) {

  .white-back .filter-item {

    border-radius: 3.081vw;

    /*16pxподіленона7.4=~1.081vw*/

    transition: all 0.3s ease;

    -webkit-border-radius: 3.081vw;

    -moz-border-radius: 3.081vw;

    -ms-border-radius: 3.081vw;

    -o-border-radius: 3.081vw;

  }







  .white-back .current-filter {

    background: var(--primary-color);



    /*16pxподіленона7.4=~1.081vw*/

    transition: all 0.3s ease;





  }







  .black-back .breadcrumb-home-icon {

    width: 5.216vw;

    /* 18px поділено на 7.4 = ~1.216vw */

    height: 5.351vw;

    /* 20px поділено на 7.4 = ~1.351vw */

  }



  .black-back .breadcrumb-icon {

    width: 5.081vw;

    /* 8px поділено на 7.4 = ~1.081vw */

    height: 5.892vw;

    /* 14px поділено на 7.4 = ~1.892vw */

  }



  .black-back .breadcrumb {

    margin: 2.973vw 0;

    /* 40px поділено на 7.4 = ~2.973vw */

  }



  .breadcrumb-home-icon {

    width: 3.432vw;

    /* 18px поділено 7.4 =~ 2.432vw */

    height: 3.703vw;

    /* 20px поділено 7.4 =~ 2.703vw */

  }



  .breadcrumb-icon {

    width: 1.581vw;

    /* 8px поділено 7.4 =~ 1.081vw */

    height: 2.392vw;

    /* 14px поділено 7.4 =~ 1.892vw */

  }







  .breadcrumb {

    margin: 5vw 0;

    text-align: left;

  }



  .breadcrumb-item {

    font-size: 4.162vw;

    /* 16px поділено на 7.4 = ~2.162vw */

    font-weight: 600;

    line-height: 4.162vw;

    /* 16px поділено на 7.4 = ~2.162vw */

  }



  .breadcrumb-item:nth-child(even) {

    width: 1.622vw;

    /* 24px поділено на 7.4 = ~1.622vw */

    height: 1.622vw;

    /* 24px поділено на 7.4 = ~1.622vw */

    justify-content: center;

    align-items: center;

  }



  .title-page {

    font-size: 8.486vw;

    /* 48px поділено на 7.4 = ~6.486vw */

    line-height: 9.486vw;

    /* 55.2px поділено на 7.4 = ~7.486vw */

    letter-spacing: -0.004vw;

    /* -0.03em поділено на 7.4 = ~-0.004vw */

    margin-bottom: 5vw;

  }



  .filter {

    margin-top: 4.324vw;

    /* 32px поділено на 7.4 = ~4.324vw */

    margin-bottom: 4.324vw;

    /* 32px поділено на 7.4 = ~4.324vw */

  }



  .filter-list {

    gap: 3.081vw;

    /* 16px поділено на 7.4 = ~1.081vw */



  }



  .filter-item {

    font-size: 3.562vw;

    /*16pxподіленона7.4=~2.162vw*/



    line-height: 3.562vw;

    /*16pxподіленона7.4=~2.162vw*/





  }



  .filter-item>a {

    padding: 1.811vw 2.622vw;

    /* 12px та 24px поділено на 7.4 = ~0.811vw та ~1.622vw */

  }



}































@font-face {

  font-family: 'Manrope';

  src: local('Manrope'), local('Manrope-Regular'),

    url('../fonts/Manrope-Regular.ttf') format('truetype');

  font-weight: 400;

  font-style: normal;

  font-display: swap;

}



@font-face {

  font-family: 'Manrope';

  src: local('Manrope'), local('Manrope-Medium'),

    url('../fonts/Manrope-Medium.ttf') format('truetype');

  font-weight: 500;

  font-style: normal;

  font-display: swap;

}





@font-face {

  font-family: 'Manrope';

  src: local('Manrope'), local('Manrope-Semibold'),

    url('../fonts/Manrope-SemiBold.ttf') format('truetype');

  font-weight: 600;

  font-style: normal;

  font-display: swap;

}



@font-face {

  font-family: 'Manrope';

  src: local('Manrope'), local('Manrope-Bold'),

    url('../fonts/Manrope-Bold.ttf') format('truetype');

  font-weight: 700;

  font-style: normal;

  font-display: swap;

}



@font-face {

  font-family: 'Manrope';

  src: local('Manrope'), local('Manrope-ExtraBold'),

    url('../fonts/Manrope-ExtraBold.ttf') format('truetype');

  font-weight: 800;

  font-style: normal;

  font-display: swap;

}