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


/******************************************************************************************************/
@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
    
.titol_h {font-size: 36px!important; line-height: 40px; }
.text {font-size: 20px!important; line-height: 26px; margin: 0px!important; padding: 0px!important}
    
.line_button, .bk_line_button, .black_button {width: 205px; height: 48px; line-height: 48px; padding-left: 0px; text-align: center}

 
.home_lema {position: absolute; top: 0px; z-index: 20; border: 0px solid #f90; width: 100vw; height: 100vh}
.lema { left: 20px; width: calc(100vw - 40px)!important; border: 0px solid #456; text-align: center}
.lema h1 {font-size: 55px!important; line-height: 54px; font-family: 'Neue_Haas_b'; margin: 0px 0px 30px 0px!important; padding: 0px 10%!important}
.lema h3 {font-size: 18px!important; line-height: 23px;width: 80%; margin: 0px 10%!important }
    
.lema a {margin: 30px auto 0px!important }    
.line_button {display: table; color: var(--white); border: 1px solid var(--white); width: 111px; height: 48px; line-height: 48px; padding-left: 20px; padding: 0px 20px}
    
.info1 {min-height: 750px; width: calc(100% - 20px); display: grid; gap: 0px; grid-template-columns: repeat(1, 1fr); padding: 0px 10px; position: relative; }


.info_table img {height: 50px}
.info_table h5 {font-size: 18px; }
.info_table p {font-size: 18px; line-height: 23px}
    
.info_card {border: 0px solid #789; position: relative; width: 100%}
    
.info_table {position: absolute; top: 50%; transform: translateY(-50%); width: 100%; border: 0px solid #f89; left: 0px}
    
.info_table tr:first-child td {height: 70px}

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

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

.install {width: calc(100vw - 50px)!important; margin: 0px 20px 20px!important; position: relative}

.install .ins_img {width: 100%; margin: 0px 0px 30px}
    
.intsallations {
  grid-template-columns: 50% 50% ;margin: 10px 0px 10px; width: calc(100% - 0px)!important; padding: 0px!important
}
    
.boxins {
  border: 0px solid #ee0000!important;
}


.i1ab {grid-row: 1 ;  grid-column: 1 / span 2; padding-right: 0%; padding-bottom: 30px!important} 
/*.i1bb {grid-row: 1 / span 2;  grid-column: 2 / span 2; background: red} */

.i1b {grid-row: 2;  grid-column: 1; margin-left: 0px;} 
.i1c {grid-row: 2;  grid-column: 2; margin-left: 10px;} 
.i2b {grid-row: 3;  grid-column: 1; margin-left: 0px; } 
.i2c {grid-row: 3;  grid-column: 2; margin-left: 10px;} 
    
.intsallations h4 {font-size: 15px!important; line-height: 23px; }
.intsallations h1 {font-size: 39px!important; line-height: 40px; }

.carousel-controls {
      margin: 20px 0px;
      height: 230px;
    }
.c_arrow {height: 230px; width: 50px!important;     }
.c_arrow.c_left { left: 0px;padding: 0px 20px 0px 10px; color: var(--white)}
.c_arrow.c_right { right: 0px; padding: 0px 10px 0px 20px; color: var(--white)}
    
.opinions {width: calc(100vw - 100px)!important; margin: 20px 50px!important; padding: 0px!important}
    
.carousel-vertical {
  margin: 0px!important;
  width: calc(100% - 15px)!important;
  height: 350px;
  position: relative;
  overflow: hidden;  background: none
}    
    
.op_txt {font-size: 24px; line-height: 32px;}
    
    
/* double sq */

/* double sq */
.double {
  display: grid; position: relative!important;
  grid-gap: 0px;
  grid-template-columns: 100% ;
  padding: 0px;
  margin: 0px;
  width: 100%; height: auto; max-height: 1720px
}

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

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

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

.dtext {position: relative; top: 0%; left: 0%; transform: translateX(0%) translateY(0%); max-width: 1460px; width: calc(100% - 40px); margin: 40px 20px }
.db_img {position: relative; top: 0%; left: 0%; transform: translateX(0%) translateY(0%); height: 335px; width: calc(100% - 40px); margin: 0px 20px}
    
.bg_contain {background-size: 90% 90%!important; }
    
.d1b .hh, .d1c .hh, .d1a .hh {height: 335px; display: table}
    
.exit {width: calc(100vw - 40px); margin: 60px 20px 60px}
.exit .intro {width: 100%}    
   
.carousel-players {
  margin: 50px 0px;
  height: 230px;
  position: relative;
  width: 100%;
  overflow: hidden;
  border: 0px solid #909; background: none
}
 
.carousel-players img {
  display: block;
  height: 230px;
  width: auto;
  margin: 0px 10px
}

.carousel-players .track-wrapper {
  width: calc(100% - 90px);
  border: 0px solid #f90;
  overflow: hidden;
  margin: 0px 45px
}
    
.carousel-players .c_arrow.c_left {
  left: 0px; color: var(--black)
}
.carousel-players .c_arrow.c_right {
  right: 0px; color: var(--black)
}
    
.accord {width: 100%; padding: 20px 0px 20px 0%; border-top: 1px solid var(--lngrey)}
    
.accordion_faq {  font-size: 24px;}
.panel {  padding:  0px 0px; width: 100%;}

    

/************ PAGES **********/
.main_image {height: 475px;}
.main_image .lema_p {font-size: 55px!important; line-height: 55px!important; }
    
.intro_p {width: 100%!important; margin: 20px 0px 0px!important}
.intro_p .titl  {font-size: 36px!important; line-height: 40px!important; margin: 0px 0px 30px;}
.intro_p .txt  {font-size: 18px; line-height: 23px; width: 100%!important}
    
.dtext_p {position: relative; top: 0%; left: 0%; transform: translateX(0%) translateY(0%); width: 100%; padding: 20px  }
.list_p {width: 100%; font-size: 18px; line-height: 25px}
.list_p i {font-size: 14px; transform: translateY(-1px)}
.list_p li {margin: 0px 0px 5px -40px!important; padding: 0px!important}
    
.wrapperpack {
  display: grid;
  grid-gap: 0px;
  grid-template-columns: 100%;
  padding: 0px;
  margin: 0px;
  width: 100%;
min-height: 450px; border: 1px solid var(--lngrey)}

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

.p1a {grid-row: 1;  grid-column: 1;position: relative; border-right: 0px solid var(--lngrey); border-bottom: 1px solid var(--lngrey)} 
.p1b {grid-row: 2;  grid-column: 1;position: relative;} 
.p3a {grid-row: 3;  grid-column: 1;position: relative; display: block} 
    
.pack_radios {position: relative; bottom: 15px; right: 0px; margin: 10px auto 10px; background: none; display: table}
    
.pack_radios label {display: inline-block; margin-left: 20px; margin-right: 20px }
    
.pack_right {position: relative; top: 0%; left: 0%; transform: translateX(0%) translateY(0%); padding: 30px 30px 30px 20px}
.pack_left {position: relative; top: 0%; left: 0%; transform: translateX(0%) translateY(0%); background: none; width: calc(100% - 0%); font-size: 20px; line-height: 26px; padding: 30px 30px 30px 20px}

.title_c .day {font-size: 24px;}
    
.wrapperpack .price {font-size: 55px;}
    
.pack_button_m {display: block; color: var(--white); border: 1px solid var(--black); width: calc(100% - 16px); height: 48px; line-height: 48px; padding-left: 16px; background: var(--black); cursor: pointer}
.pack_button_m i {float: right; line-height: 48px; margin-right: 16px}
    
.pk_included {margin: 20px 0px 0px; display: grid; gap: 10px; grid-template-columns: repeat(1, 1fr)}
    
.otros_servicios {width: 100%; background: none; display: grid; gap: 40px; grid-template-columns: repeat(1, 1fr)}

.otro .imatge {height: 215px;}
.otro .imgfoot {font-size: 15px}
    
    
    
}


/**************** tablet ************/
@media all and (max-width: 1440px) {
    
.home_lema {position: absolute; top: 0px; z-index: 20; border: 0px solid #f90; width: 70vw; height: 750px}
    
.lema { left: 20px; width: calc(70vw - 20px); border: 0px solid #456 }

.info1 {width: calc(100vw - 200px); border: 0px solid #456; padding: 0px 100px }

    
.install {width: calc(100vw - 0px); margin: 0px 0px 40px}

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

.intsallations {
  padding: 20px;
  width: calc(100% - 50px);
}
    
.opinions {width: calc(100vw - 40px); margin: 40px 20px 40px}
    
.int_pages {width: calc(100vw - 50px)!important; margin: 40px 20px 40px!important;}
    

.carousel-vertical {  margin: 0px 15%;  width: 70%;}
    
.faqs {width: calc(100vw - 50px); padding: 30px 20px 30px;}
    
.c_butts {width: 60%; margin: 20px 20% 0px}
    
.c_centered {margin: 0px 25px}
    
.cookies_pop {width: calc(100% - 160px); margin: 90px 80px 10px;padding-bottom: 40px}
    
.footer {width: 100%; height: 200px; position: relative}

.footer_cont {width: calc(100% - 40px); padding: 0px 20px; top: 50%; transform: translateY(0%)}
    

/************ PAGES **********/
    
/* campus */

.campus_collage {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 50% 50%;
  padding: 0px;
  margin: 30px 0px 30px;
  width: calc(100% - 20px);
}



.cl2bb {grid-row: 1;  grid-column: 1 / span 2; position: relative ; margin-right: 0px;margin-top: 0px; margin-bottom: 0px; height: auto} 
.cl1cc {grid-row: 2;  grid-column: 1 / span 2; position: relative; margin-left: 0px; height: auto; margin-bottom: 0px} 
    
.cl1b {grid-row: 3;  grid-column: 1; position: relative; margin-right: 0px} 
.cl2d {grid-row: 3;  grid-column: 2; position: relative; margin-left: 0px; margin-top: 0px  ; } 
    
.cl1a {grid-row: 5;  grid-column: 1; position: relative; margin-right: 20px ; display: none} 

.cl2a {grid-row: 5;  grid-column: 1; position: relative ; margin-right: 10px; margin-top: 10px; display: none} 

.boxcoll img {height: auto; width: 100%; padding: 0px; margin: 0px}

.cl1cc img {position: relative; left: 0px; bottom: 0%}

.cl2d img {position: relative; left: 0px; bottom: -20%}
    
.exit_campus {margin: 30px 0px 30px 20px}
.exit_campus span {white-space: normal}
    
.campus_pl {width: 100%; background: none; display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr)}
    
.playr .phot {; height: 230px; background-size: cover!important; background-position: top center!important; background-repeat: no-repeat; margin-bottom: 10px}
    
/*facilities */

.ins_collage {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 50% 50%;
  padding: 0px;
  margin: 30px 0px 30px;
  width: calc(100% - 10px);
}

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

.in1cc {grid-row: 1;  grid-column: 1/ span 2 ; position: relative; margin-right: 0px} 
.in1cc img {position: relative; left: 0px; bottom: 0%}
.in3d {grid-row: 2;  grid-column: 1; position: relative; margin-left: 0px; margin-top: 0px  ; } 
.in3d img {position: relative; left: 0px; bottom: 0%; margin-bottom: 50px}
    
.in1aa {grid-row: 2;  grid-column: 2 ; position: relative; margin-right: 0px; } 
.in1aa img {position: relative; left: 0px; bottom: 0px; margin-top: 50px}
.in2cc {grid-row: 3;  grid-column: 1 / span 2; position: relative; margin-left: 0px; height: auto} 
.in2cc img {position: relative; left: 0px; bottom: 0%}
    
.in2b {grid-row:4;  grid-column: 1; position: relative; margin-right: 0px} 

.in2a {grid-row: 7;  grid-column: 1; position: relative; margin-right: 20px ; display: none} 

.in3a {grid-row: 7;  grid-column: 1; position: relative ; margin-right: 10px; margin-top: 10px; display: none} 
.in3bb {grid-row: 7;  grid-column: 2 / span 2; position: relative ; margin-right: 20px;margin-top: 10px; display: none} 

.out_num {font-size: 55px;}
    
.contact_form {width: 100%}
.contact_form .left {; text-align: center!important}

}