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

.int_pages {width: calc(100vw - 290px); margin: 60px 145px 30px; background: none; flex-grow: 1}
.interior_pages {width: calc(100vw - 290px); margin: 60px 145px 30px; flex-grow: 1}

.int_pages .title {font-size: 30px; margin: 0px 0px 10px 0px!important; background: none; padding: 0px; width: 100%} 
.subtitle {font-size: 20px} 

.expl {font-size: 13px; margin: 10px 0px 0px 0px!important; background: none; padding: 0px; width: 100%}

.edit_form {width: 100%; margin: 40px 0px 30px; }

.edit_form label {font-size: 16px; margin: 20px 0px 5px; display: block}

.input_text {border: 1px solid var(--text70); padding: 5px 2px;  font-size: 14px; font-family: Arial, "sans-serif"; color: var(--text90); display: block; width: 100%; margin: 0px; background: var(--white)}

.login_text {border: 1px solid var(--text70)!important; padding: 5px 2px!important;  font-size: 14px!important; color: var(--text90)login_text; display: block; width: 50%; margin: 0px!important; background: var(--white)!important}

.login_text:focus, .input_text:focus {border-bottom: 1px solid var(--red)!important; ;outline: none!important}

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

.star {color: var(--red); margin-left: 2px}

.current_img {display: block; max-width: 200px; max-height: 100px}

.hr100 {width: 100%; border: none; background: var(--lngrey); height: 1px; margin: 90px 0px}

/* edit home */

.edit_home_banner {display: none}

.links_bar {border: 0px solid #f89; margin: 10px 0px 30px; display: grid; gap: 1px; grid-template-columns: repeat(5, 1fr)}

.links_bar .tablink {background: var(--text03); border: none; color: var(--black); padding: 6px 0px; text-align: center; font-size: 14px; cursor: pointer}
.links_bar .w3-red {background: var(--red); color: var(--white); pointer-events: none; font-weight: bold}




.dash_table {border-top: 1px solid var(--text04); border-left: 1px solid var(--text04); font-size: 13px; margin: 10px 0px 20px}
.dash_table b {font-size: 12px}

.dash_table i {margin: 0px 3px; color:var(--red)}

.dash_table th, .dash_table td {border-bottom: 1px solid var(--text04); border-right: 1px solid var(--text04); padding: 3px} 

.dash_table img {max-height: 70px; max-width: 140px; margin: 0px; padding: 0px}
.dash_table th {background: var(--text03); padding: 5px 3px}

.new_item {text-align: right; float: right; display: block; color: var(--text90); font-size: 13px; margin: -15px 0px 10px}
.new_item i {font-size: 12px; color: var(--red)}

/* gnal pages */
.main_image {height: 575px; position: relative; background-size: cover!important; background-position: center center!important; background-repeat: no-repeat}
.main_image .lema_p {color: var(--white); font-size: 80px; line-height: 85px; font-family: 'Neue_Haas_b'; width: 100%; text-align: center; top: 35%; transform: translateY(-50%); position: absolute}

.intro_p {width: 50%; margin: 80px 0px 0px}
.intro_p .titl  {font-size: 60px; line-height: 65px; font-family: 'Neue_Haas_b', sans-serif; margin: 0px 0px 30px}
.intro_p .txt  {font-size: 20px; line-height: 26px; width: 65%}
.intro_p a  {color: var(--black); font-weight: bold}

.intro_p100 {width: 100%}
.intro_p100 .titl {border-bottom: 1px solid var(--lngrey); padding-bottom: 10px}
.intro_p100 .txt { width: 50%}

.dtext_p {position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); width: 60%; }

.list_p {width: 100%; font-size: 20px; line-height: 25px}
.list_p ul {list-style-type: none ;list-style-position: inside; margin-top: 30px;}
.list_p li {margin: 0px 0px 10px -40px!important; padding: 0px!important}
.list_p i {font-size: 16px; color: var(--red); transform: translateY(-1px)}

