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

/*colours*/
:root {
  --main: #147cac; /*20,124,172*/
  --secondary: #199DDA; /*25,157,218*/
  --generaltext: #444;
  --greylight: #ccc;
  --greyvlight: #efefef;
  --error: #FF495C;
  --mainlight: rgba(20,124,172,0.2);
  --secondarylight: rgba(25,157,218,0.1)
}

/* fonts */
@font-face {
  font-family: "Text";
  src: url("../fonts/OpenSans-Variable.woff2") format("woff2"),
       url("../fonts/OpenSans-Variable.ttf") format("truetype-variations");
  font-weight: 100 1000;
  font-display: swap;
}   
@font-face {
  font-family: "Display";
  src: url("../fonts/Bitter-Variable.woff2") format("woff2"),
       url("../fonts/Bitter-Variable.ttf") format("truetype-variations");
  font-weight: 100 1000;
  font-display: swap;
}   

/* generic */
html, body { padding: 0px; margin: 0px ; 
font-family:  'Text', "sans-serif";
    font-size: 1em;
    color: var(--generaltext)
}

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


*  {margin: 0px; padding: 0px; box-sizing: border-box;}
a {  text-decoration: none; }

a:hover {text-decoration: underline;}

p {font-weight: 300; font-size: 1em; line-height: 1.3em}

button {border: none}

.readonly {opacity: 0.6}


#home_display {border: 0px solid #f09; margin: 0px; padding: 0px; position: relative; top: 5px; overflow-x: hidden}
#home_main {border: 0px solid #f09; margin: 10px 240px 30px; padding: 0px; position: relative; top: 0px; flex:1; }

#home_main h3 {font-size: 1.4em; font-weight: 350; color: var(--secondary); margin: 5px 0px}
#home_main p a { color: var(--main); font-weight: 400}
#home_main p b {color: #000; font-weight: 400}

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

#home_display_logged {border: 0px solid #f09; margin: 0px; padding: 0px; position: relative; top: 0px; height: 400px; display: block;
background-size: cover; background-position: center center}

.ops {position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); width: auto; border: 0px solid #f09}

.ops h2 {font-family:  'Display', "serif";
    font-weight: 400;
    font-size: 3.1em;
    text-align: center;
    line-height: 1.35em;
    padding: 0px; margin:0px;
    color: #fff;}

.thank_signup {border: 0px solid #f90; font-size: 1.1em; font-weight: 500}


/* 2 responsive columns */
.column2 {
  float: left;
  width: calc(50% - 20px);
  padding: 0px 10px!important; border: 0px solid #f09; margin: 0px
}

.row2 {margin: 0px -10px!important; padding: 0px!important; min-width: 100%}

.row2:after {
  content: "";
  display: table;
  clear: both;
}

/* end 2 responsive columns */

/* 3 responsive columns */
.column3 {
  float: left;
  width: calc(33.3% - 20px);
  padding: 0px 10px!important; border: 0px solid #f09; margin: 0px
}

.row3 {margin: 0px -10px!important; padding: 0px!important; min-width: 100%}

.row3:after {
  content: "";
  display: table;
  clear: both;
}

/* end 3 responsive columns */


/*** caroulsel ***/

.loop-container-flex {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-wrap: wrap;
  border: 0px solid #f09;
    z-index: 0;
    position: relative;
    top: -5px; left: 0px; background: var(--secondary);
}

.bg-trans-cross-fade {
  width: 100%;
  height: 500px;
  position: relative;
  z-index: 1;
  margin: 0px;
}

.bg-trans-cross-fade .bg-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
    background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom right;
}

.bg-trans-cross-fade .bg-layer .fg-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  background-size: cover;
    background-repeat: no-repeat;
  background-position: bottom right;
  transition: opacity 2s;
}

.bg-trans-cross-fade .bg-layer .fg-layer::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  opacity: 0;
  z-index: 4;
}

/*** end caroulsel ***/
.bg-trans-cross-fade .bg-layer .display-layer {
  border: 0px solid #f09;
  position: absolute;
  top: 50%;
  left: 50%;
    transform:  translateY(-50%) translateX(-50%);
  width: 80%;
  height: auto;
  justify-content: center;
  align-items: center;
  z-index: 30;
    padding: 0px; margin: 0px;
}

.maintextshadow {text-shadow: 2px 2px 4px rgba(0,0,0,0.2)}

.bg-trans-cross-fade .bg-layer .display-layer h2 { 
font-family:  'Display', "serif";
    font-weight: 400;
    font-size: 4.8em;
    text-align: center;
    line-height: 1.35em;
    padding: 0px; margin: 0px 0px 0px 0px;
    color: #fff;
}
.bg-trans-cross-fade .bg-layer .display-layer h3 { 
font-family:  'Display', "serif";
    font-weight: 350;
    font-size: 3.0em;
    text-align: center;
    line-height: 1.15em;
    padding: 0px; margin: 0px 0px 0px 0px;
    color: #fff;
}

.bg-trans-cross-fade .bg-layer .display-layer h4 { 
    font-weight: 200;
    font-size: 1.4em;
    text-align: center;
    padding: 0px; margin: 30px 160px 0px;
    color: #fff
}


.main_bt_columns {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	margin: 55px 0px 0px;
    text-align: center;
}

.main_bt_col {
	flex: 1;
	border: 0px solid gray;
	margin: 0px;
	padding: 0px;
	&:first-child { margin-left: 0; }
	&:last-child { margin-right: 0; }
}


