@charset "UTF-8";
/* CSS Document */

body {display:flex; flex-direction:column;min-height: 100vh}

.innerdisplay {flex-grow: 1}

.home_lema {position: absolute; top: 0px; z-index: 20; border: 10px solid #f90; width: 50vw; height: 750px}

.lema {position: absolute; top: 50%; transform: translateY(-50%); left: 145px; width: calc(60vw - 145px); color: var(--white); }
.lema h1 {font-size: 80px!important; line-height: 85px; font-family: 'Neue_Haas_b'; margin: 0px 0px 30px 0px!important; padding: 0px!important}
.lema h3 {font-size: 20px!important; line-height: 26px; font-family: Arial, 'sans-serif'; margin: 0px 0px!important; padding: 0px!important; font-weight: normal; width: 50%}

.line_button {display: table; color: var(--white); border: 1px solid var(--white); width: 275px; height: 48px; line-height: 48px; padding-left: 16px; cursor: pointer}
.bk_line_button {display: table; color: var(--black); border: 1px solid var(--black); width: 275px; height: 48px; line-height: 48px; padding-left: 16px; cursor: pointer}

.black_button {display: table; color: var(--white)!important; border: 1px solid var(--black); width: 275px; height: 48px; line-height: 48px; padding-left: 16px; background: var(--black); cursor: pointer}


.titol_h {font-size: 60px!important; line-height: 60px; font-family: 'Neue_Haas_b'; margin: 0px 0px 20px 0px!important; padding: 0px!important}
.text {font-size: 18px!important; line-height: 23px; }

/* info 1 */
.info1 {background: var(--bggrey); min-height: 500px; width: calc(100% - 290px); display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); padding: 0px 145px; position: relative}
.bkbg {background: var(--black)}
.greybg {background: var(--bggrey)}
.redbg {background: var(--red)}



.wtext {color: var(--white)}

.info_card {border: 0px solid #789; position: relative;}

.info_table {position: absolute; top: 50%; transform: translateY(-50%); width: 260px}

.al_center {left: 50%; transform: translateX(-50%) translateY(-50%); top: 50%}
.al_right {right: 0px; }

.info_table img {height: 65px; margin: 0px auto}
.info_table h5 {font-size: 20px; font-weight: bold; margin: 0px!important; padding: 0px!important}
.info_table p {font-size: 20px; font-weight: normal; margin: 0px!important; padding: 0px!important; line-height: 26px}

.info_table tr:first-child td {height: 90px}

.info_table tr:nth-child(2) td {height: 35px;}

.info_table tr:nth-child(3) td {height: 90px;}

/* install */

.big_video_image { position: relative; margin: 10px 0px 60px; background-size: cover!important; background-position: center center!important; background-repeat: no-repeat!important
    width: 100%;
    height: 500px;}

.home_video {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden; margin-bottom: 60px
}

.background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

.content {position: absolute; right: 30px; bottom: 20px;z-index: 1; background: none}
.content button {background: rgba(255,255,255,0.1); border: none; width: 36px; height: 36px; cursor: pointer}
.content i {color: var(--white); font-size: 20px}




.install {width: calc(100vw - 290px); margin: 90px 145px 90px}

.install .ins_img {width: 100%; margin: 0px 0px 90px}

.intsallations {
  display: grid;
  grid-gap: 0px;
  grid-template-columns: 50% 25% 25% ;
  padding: 0px;
  margin: 80px 0px 10px;
  width: 100%;
}

.boxins {
  padding: 0px 0px;
  margin: 0px;
  border: 0px solid #ee0000;
}

.i1ab {grid-row: 1 / span 2;  grid-column: 1; padding-right: 10%} 
.i1bb {grid-row: 1 / span 2;  grid-column: 2 / span 2; background: red} 

.i1b {grid-row: 1;  grid-column: 2; margin-left: 40px; border-top: 1px solid var(--lngrey)} 
.i1c {grid-row: 1;  grid-column: 3; margin-left: 40px; border-top: 1px solid var(--lngrey)} 
.i2b {grid-row: 2;  grid-column: 2; margin-left: 40px; border-top: 1px solid var(--lngrey)} 
.i2c {grid-row: 2;  grid-column: 3; margin-left: 40px; border-top: 1px solid var(--lngrey)} 


.intsallations h4 {font-size: 18px!important; line-height: 23px; font-family: Arial, 'sans-serif'; margin: 10px 0px!important; padding: 0px!important; font-weight: normal!important; color: var(--text02)}
.intsallations h1 {font-size: 60px!important; line-height: 60px; font-family: Arial, 'sans-serif'; margin: 10px 0px 30px!important; padding: 0px!important; font-weight: normal!important; color: var(--text02)}

.intsallations .text {padding-right: 10%}

.mini {margin-left: 5px; font-size: 18px!important}

/* caroulse home */


    .carousel-controls {
      margin: 50px 0px;
      height: 425px;
      position: relative;
      width: 100%;
      overflow: hidden; background: none
    }

    .c_arrow {
      position: absolute;
      top: 0px;
      font-size: 1rem;
      background: rgba(255, 255, 255, 0.0);
      border: none;
      cursor: pointer;
      display: none;
      z-index: 2;
    height: 375px; width: 250px
    }

    .c_arrow.c_left { left: 0px;padding: 0px 200px 0px 20px; color: var(--white)}

    .c_arrow.c_right { right: 0px; padding: 0px 20px 0px 200px; color: var(--white)}

    .carousel-controls:hover .c_arrow {
      display: block;
    }

    .carousel-controls .track-wrapper {
      width: 100%;
      overflow: hidden;
    }

    .carousel-controls .track {
      display: flex;
      width: max-content;
      transform: translateX(0);
      will-change: transform;
    }

    .carousel-controls ul {
      display: flex;
      background: none;
      list-style-type: none;
      padding: 0;
      margin: 0;
    }

    .carousel-controls li {
      background: none;
      flex-shrink: 0;
    }
.carousel-controls li span {display: block; font-size: 11px; max-width: 75%; margin-left: 10px}

.carousel-controls img {
      display: block;
      height: 375px;
      width: auto; margin: 0px 10px 5px 10px
    }
.carousel-players .cr_name, .carousel-players .cr_team {margin-left: 10px; text-align: left; font-size: 18px; line-height: 18px}
.carousel-players .cr_name {margin-top: 10px}

/* double sq */
.double {
  display: grid;
  grid-gap: 0px;
  grid-template-columns: 50% 50% ;
  padding: 0px;
  margin: 0px;
  width: 100%; height: 50vw; max-height: 720px
}

.boxdb {
  padding: 0px 0px;
  margin: 0px;
  border: 0px solid #ee0000;
}

.d1a {grid-row: 1 ;  grid-column: 1; position: relative} 
.d1b {grid-row: 1 ;  grid-column: 2 ; position: relative} 

.d1c {grid-row: 1 ;  grid-column: 1; position: relative} 


.dtext {position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); max-width: 460px; }
.db_img {position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); height: 495px; width: 495px; background-size: cover!important; background-position: center center!important; background-repeat: no-repeat!important}