/* paks */

.pack_radios {position: absolute; bottom: 20px; right: 0px}

.wrapperpack {
  display: grid;
  grid-gap: 0px;
  grid-template-columns: 450px calc(100% - 450px);
  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: 1px solid var(--lngrey)} 
.p1b {grid-row: 1;  grid-column: 2;position: relative;} 
.p3a {grid-row: 3;  grid-column: 1;position: relative; display: none} 

.pack_right {position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%)}


.table_pack {width: 350px; display: block}
.table_pack .icon {width: 72px; height: 72px; background: var(--red10)}
.table_pack img {width: 44px; height: 44px; margin: 14px}

.title_c {width: 286px; padding-left: 20px}
.title_c .day {font-size: 32px; font-weight: bold; display: block}
.title_c .age {font-size: 15px; font-weight: normal; display: block; opacity: 0.5}
.wrapperpack .price {font-family: 'Neue_Haas_b', sans-serif ;font-size: 50px; display: inline-block; margin: 0px!important}
.wrapperpack p { margin-bottom: 0px!important}

.pack_button {display: block; color: var(--white); border: 1px solid var(--black); width: 100%; height: 48px; line-height: 48px; padding-left: 16px; background: var(--black); cursor: pointer}
.pack_button i {float: right; line-height: 48px; margin-right: 16px}

.pack_left {position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); background: none; width: calc(100% - 30%); font-size: 20px; line-height: 26px}

.pack_left b {font-weight: bold}
.pack_left a {font-weight: normal; color: var(--black); font-size: 15px; margin-top: 30px; display: table}
.pk_included {margin: 20px 0px 0px; display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr)}
.inc_item  {margin: 0px!important}
.inc_item i {font-size: 16px; transform: translateY(-1px)}

.nopage  {position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%)}
.nopage img {height: 100px}
.nopage h3 {font-size: 20px; opacity: 0.5!important; font-weight: normal!important}

/* other */
.otros_servicios {width: 100%; background: none; display: grid; gap: 40px; grid-template-columns: repeat(2, 1fr)}

.otro .imatge {height: 350px; margin: 0px 0px 10px; background-size: cover!important; background-position: center center!important; background-repeat: no-repeat}

.otro .imgfoot {font-size: 18px; line-height: 23px}
.otro .imgfoot a {color: var(--linkgrey); opacity: 0.6; display: inline-block}
.otro .imgfoot a b {font-weight: bold; margin: 0px 4px 0px 10px; display: inline-block}

/* campus */

.campus_collage {
  display: grid;
  grid-gap: 0px;
  grid-template-columns: 25% 25% 25% 25%;
  padding: 0px;
  margin: 90px 0px 60px;
  width: 100%;
}

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

.cl1a {grid-row: 1;  grid-column: 1; position: relative; margin-right: 20px } 
.cl1b {grid-row: 1;  grid-column: 2; position: relative; margin-right: 20px} 
.cl1cc {grid-row: 1;  grid-column: 3 / span 2; position: relative; margin-left: 0px; height: 375px } 

.cl2a {grid-row: 2;  grid-column: 1; position: relative ; margin-right: 10px; margin-top: 10px} 
.cl2bb {grid-row: 2;  grid-column: 2 / span 2; position: relative ; margin-right: 20px;margin-top: 10px} 
.cl2d {grid-row: 2;  grid-column: 4; position: relative; margin-left: 0px; margin-top: 10px  ; } 

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

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

.cl2d img {position: absolute; left: 0px; bottom: 20%}

.campus_pl {width: 100%; background: none; display: grid; gap: 40px; grid-template-columns: repeat(4, 1fr)}
.playr {}
.playr .phot {background: red; height: 375px; background-size: cover!important; background-position: top center!important; background-repeat: no-repeat; margin-bottom: 10px}

.carousel-set .phot {background: red; height: 375px;  width: 275px; background-size: cover!important; background-position: top center!important; background-repeat: no-repeat; margin: 10px}