.main_bts {margin: 50px 0px; border: 1px solid #f90; width: 100%}

.button {font-weight: 400; padding: 8px 40px; border-radius: 300px;color: #fff; background: var(--main);text-shadow: 1px 1px 2px 0px rgba(0,0,0,0.2); white-space: nowrap;cursor: pointer}
.button_l {font-weight: 400; padding: 8px 40px; border-radius: 300px;color: #fff;text-shadow: 1px 1px 2px rgba(0,0,0,0.2); white-space: nowrap; border: 1px solid #fff;}
.button_w {font-weight: 400; padding: 8px 40px; border-radius: 300px;color: var(--main); background: #ffffff;text-shadow: 1px 1px 2px 0px rgba(0,0,0,0.2); white-space: nowrap;cursor: pointer}


.button_100 {width: 100%; display: block}
    
.form_but {font-weight: 400; padding: 6px 20px; border-radius: 300px;text-shadow: 1px 1px 2px rgba(0,0,0,0.2); white-space: nowrap; opacity: 1 ; background: var(--secondary); border: none; color: #fff}   

.button_small {font-weight: 400; padding: 6px 20px; border-radius: 300px;color: #fff; background: var(--main); white-space: nowrap;cursor: pointer; border: none; text-shadow: 1px 1px 2px  rgba(0,0,0,0.2);}


.create_bt {font-size: 1.1em; margin: 0px -40% 0px 0px }
.request_bt {font-size: 1.1em;  margin: 0px 0px  0px -40%  ; background: none}

.alert {font-size: 0.9em; color: var(--error)}
.welcome {font-size: 1em; color: var(--secondary); margin: 10px 0px}

.lema {    font-weight: 400;
    font-size: 1.7em;
    text-align: center;
    padding: 0px; margin: 30px 0px 0px;
    color: #444;
    font-family:  'Display', "serif";
    display: inline-block;
    width: 100%
}

/*animate word */

   .animate {
       display: inline-block;
       margin: 0;
       padding: 0;
       border: 0px solid #f09; text-align: left; width: 3.3em;
   }
   
   .animate:before {
       content: "event";
       -webkit-animation-name: animate;
       -webkit-animation-duration: 2s;
       animation-name: animate;
       animation-duration: 25s;
       animation-delay: 0s;
       animation-iteration-count: infinite;
   }
   
   @keyframes animate {
       0% {
           content: "event";opacity: 1; 
       }
       15% {
           content: "event";opacity: 1; 
       }
       25% {
           content: "event";opacity: 0; 
       }
       26% {
           content: 'meeting';opacity: 0; 
       }
       35% {
           content: 'meeting';opacity: 1; 
       }
       65% {
           content: 'meeting';opacity: 1; 
       }
       74% {
           content: 'meeting';opacity: 0; 
       }
       76% {
           content: "event";opacity: 0; 
       }
       85% {
           content: 'event';opacity: 1; 
       }
       100% {
           content: 'event';opacity: 1; 
       }
   }

/*end animate word */

.section_title {font-size: 1.5em; font-weight: 500; margin: 0px 0px 25px 0px; color: var(--main)}

.section_title_m {font-size: 1.5em; font-weight: 500; margin: 0px 0px 5px 0px; color: var(--main)}

.subtitle  {font-size: 1.1em; font-weight: 400; margin: -10px 0px 25px 0px; color: var(--secondary)}

.button_w_logged {font-weight: 400; padding: 8px 40px; border-radius: 300px;color: var(--main); background: #ffffff;text-shadow: 1px 1px 2px 0px rgba(0,0,0,0.2); white-space: nowrap;cursor: pointer; text-transform: uppercase; margin: 30px 30px}


/* 3 columns */
.wrapperthree {
  display: grid;
  grid-gap: 0px;
  grid-template-columns: 33.3% 33.3% 33.3% ;
  padding: 0px;
  margin: 30px 0px;
  width: 100%;
}

.wrapperthree label { margin: 12px 0px 2px; display: block}

.invoice_request {width: 66%}
.boxthree {
  padding: 0px 20px;
  margin: 0px;
  text-align: center;
  border: 0px solid #ee0000;
}

.t1 {  grid-row: 1;  grid-column: 1;}
.t1a {  grid-row: 1;  grid-column: 1;text-align: left; padding: 0px}
.t1b {  grid-row: 1;  grid-column: 2;text-align: left; padding-left: 10px}
.t1aa {grid-row: 1;  grid-column: 1/ span 2; text-align: left; padding: 0px}

.t2 {  grid-row: 1;  grid-column: 2;}
.t2aa {grid-row: 2;  grid-column: 1 / span 2; text-align: left; padding: 0px}

.t3 {  grid-row: 1;  grid-column: 3;}
.t3a {grid-row: 3;  grid-column: 1 ; text-align: left; padding: 0px}

.t4a {grid-row: 4;  grid-column: 1 ; text-align: left; padding: 0px 5px 0px 0px}
.t4bb {grid-row: 4;  grid-column: 2 / span 2 ; text-align: left; padding: 0px}

.t5 {grid-row: 5;  grid-column: 1 / span 3; text-align: left; padding: 0px}

.t6a {grid-row: 6;  grid-column: 1 ; text-align: left; padding: 0px 5px 0px 0px}
.t6b {grid-row: 6;  grid-column: 2 ; text-align: left; padding: 0px 5px 0px 0px}
.t6c {grid-row: 6;  grid-column: 3 ; text-align: left; padding: 0px}

.t7aa {grid-row: 7;  grid-column: 1 / span 2; text-align: left; padding: 0px}

.t8aa {grid-row: 8;  grid-column: 1 / span 2; text-align: left; padding: 0px}

.t9b {grid-row: 9;  grid-column: 2 ; text-align: left; padding: 0px 5px 0px 0px}

.t10 {grid-row: 10;  grid-column: 1 / span 3; text-align: left; padding: 0px}



.t1 img, .t2 img, .t3 img {margin: 10px auto; height: 5.2vw; filter:drop-shadow(1px 1px 2px rgb(0 0 0 / 0.4))}
.t1 h3, .t2 h3, .t3 h3, .box_six h3 {color: var(--secondary); font-size: 3.7vh; font-weight: 600}
.t1 h5, .t2 h5, .t3 h5, .box_six h5 { font-size: 2.4vh; font-weight: 500; line-height: 3.2vh; margin: 10px 0px}

 .t3 .create_bt {margin: 0px auto;   }




.titulillo {font-size: 1.7em; font-weight: 500; text-align: center; color: #444; padding: 0px; margin: 80px 0px 50px; line-height: 1.6em; display: inline-block; 
font-family:  'Display', "serif";}


.list_display { font-size: 1.05em; line-height: 1.3em; list-style-position: inside; padding-left: 1em}
.list_display li {color: var(--main); font-weight: 600; margin: 0px 0px 25px; text-indent: -1em;}
.list_display li b {color: #000; font-weight: 600; }
.list_display li span {color: #444; font-weight: 400; border: 0px solid #f99}


.ticket_table {float: right; border: none; font-size: 1em; margin: 10px 0px 0px 30px}

.ticket_table td, .ticket_table th {border-top: 1px solid #ccc!important;border-right: 1px solid #ccc!important; border: none; padding: 6px 10px; }
.ticket_table tr:last-child td {border-bottom: 1px solid #ccc!important; }
.ticket_table td:first-child, .ticket_table th:first-child {border-left: 1px solid #ccc!important; }
.ticket_table th {background: #f6f6f6; font-weight: 600}

/* dos wrapper */
.wrapperdos {
  display: grid;
  grid-gap: 0px;
  grid-template-columns: 50% 50% ;
  padding: 0px;
  margin: 0px;
  width: calc(100% - 20px);
}
.boxdos {
  padding: 0px;
  margin: 0px;
  text-align: left;
  border: 0px solid #ee0000;
}

.dd1 {  grid-row: 1;  grid-column: 1 }
.dd2 {  grid-row: 1;  grid-column: 2 ; padding-left: 20px}

    .doscents {width: 200%!important}


/* dos wrapper */

/*****    Registration elements    *******/

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

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

.boxreg {
  padding: 0px;
  margin: 0px;
  text-align: left;
  border: 0px solid #ee0000;
}

label  {font-size: 1.1em; font-weight: 400; line-height: 1.4em }

.boxreg label { margin: 12px 0px 2px; display: block}

.r1 {  grid-row: 1;  grid-column: 1 / span 2; }
.r2 {  grid-row: 2;  grid-column: 1 / span 2; }
.r3 {  grid-row: 3;  grid-column: 1 / span 2;}
.r4 {  grid-row: 4;  grid-column: 1 / span 2; }

.r1a {  grid-row: 1;  grid-column: 1 }
.r1b {  grid-row: 1;  grid-column: 2 ; padding-left: 5px}

.r2a {  grid-row: 2;  grid-column: 1 }
.r2b {  grid-row: 2;  grid-column: 2 ; padding-left: 5px}


.r3a {  grid-row: 3;  grid-column: 1 / span 2}
.r4a {  grid-row: 4;  grid-column: 1 / span 2; }

.r5 {  grid-row: 5;  grid-column: 1 / span 2}
.r6 {  grid-row: 6;  grid-column: 1 / span 2; }


.r5a {  grid-row: 5;  grid-column: 1;  }
.r5b {  grid-row: 5;  grid-column: 2; padding-left: 5px}

.r6a {  grid-row: 6;  grid-column: 1 }
.r6b {  grid-row: 6;  grid-column: 2 ; padding-left: 5px}

.r7a {  grid-row: 7;  grid-column: 1 }
.r7b {  grid-row: 7;  grid-column: 2 ; padding-left: 5px}

.r7 {  grid-row: 7;  grid-column: 1 / span 2 }
.r8 {  grid-row: 8;  grid-column: 1 / span 2 }



.r8a {  grid-row: 8;  grid-column: 1 }
.r8b {  grid-row: 8;  grid-column: 2 ; padding-left: 5px}

.r9 {  grid-row: 9;  grid-column: 1 / span 2}

.r10 {  grid-row: 9;  grid-column: 1 / span 2}

.r11a {  grid-row: 11;  grid-column: 1;   }
.r11b {  grid-row: 11;  grid-column: 2;  ; padding-left: 5px}

.r12a {  grid-row: 12;  grid-column: 1;}
.r12b {  grid-row: 12;  grid-column: 2; padding-left: 5px}

.r13a {  grid-row: 13;  grid-column: 1;}
.r13b {  grid-row: 13;  grid-column: 2; padding-left: 5px}



.r29 {  grid-row: 29;  grid-column: 1 / span 2; margin: 0px 0px -15px; text-align: right!important;} /*forgot pass*/
.forgot {text-align: right!important; color: #777; font-size: 0.7em; font-weight: 300}
.r30 {  grid-row: 30;  grid-column: 1 / span 2; margin: 30px 0px 0px} /*submit*/


.r30a {  grid-row: 30;  grid-column: 1; margin: 30px 0px 0px; padding: 0px 5px 0px 0px} /*submit*/
.r30b {  grid-row: 30;  grid-column: 2; margin: 30px 0px 0px} /*submit*/

.star {color: var(--main); padding-left: 2px; font-weight: 200; }

.boxreg textarea, .boxfour textarea  {width: 100% ; display:flex; resize: none; font-family:  'Text', "sans-serif";font-weight: 350; color: #777;}
.smaller {font-weight: lighter; opacity: 0.85; font-size: 80%}

.wrapperreg input {width: 100%}

.reg_but {border: none; width: 50%!important; text-transform: uppercase; cursor: pointer}
.reg_but80 {border: none; min-width: 50%!important; text-transform: uppercase; cursor: pointer}
.input_text {background: #f9f9f9; border: 1px solid #f1f1f1; border-bottom: 1px solid #ccc; font-size: 1em; padding: 8px 0px 4px 4px; font-weight: 300; color: #777; margin: 2px 0px 1px; width: 100%; line-height: 1.5em}
.input_text::placeholder{ font-size:1em; color:#555}

.input_text:focus {background: #f9f9f9!important; border: 1px solid #f1f1f1!important; border-bottom: 1px solid var(--main)!important;
    outline: none !important;color: #444}

.select_option {padding: 8px 0px 8px 4px }

.errorlist {list-style-type: none;}

.errorlist li {margin: 20px 0px; font-size: 0.9; color: var(--secondary); font-weight: 300}

.required {border: 3px solid #f09!important}

.full_but {border: none; position: relative; bottom: -2px; margin: 0px 0px 0px 10px; line-height: 1.5em;      text-transform: uppercase; cursor: pointer}


input[type="datetime-local"] {font-family:  'Text', "sans-serif"!important;}


.disabled1 {opacity: 0.3; cursor: text}
.disabled {opacity: 0.9}

/*****    END Registration elements    *******/

/*****    Password elements    *******/
.reset_pass {width: 50%}
.reset_pass label {width: 100%!important; size: 1em; font-size: 1.1em; font-weight: 400}
#id_email {width: 100%!important; background: #f9f9f9; border: 1px solid #f1f1f1; border-bottom: 1px solid #ccc; font-size: 1em; padding: 8px 0px 4px 4px; font-weight: 300; color: #777; margin: 10px 0px 20px}
#id_email:focus {background: #f9f9f9!important; border: 1px solid #f1f1f1!important; border-bottom: 1px solid var(--main)!important;
    outline: none !important;color: #444}


/*****    End Password elements    *******/

*:before,
*:after {
  box-sizing: border-box;
}

.accept_tc {border: 0px solid #f09; font-size: 0.85em!important; font-weight: 300; line-height: 2em}
.accept_tc a {color: var(--secondary)}

.accept_tc input[type="checkbox"]  { 
  -webkit-appearance: none;
  appearance: none;
  background: #fff;
  margin: 10px 10px 0px 0px;

  font: inherit;
  color: currentColor;
  width: 1.1em;
  height: 1.1em;
  border: 1px solid #ccc;
  transform: translateY(-0.075em);
cursor: pointer;
  display: grid;
  place-content: center;
}

.accept_tc input[type="checkbox"]::before {
  content: "";
  width: 0.9em;
  height: 0.9em;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em var(--main);
}

.accept_tc input[type="checkbox"]:checked::before {
  transform: scale(0.75);
}

/* 6 columns home */
.wrapper_six {
  display: grid;
  grid-gap: 0px;
  grid-template-columns: 16.6% 16.6% 16.6% 16.6% 16.6% 16.6% ;
  padding: 0px;
  margin: 60px 0px 0px;
  width: 100%;
}
.box_six {
  padding: 0px 20px;
  margin: 0px;
  text-align: center;
  border: 0px solid #ee0000;
}

.s1 {  grid-row: 1;  grid-column: 1 / span 2; padding: 0px 15%}
.s2 {  grid-row:1;  grid-column: 3 / span 2;padding: 0px 15%}
.s3 {  grid-row: 1;  grid-column: 5 / span 2;padding: 0px 15%}

.s4 {  grid-row: 2;  grid-column: 1 / span 2; padding: 0px 15%; margin: 80px 0px}
.s5 {  grid-row: 2;  grid-column: 3 / span 2; padding: 0px 15%; margin: 80px 0px}
.s6 {  grid-row: 2;  grid-column: 5 / span 2; padding: 0px 15%; margin: 80px 0px}

.box_six img {margin: 10px auto 0px ; height: 4.8vw; filter:drop-shadow(1px 1px 2px rgb(0 0 0 / 0.4))}


/* end 6 columns home */


/* FOOTER */
.wrapper_foot {
  display: grid;
  grid-gap: 0px;
  grid-template-columns: 10% 10% 10% 10% 10% 10% 10% auto;
  padding: 20px 240px;
  margin: 60px 0px 0px;
  width: 100%;
    background: #efefef
}
.box_foot {
  padding: 0px 0px;
  margin: 0px;
  text-align: center;
  border: 0px solid #ee0000;
}

.box_foot a, .box_foot p {text-align: center; display: inline-block; font-size: 0.8em; color: var(--main); font-weight: 350}
.box_foot p {color: #666; font-weight: 300}
.box_foot h6 {float: right; display: inline-block; font-size: 0.8em; color: #aaa; font-weight: 300; bottom: -0.2em; position: relative}
.box_foot h5{float: left; display: inline-block; font-size: 0.8em; color: #aaa; font-weight: 300; bottom: -0.2em; position: relative}

.fo1 {  grid-row: 1;  grid-column: 1; }
.fo2 {  grid-row: 1;  grid-column: 2; }
.fo3 {  grid-row: 1;  grid-column: 3; }
.fo4 {  grid-row: 1;  grid-column: 4; }
.fo5 {  grid-row: 1;  grid-column: 5; }
.fo6 {  grid-row: 1;  grid-column: 6; }
.fo7 {  grid-row: 1;  grid-column: 7; }

.fo8 {  grid-row: 1;  grid-column: 8;  text-align: right; }
.fo9 {  grid-row: 2;  grid-column: 1 / span 8; text-align: right; margin: 10px 0px 5px}


 /* langs*/
.nav-wrapper { right: 240px!important;}
    
  .sl-nav {
  display: inline; font-weight: 200; font-size: 0.8em; 
}
.sl-nav ul {
  margin:0;
  padding:0;
  list-style: none;
  position: relative;
  display: inline-block;text-transform: uppercase
}
.sl-nav li {
  cursor: pointer;
  padding:0px 5px 0px 0px; 
}
.sl-nav li ul {
  display: none;
}
.sl-nav li:hover ul {border: 0px solid #f09;
  position: absolute;
  bottom: 18px;
  right: 0px;
  display: block;
  background: rgba(255,255,255,0.85);
  width: auto;
  padding: 1px 13px 0px 3px;
  z-index: 1;
}

.sl-nav li ul li  {
  position: relative;
  text-align: left;
  background: transparent;
  padding: 0px;
  padding-bottom:0;
  z-index: 2;
    line-height: 1.6em;
  font-size: 1em; font-weight: 500;
  color: var(--secondary);
  cursor: pointer;
}
.sl-nav li ul li input { cursor: pointer; border: none; background: transparent; }
    .sl-nav li ul li input:hover{color: var(--secondary);}
    
.sl-nav li ul li:hover {color: #000}
.sl-nav li ul li:last-of-type {
  padding-bottom: 5px;
}
.sl-nav li ul li span {
  padding-left: 5px;
}
.sl-nav li ul li span:hover, .sl-nav li ul li span.active {
  color: #146c78;
}
/* end langs*/   

/* end FOOTER */


/* toggle switch */
.switch {
  position: relative;
  display:inline-block;
  width: 54px;
  height: 28px; top: 3px; padding-top: 4px
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 28px;
}




.slider:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 2px;
  bottom: 3px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;  border-radius: 50%;

}

input:checked + .slider {
  background-color: var(--secondary);
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}


/********************************************bigger screen settings**********************************************************/
@media screen and (min-width: 1800px) {
#home_main {border: 0px solid #f09; margin: 10px 320px 30px; padding: 0px; position: relative; top: 0px}
    
    
/* FOOTER */
.wrapper_foot {
  padding: 20px 320px;
}
    
}


/********************************************smaller screen settings**********************************************************/
@media screen and (max-width: 1300px) {
#home_main {border: 0px solid #f09; margin: 40px 160px 30px; padding: 0px; position: relative; top: 0px}
    
.bg-trans-cross-fade .bg-layer .display-layer h2 { 
    font-size: 2.7em;
}
.bg-trans-cross-fade .bg-layer .display-layer h3 { 
    font-size: 2.4em;
}

.bg-trans-cross-fade .bg-layer .display-layer h4 { 
    font-size: 1.2em;
}
    
.bg-trans-cross-fade .bg-layer .display-layer {
  width: 95%;
}
    
    
.create_bt {font-size: 1.1em; margin: 0px}
.request_bt {font-size: 1.1em;  margin: 0px}
    
.wrapper_foot {
  display: grid;
  grid-gap: 0px;
  grid-template-columns: 10% 10% 10% 10% 10% 10% 10% auto;
  padding: 20px 10px;
  margin: 60px 0px 0px;
  width: 100%;
    background: #efefef
}
    
}
/********************************************tablet settings**********************************************************/
@media screen and (max-width: 1300px) {
#home_main {border: 0px solid #f09; margin: 30px 10px 0px; padding: 0px; position: relative; top: 0px}
    
#home_display {border: 0px solid #f09; margin: 0px; padding: 0px; position: relative; top: 5px; overflow-x: hidden}
    
.bg-trans-cross-fade .bg-layer .display-layer h2 { 
    font-size: 2.7em;
}
.bg-trans-cross-fade .bg-layer .display-layer h3 { 
    font-size: 2.4em;
}

.bg-trans-cross-fade .bg-layer .display-layer h4 { 
    font-size: 1.2em;
}
    
.bg-trans-cross-fade .bg-layer .display-layer {
  width: 85%;
}
    .create_bt {font-size: 1.1em; margin: 0px -40% 0px 0px }
.request_bt {font-size: 1.1em;  margin: 0px 0px  0px -40%  ; background: none}
      
    
    
}


/********************************************general mobile settings**********************************************************/
@media all and (max-width: 64em), 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) {
    
#home_display {border: 0px solid #f09; margin: 0px; padding: 0px; position: relative; top: -2px; width: 100%}
#home_main {border: 0px solid #f09; margin: 0px 10px 30px; padding: 0px; position: relative; top: 0px}  
    

.in_the_middle {position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); width: 90%}
    
    
/*main title*/
.bg-trans-cross-fade .bg-layer .display-layer {
  border: 0px solid #f09;
  position: absolute;
  top: 50%;
  left: 0%;
    transform:  translateY(-50%);
  width: calc(100% - 20px);
  max-width: calc(100% - 20px);
  height: auto;
  justify-content: center;
  align-items: center;
    padding: 0px; margin: 0px;
}
.bg-trans-cross-fade .bg-layer .display-layer h2 { 
font-family:  'Display', "serif";
    font-weight: 400;
    font-size: 2.3em;
    text-align: center;
    line-height: 1.15em;
    padding: 0px; margin: 0px 0px 0px 10px;
    color: #fff;
}
    
.bg-trans-cross-fade .bg-layer .display-layer h3 { 
font-family:  'Display', "serif";
    font-weight: 300;
    font-size: 1.5em;
    text-align: center;
    line-height: 1.45em;
}

.bg-trans-cross-fade .bg-layer .display-layer h4 { 
    font-weight: 200;
    font-size: 0.9em;
    text-align: center;
    padding: 0px; margin: 10px 10px 0px;
    color: #fff;
    text-transform: uppercase
}


.section_title {font-size: 1.2em; font-weight: 500; margin: 20px 0px 20px 0px; color: var(--main)}

.subtitle  {font-size: 1.1em; font-weight: 400; margin: 20px 0px 20px 0px; color: var(--secondary)}
    
.main_bt_columns , .main_bt_col {flex-basis: 100%;}    

.main_bts {margin: 30px 0px 0px 10px; border: 0px solid #f90}

.button {font-weight: 400; padding: 6px 30px; border-radius: 300px;text-shadow: 1px 1px 2px rgba(0,0,0,0.2); white-space: nowrap; opacity: 1; border: none}
.button_l {font-weight: 400; padding: 6px 30px; border-radius: 300px; white-space: nowrap; }
 
    
    
.create_bt {font-size: 1.1em; margin: 0px 50%; display: inline-block; transform:  translateX(-50%);}
.request_bt {font-size: 1.1em;  margin: 10px 50%; display: inline-block; transform:  translateX(-50%);}
    
.create_bt:hover {color: #fff!important}

.lema {    font-weight: 400;
    font-size: 1.4em;
    text-align: center;
    padding: 0px; margin: 20px 0px 0px;
}
    


.list_display { font-size: 0.9em; line-height: 1.2em; list-style-position: inside; padding-left: 1em}
.list_display li {color: var(--main); font-weight: 600; margin: 0px 0px 15px; text-indent: -1em;}
.list_display li b {color: #000; font-weight: 600; }
.list_display li span {color: #444; font-weight: 400; border: 0px solid #f99}
 
/* 3 columns */
.wrapperthree {
  display: grid;
  grid-gap: 0px;
  grid-template-columns: 100% ;
  padding: 0px;
  margin: 60px 0px;
  width: 100%;
}


.invoice_request {width: 100%}    
    
.boxthree {
  padding: 0px 20px;
  margin: 0px;
  text-align: center;
  border: 0px solid #ee0000;
}


    
.t1 {  grid-row: 1;  grid-column: 1;}
.t1aa {grid-row: 1;  grid-column: 1 ;text-align: left; padding: 0px}


.t1a {grid-row: 1;  grid-column: 1 ; text-align: left; padding: 0px 5px 0px 0px}
.t1b {grid-row: 1;  grid-column: 1 ; text-align: left; padding: 0px 5px 0px 0px}
.t1c {grid-row: 1;  grid-column: 1 ; text-align: left; padding: 0px}

.t2 {  grid-row: 1;  grid-column: 2;}
.t2aa {grid-row: 2;  grid-column: 1 ; text-align: left; padding: 0px}

.t3 {  grid-row: 1;  grid-column: 3;}
.t3a {grid-row: 3;  grid-column: 1 ; text-align: left; padding: 0px}

.t4a {grid-row: 4;  grid-column: 1 ; text-align: left; padding: 0px 5px 0px 0px}
.t4bb {grid-row: 5;  grid-column: 1 ; text-align: left; padding: 0px}

.t5 {grid-row: 6    ;  grid-column: 1 / span 3; text-align: left; padding: 0px}

.t6a {grid-row: 7;  grid-column: 1 ; text-align: left; padding: 0px 5px 0px 0px}
.t6b {grid-row: 8;  grid-column: 1 ; text-align: left; padding: 0px 5px 0px 0px}
.t6c {grid-row: 9;  grid-column: 1 ; text-align: left; padding: 0px}

.t7aa {grid-row: 10;  grid-column: 1 ; text-align: left; padding: 0px}

.t8aa {grid-row: 11;  grid-column: 1 ; text-align: left; padding: 0px}

.t9b {grid-row: 12;  grid-column: 1 ; text-align: left; padding: 0px 5px 0px 0px}

.t10 {grid-row: 13;  grid-column: 1 ; text-align: left; padding: 0px}

.t1 img, .t2 img, .t3 img {margin: 10px auto; height: 70px; filter:drop-shadow(1px 1px 2px rgb(0 0 0 / 0.4))}
.t1 h3, .t2 h3, .t3 h3 {color: var(--secondary); font-size: 1.8em; font-weight: 600}
.t1 h5, .t2 h5, .t3 h5 { font-size: 1.0em; font-weight: 500; line-height: 2.2vh; margin: 10px 0px}

    .t3 .create_bt {margin: 0px 50%;   }
    
.disabled1 {opacity: 0.3}
.disabled {opacity: 0.9}  
    
/* 6 columns home */
.wrapper_six {
  display: grid;
  grid-gap: 0px;
  grid-template-columns: 50% 50% ;
  padding: 0px;
  margin: 60px 0px;
  width: 100%;
}
.box_six {
  padding: 0px 20px;
  margin: 0px;
  text-align: center;
  border: 0px solid #ee0000;
}

.s1 {  grid-row: 1;  grid-column: 1; margin: 0px; padding: 0px 5%}
.s2 {  grid-row:1;  grid-column: 2; margin: 0px; padding: 0px 5%}
    
.s3 {  grid-row: 2;  grid-column: 1; margin: 20px 0px; padding: 0px 5%}

.s4 {  grid-row: 2;  grid-column: 2; margin: 20px 0px; padding: 0px 5%}
    
.s5 {  grid-row: 3;  grid-column: 1; margin: 0px; padding: 0px 5% }
.s6 {  grid-row: 3;  grid-column: 2; margin: 0px; padding: 0px 5% }

.box_six img {margin: 10px auto 0px ; height: 9vw; filter:drop-shadow(1px 1px 2px rgb(0 0 0 / 0.4))}
.box_six h5 {font-size: 98%; line-height: 1.7em}


/* end 6 columns home */    
    
    /* 2 responsive columns */
.column2 {
  float: left;
  width: calc(100% - 20px);
  padding: 0px 10px!important; border: 0px solid #f09; margin: 0px
}

.row2 {margin: 0px -10px!important; padding: 0px!important; min-width: 100%}

.row2:after {
  content: "";
  display: table;
  clear: both;
}

/* end 2 responsive columns */
    
/* 3 responsive columns */
.column3 {
  float: left;
  width: calc(100% - 20px);
  padding: 0px 10px!important; border: 0px solid #f09; margin: 0px
}

.row3 {margin: 0px -10px!important; padding: 0px!important; min-width: 100%}

.row3:after {
  content: "";
  display: table;
  clear: both;
}

/* end 3 responsive columns */
    
    
.ticket_table {float: right; border: none; font-size: 1em; width: 100%; margin: 0px}    
    /* dos wrapper */
.wrapperdos {
  display: grid;
  grid-gap: 0px;
  grid-template-columns: 100% ;
  padding: 0px;
  margin: 0px;
  width: calc(100% - 20px);
}
.boxdos {
  padding: 0px;
  margin: 0px;
  text-align: left;
  border: 0px solid #ee0000;
}

.dd1 {  grid-row: 2;  grid-column: 1 }
.dd2 {  grid-row:1;  grid-column: 1}

    .doscents {width: 100%!important}
/* dos wrapper */
    
/* FOOTER */
.wrapper_foot {
  display: grid;
  grid-gap: 0px;
  grid-template-columns: 33% 34% 33%;
  padding: 20px 10px;
  margin: 20px 0px 0px;
  width: 100%;
    background: #efefef
}
.box_foot {
  padding: 0px 0px;
  margin: 0px;
  text-align: center;
  border: 0px solid #ee0000;
}

.box_foot a, .box_foot p {text-align: center; display: inline-block; font-size: 0.8em; color: #666; font-weight: 300}
.box_foot h6 {float: right; ; font-size: 0.8em; color: #ccc; font-weight: 300; bottom: -0.2em; position: relative; display: none}
.box_foot h5{float: left; ; font-size: 0.8em; color: #ccc; font-weight: 300; bottom: -0.2em; position: relative; display: none}

.fo1 {  grid-row: 1;  grid-column: 1; }
.fo2 {  grid-row: 1;  grid-column: 2; }
.fo3 {  grid-row: 1;  grid-column: 3; }
.fo4 {  grid-row: 2;  grid-column: 1; margin: 10px 0px 0px}
.fo5 {  grid-row: 2;  grid-column: 2; margin: 10px 0px 0px; }
.fo6 {  grid-row: 2;  grid-column: 3; margin: 10px 0px 0px; }
.fo7 {  grid-row: 3;  grid-column: 1 / span 3; margin: 10px 0px 0px; }

.fo8 {  grid-row: 4;  grid-column: 2 / span 2;  text-align: right; margin: 20px 0px 0px; }
.fo9 {grid-row: 4;  grid-column: 1; margin: 20px 0px 0px; text-align: left}


 /* langs*/
.nav-wrapper { right: 240px!important;}
    
  .sl-nav {
  display: inline; font-weight: 200; font-size: 0.8em; 
}
.sl-nav ul {
  margin:0;
  padding:0;
  list-style: none;
  position: relative;
  display: inline-block;text-transform: uppercase
}
.sl-nav li {
  cursor: pointer;
  padding:0px 5px 0px 0px; 
}
.sl-nav li ul {
  display: none;
}
.sl-nav li:hover ul {border: 0px solid #f09;
  position: absolute;
  bottom: 18px;
  right: 0px;
  display: block;
  background: rgba(255,255,255,0.85);
  width: auto;
  padding: 1px 13px 0px 3px;
  z-index: 1;
}

.sl-nav li ul li  {
  position: relative;
  text-align: left;
  background: transparent;
  padding: 0px;
  padding-bottom:0;
  z-index: 2;
    line-height: 1.6em;
  font-size: 1em; font-weight: 500;
  color: var(--secondary);
  cursor: pointer;
}
.sl-nav li ul li input { cursor: pointer; border: none; background: transparent; }
    .sl-nav li ul li input:hover{color: var(--secondary);}
    
.sl-nav li ul li:hover {color: #000}
.sl-nav li ul li:last-of-type {
  padding-bottom: 5px;
}
.sl-nav li ul li span {
  padding-left: 5px;
}
.sl-nav li ul li span:hover, .sl-nav li ul li span.active {
  color: #146c78;
}
/* end langs*/   

/* end FOOTER */    

    
/*****    Registration elements    *******/

.wrapperreg {
  display: grid;
  grid-gap: 0px;
  grid-template-columns: 100% ;
  padding: 0px;
  margin: 0px ;
  width: calc(100% - 0px);
}
    
.wrapperreg100 {
  display: grid;
  grid-gap: 0px;
  grid-template-columns: 100% ;
  padding: 0px;
  margin: 0px;
  width: calc(100% - 20px);
}
    
.boxreg {
  padding: 0px;
  margin: 0px;
  text-align: left;
  border: 0px solid #ee0000;
}

label  {font-size: 1em; font-size: 1.1em; font-weight: 400}

.r1 {  grid-row: 1;  grid-column: 1 }
.r2 {  grid-row: 2;  grid-column: 1 }
.r3 {  grid-row: 5;  grid-column: 1  ; margin: 10px 0px 0px }
.r4 {  grid-row: 6;  grid-column: 1  }

.r1a {  grid-row: 1;  grid-column: 1 }
.r1b {  grid-row: 3;  grid-column: 1; margin: 10px 0px 0px}

.r2a {  grid-row: 2;  grid-column: 1 }
.r2b {  grid-row:4;  grid-column: 1}

    
.r3a {  grid-row: 7;  grid-column: 1 ;  margin: 20px 0px 0px}
.r4a {  grid-row: 8;  grid-column: 1  }

    
.r5 {  grid-row: 9;  grid-column: 1 ; margin: 20px 0px 0px}
.r6 {  grid-row: 10;  grid-column: 1  }

.r5a {  grid-row: 7;  grid-column: 1; margin: 10px 0px 0px}
.r5b {  grid-row: 9;  grid-column: 1; margin: 10px 0px 0px}

.r6a {  grid-row: 8;  grid-column: 1 }
.r6b {  grid-row: 10;  grid-column: 1 ; }
    

.r7 {  grid-row: 11;  grid-column: 1  ; margin: 20px 0px 0px}

.r8 {  grid-row: 12;  grid-column: 1 }

.r9 {  grid-row: 13;  grid-column: 1 / span 2 ; margin: 20px 0px 0px}

.r11a {  grid-row: 14;  grid-column: 1;   }
.r11b {  grid-row: 15;  grid-column: 1;  margin: 20px 0px 0px }

.r12a {  grid-row: 16;  grid-column: 1;   margin: 20px 0px 0px}
.r12b {  grid-row: 17;  grid-column: 1;  margin: 20px 0px 0px; }

.r13a {  grid-row: 18;  grid-column: 1;   margin: 20px 0px 0px}
.r13b {  grid-row: 19;  grid-column: 1;  margin: 20px 0px 0px; }
    

.r29 {  grid-row: 29;  grid-column: 1 / span 2; margin: 0px 0px -15px; text-align: right!important;} /*forgot pass*/
.forgot {text-align: right!important; color: #777; font-size: 0.7em; font-weight: 300}
.r30 {  grid-row: 30;  grid-column: 1 / span 2; margin: 30px 0px 0px} /*submit*/
    
    
.r30a {  grid-row: 40;  grid-column: 1; margin: 30px 0px 0px} /*submit*/
.r30b {  grid-row: 41;  grid-column: 1; margin: 30px 0px 0px} /*submit*/

.star  {color: var(--main); padding-left: 2px; font-weight: 200; }

.wrapperreg input {width: 100%}

.reg_but {border: none; width: 100%!important; text-transform: uppercase; cursor: pointer}
.input_text {background: #f9f9f9; border: 1px solid #f1f1f1; border-bottom: 1px solid #ccc; font-size: 1em; padding: 8px 0px 4px 4px; font-weight: 300; color: #777; margin: 2px 0px 1px}
.input_text:focus {background: #f9f9f9!important; border: 1px solid #f1f1f1!important; border-bottom: 1px solid var(--main)!important;
    outline: none !important;color: #444}

.errorlist {list-style-type: none;}

.errorlist li {margin: 20px 0px; font-size: 0.9; color: var(--secondary); font-weight: 300}

.required {border: 3px solid #f09!important}

/*****    END Registration elements    *******/

/*****    Password elements    *******/
.reset_pass {width: 100%}
.reset_pass label {width: 100%!important; size: 1em; font-size: 1.1em; font-weight: 400}
#id_email {width: 100%!important; background: #f9f9f9; border: 1px solid #f1f1f1; border-bottom: 1px solid #ccc; font-size: 1em; padding: 8px 0px 4px 4px; font-weight: 300; color: #777; margin: 10px 0px 20px}
#id_email:focus {background: #f9f9f9!important; border: 1px solid #f1f1f1!important; border-bottom: 1px solid var(--main)!important;
    outline: none !important;color: #444}

.accept_tc { font-size: 0.75em!important; }


/*****    End Password elements    *******/
    
    
    
    
}