.full_bg {background-size: cover!important; background-position: center center!important; background-repeat: no-repeat}

.bg_contain {background-size: contain!important}

/* exit */
.exit {width: calc(100vw - 290px); margin: 90px 145px 90px}
.exit .intro {width: 25%}

.carousel-players {
  margin: 50px 0px;
  height: 475px;
  position: relative;
  width: 100%;
  overflow: hidden;
  border: 0px solid #909; 
}
.carousel-players .c_arrow {
  position: absolute;
  top: 0px;
  font-size: 20px;
  background: rgba(255, 255, 0, 0.0);
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  display: block;
  z-index: 2; width: 30px
}
.carousel-players .c_arrow.c_left {
  left: 50px; color: var(--black)
}
.carousel-players .c_arrow.c_right {
  right: 50px; color: var(--black)
}
.carousel-players:hover .c_arrow {
  display: block;
}
.carousel-players .track-wrapper {
  width: calc(100% - 290px);
  border: 0px solid #f90;
  overflow: hidden;
  margin: 0px 145px
}
.track {
  display: flex;
  width: max-content;
  transform: translateX(0);
  will-change: transform;
}
.carousel-players ul {
  display: flex;
  background: none;
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.carousel-players li {
  background: none;
  flex-shrink: 0; text-align: center; font-size: 12px
}
.carousel-players img {
  display: block;
  height: 375px;
  width: auto;
  margin: 0px 10px
}

/* FAQS */
.faqs {width: calc(100vw - 290px); padding: 30px 145px 30px; background: var(--bggrey)}

.accord {width: 70%; padding: 20px 0px 20px 30%; border-top: 1px solid var(--lngrey)}

.accordion_faq {
  background: none; font-weight: normal;
  cursor: pointer;
  padding: 15px 0px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 30px;
  transition: 0.4s; border-bottom: 1px solid var(--lngrey)
}

.active, .accordion_faq:hover {
  background: none;
}

.accordion_faq:after {
  content: '\002B';
  color: var(--lngrey);
  font-weight: normal;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\00D7";
}

.panel {
  padding:  0px 0px; width: 60%;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

/* OPIONS */

.opinions {width: calc(100vw - 290px); margin: 70px 145px 70px}

.carousel-vertical {
  margin: 0px 25%;
  width: 50%;
  height: 350px;
  position: relative;
  overflow: hidden; 
}

.carousel-vertical .track-wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.carousel-vertical .track {
  display: flex;
  flex-direction: column;
  width: 100%;
  transform: translateY(0);
  will-change: transform;
}

.carousel-vertical ul {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
}

.carousel-vertical li {
  flex-shrink: 0;
}

.carousel-vertical img {
  display: block;
  width: 100%;
  height: auto;
}

.cv_arrow {
  position: absolute;
  left: 0px; width: 100%;
  border: none;
  cursor: pointer;
  padding: 0px;
  z-index: 2;
  display: block;font-size: 20px;
}

.cv_arrow.cv_up {
  top: 0px;
  background: -webkit-linear-gradient(0deg, rgba(255, 250, 255, 0) 0%, #ffffff 90%);
   background: linear-gradient(0deg, rgba(255, 25, 255, 0) 0%, #ffffff 90%); padding: 0px 0px 40px
}

.cv_arrow i {opacity: 0.4}

.cv_arrow.cv_down {
  bottom: 0px;
background: -webkit-linear-gradient(90deg, #ffffff 0%, rgba(255, 25, 255, 0) 100%);
background: linear-gradient(0deg, #ffffff 10%, rgba(255, 250, 255, 0) 100%); padding: 40px 0px 0px
}

.carousel-vertical:hover .cv_arrow {
  display: block;
}

.cv_arrow.hidden {
  display: none !important;
}

.op_txt {font-size: 30px; line-height: 36px; font-weight: normal; text-align: center; margin-bottom: 20px}
.op_name {font-size: 18px; line-height: 23px; font-weight: normal; text-align: center; margin-bottom: 50px; color: var(--red)}

/* Cookies */
.cookies_h {height: 263px; position: fixed; bottom: 0px; left: 0px; z-index: 3000; background: var(--twhite); width: 100%}
.c_butts {width: 50%; margin: 20px 25% 0px; border: 0px solid #489}
.c_butts .k1b a {float: right}
.c_centered {position: absolute; top: 50%; transform: translateY(-50%); text-align: center; margin: 0px 145px}

.cookies_h h4, .cookies_pop h4 {font-size: 18px; margin: 0px 0px 10px!important; line-height: 10px; padding: 0px}
.cookies_h p, .cookies_pop p {font-size: 14px; margin: 0px!important; line-height: 19px; }

.cookies_pop {background: var(--white); width: calc(100% - 280px); margin: 140px 140px 10px; display: block; z-index: 3000; position: absolute; top: 0px; left: 0px; padding-bottom: 80px}
.cookies_pop .top {margin: 80px 15% 80px; text-align: center; }
.cookies_pop .c_list {width: calc(100% - 160px) ; border-top: 1px solid var(--lngrey); padding: 80px}

.c_list .c_item {margin-bottom: 30px}
.c_list .c_item h3 {margin: 0px 0px 5px; font-size: 18px; display: inline-block}
.c_list .c_item p {margin: 0px 0px 5px; font-size: 14px}
.c_list .c_item input[type=checkbox] {display: inline-block; margin: 0px 5px 0px 0px!important}

.c_list h3 {font-size: 18px!important; margin: 0px 0px 10px!important; font-weight: bold!important}
.c_list p {font-size: 14px; margin: 0px 0px 40px!important; line-height: 19px; display: block}

.warning_green {font-size: 14px; color: var(--text); padding: 10px; background: var(--green10); display: table; border: 1px solid var(--green); margin: 10px 0px}
.warning_green i {color: var(--green)}

.warning_red {font-size: 14px; color: var(--text); padding: 10px; background: var(--red10); display: table; border: 1px solid var(--red); margin: 10px 0px}
.warning_red i {color: var(--red)}

.accordion_list {
  background: none; font-weight: normal;
  cursor: pointer;
  padding: 5px 0px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 14px;
  transition: 0.4s; border-bottom: 1px solid var(--lngrey); margin: 10px 0px 0px
}

.accordion_list i {font-size: 12px ; color: var(--text70); margin-right: 5px}

.active, .accordion_list:hover {
  background: none;
}

.accordion_list:after {
  content: '\002B';
  color: var(--lngrey);
  font-weight: normal;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\00D7";
}

.accordion_panel {
  padding:  0px 0px; width: 100%;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.footer {width: 100%; height: 297px; position: relative}
.footer_cont {position: absolute; top: 50%; transform: translateY(-50%); width: calc(100% - 290px); padding: 0px 145px; color: text; font-size: 11px; line-height: 16px}

.footer_cont a {color: var(--black); white-space: nowrap}