.exit_campus {margin: 50px 50% 20px 145px}

.exit_campus span {white-space: nowrap}


/* Create a custom checkbox */
.pack_radios label {display: inline-block; margin-left: 20px; }

.container_radio {
  display: block;
  position: relative;
  padding-left: 25px;
  cursor: pointer; margin: 0px;
  font-size: 15px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;border: 0px solid #ee0000
}

.container_radio input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 18px;
  width: 18px;
  background-color: #eee; border-radius: 21px
}

.container_radio:hover input ~ .checkmark {
  background-color: #ccc;
}

.container_radio input:checked ~ .checkmark {
  background-color: red;
}

.checkmark:after {
  content: "";
  position: absolute; height: 8px; width: 8px;
  display: none;
  border: 2px solid #ffffff; border-radius: 20px; top: 3px; left: 3px
}

.container_radio input:checked ~ .checkmark:after {
  display: block;
}


/*facilities */

.ins_collage {
  display: grid;
  grid-gap: 0px;
  grid-template-columns: 25% 25% 25% 25%;
  padding: 0px;
  margin: 220px 0px 60px;
  width: 100%;
}

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

.in1aa {grid-row: 1;  grid-column: 1/ span 2 ; position: relative; margin-right: 20px } 
.in1aa img {position: absolute; left: 0px; bottom: 20px}
.in1cc {grid-row: 1;  grid-column: 3/ span 2 ; position: relative; margin-right: 0px } 
.in1cc img {position: relative; left: 0px; bottom: calc(20% + 40px)}

.in2a {grid-row: 2;  grid-column: 1; position: relative; margin-right: 20px } 
.in2b {grid-row:2;  grid-column: 2; position: relative; margin-right: 20px} 

.in2cc {grid-row: 2;  grid-column: 3 / span 2; position: relative; margin-left: 0px; height: 375px } 
.in2cc img {position: absolute; left: 0px; bottom: calc(20% + -10px)}

.in3a {grid-row: 3;  grid-column: 1; position: relative ; margin-right: 10px; margin-top: 10px} 
.in3bb {grid-row: 3;  grid-column: 2 / span 2; position: relative ; margin-right: 20px;margin-top: 10px} 
.in3d {grid-row: 3;  grid-column: 4; position: relative; margin-left: 0px; margin-top: 10px  ; } 
.in3d img {position: absolute; left: 0px; bottom: calc(20% - 20px)}

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


.out_num {color: var(--black); font-family: 'Neue_Haas_b', sans-serif;font-size: 75px; white-space: nowrap;
            text-shadow:
                -0px -0px 0 var(--white),
                0px -0px 0 var(--white),
                -0px 0px 0 var(--white),
                0px 0px 0 var(--white),
                -1px 0px 0 var(--white),
                1px 0px 0 var(--white),
                0px -1px 0 var(--white),
                0px 1px 0 var(--white);
        }

/* contacto */

.contact_form {width: 50%; border: 0px solid #456}

.disabled1 {opacity: 0.3; pointer-events: none}
.disabled {opacity: 1}
.politica {font-size: 85%; color: var(--text70)}
.politica a {color: var(--red)}

.floating-label {
  position: relative;
  margin-bottom: 40px;
}

.floating-label input,
.floating-label select,
 .cont_textarea textarea {
  width: 100%;
  padding: 6px 0px 10px;
  border: none; border-bottom: 1px solid var(--lngrey);
  border-radius: 0px;
  font-size: 16px;
  background: var(--white);
  appearance: none;
  resize: vertical;
  min-height: 10px;  
}

.cont_textarea textarea {border: 1px solid var(--lngrey); padding: 6px 3px; width: calc(100% - 6px); margin: 5px 00px 0px}


.floating-label input:focus,
.floating-label select:focus,
 .cont_textarea textarea:focus {outline: none!important}



.floating-label label {
  position: absolute; width: 100%; background: none;
  top: 12px;
  left: 0px;
  padding: 0px;
  color: #aaa;
  transition: all 0.2s ease-in-out;
  pointer-events: none;
}

.dropdown-icon {float: right; transform: translateY(7px); font-size: 80%}

/* Floating effect for all input types */

.floating-label .contact_input:focus + label,
.floating-label .contact_input.has-value + label {
  top: -15px;
  left: 0px;
  font-size: 12px;
  color: var(--text04); 
}



.char-counter {float: right; font-size: 80%; opacity: 0.7; margin: 0px; padding: 0px; transform: translateX(2px)}


.custom-select {
  position: relative; width: 100%!important; margin-bottom: 50px
}

.custom-select select {
  display: none; 
}

.select-selected {
  background-color: var(--white); color: var(--black)!important;
  padding: 6px 0px 5px!important;
  border: none; border-bottom: 1px solid var(--lngrey)!important;
  border-radius: 0px;
  font-size: 16px;
}


/* Style the arrow inside the select element: */
.select-selected:after {
  content: "";
  position: absolute;
  top: 15px;
  right: 3px;
  width: 6px;
  height: 6px;
  border-style: solid;
  border-width: 0 1px 1px 0;
  border-color: var(--lngrey);
  transform: rotate(45deg);
  pointer-events: none;
}

/* Point the arrow upwards when the select box is open (active): */
.select-selected.select-arrow-active:after {
  content: "";
  position: absolute;
  top: 18px;
  right: 3px;
  width: 6px;
  height: 6px;
  border-style: solid;
  border-width: 1px 1px 0 0; /* top and right borders */
  border-color: var(--lngrey);
  transform: rotate(-45deg);
  pointer-events: none;
}

/* style the items (options), including the selected item: */
.select-selected {
  color: var(--black);
  padding: 8px 16px;
  border: 0px solid transparent;;
  cursor: pointer;
}

.select-items div {
  color: var(--black);
  padding: 8px 16px;
  border: 1px solid transparent;
  border-color: transparent var(--lngrey) var(--lngrey) var(--lngrey);
  cursor: pointer;
}

/* Style items (options): */


.select-items {
  position: absolute;
  background-color: var(--white);
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
}

/* Hide the items when the select box is closed: */
.select-hide {
  display: none;
}

.select-items div:hover {
  background-color: var(--black); color: var(--white)
} 
.same-as-selected {
  background-color: var(--bggrey)
} 

/* footer pages */
.footer_pages {margin: 60px 0px 10px}
.footer_pages p {margin: 0px 0px 10px; font-size: 16px; line-height: 23px}
.footer_pages a {color: var(--red)}
.footer_pages br {margin: 0px 0px 5px}

.footer_pages h3 {margin: 30px 0px 10px!important; color: var(--red); font-weight: normal!important; padding: 0px!important; font-size: 20px}
.footer_pages h3 b {margin-right: 5px}

.foot_table {font-size: 16px; margin: 20px 0px 10px; width: 50%; border: 1px solid transparent; border-color: transparent transparent var(--text04) var(--text04)}
.foot_table td, .foot_table th {border: 1px solid transparent; border-color: var(--text04) var(--text04) transparent transparent; padding: 5px; text-align: left}
.foot_table th {background: var(--bggrey)}

.footer_pages h4 {margin: 30px 0px 10px!important; color: var(--text); font-weight: normal!important; padding: 0px!important; font-size: 18px}
.footer_pages h4 b {margin-right: 5px}

.list_alfa {list-style: lower-alpha!important; width: 100%; margin: 0px 0px 10px 0px}
.list_alfa li {margin: 0px 0px 5px -20px}

.list_line {list-style: none!important; width: 100%; margin: 0px 0px 10px 0px}
.list_line li {margin: 0px 0px 5px -30px!important}
.list_line li::before {
    content: "-";
    margin: 0px 5px 0px -10px; font-size: 14px; font-weight: bold; transform: translateY(-2px); display: inline-block
}
.list_line span {line-height: 23px}