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

/*colours*/
:root {
    --main: #9ccb3b; /*156,203,59*/
    --main80: #b0d562; 
    --main60: #c4e089; 
    --main40: #d7eab1; 
    --main20: #ebf5d8; 
    --main10: #f5faec;
    --secondary: #ccd134; /*204,209,52*/
    --darkgreen: #6b764d; /*107,118,77*/
    --dmain: #8db340; /*141,179,64*/
    --insgrey: #818180; /*129,129,129*/
    --text: #333; /*34,34,34*/
    --greenvlight: #fbfcf9 ;
    --greenlight: #dbe9be;
    --greenover: #c2dd8a; /*194,221,138*/
    --darkgrey: #4c4c4c;/*76,76,76*/
    --grey: #ccc;/**/
    --grey7: #777777;/**/
    --red: #cb0101;/*203,1,1*/
    --green: #7CA22F;/*124,162,47*/
    --black: #000000;
    --white: #ffffff;
    --vlgrey: #f6f6f6;
}

/* fonts */
@font-face {
  font-family: "Roboto";
  src: url("../../fonts/roboto_flex/RobotoFlex.ttf") format("truetype-variations");
  font-weight: 100 1000;
} 
@font-face {
  font-family: "RobotoSerif";
  src: url("../../fonts/roboto_serif/robotoserif.ttf") format("truetype-variations");
  font-weight: 100 1000;
} 



body, html {font-size: 1em; font-family: 'Roboto'; font-weight: 350; color: var(--text); background: #fff!important}
body, html, a, table, td, th, tr, p, h1,h2,h3,h4,h5,h6, hr, img {margin: 0px; padding: 0px}
body { display:flex; flex-direction:column;min-height: 100vh;}
a {text-decoration: none; cursor: pointer}
a:hover {text-decoration: underline}
a:focus {text-decoration: underline; color: var(--main)}

p {font-weight: 250; font-size: 1em; line-height: 1.2em; color: #333}
p b {font-weight: 400; font-size: 1em; line-height: 1.2em; color: #111}
p a {font-weight: 300; color: var(--main)}

.pointer {cursor: pointer}

button {border: none}

textarea {resize: none}

.ins_link {color: var(--main)}
.ins_link:hover {text-decoration: underline!important; color: var(--dmain)}

td:hover, tr:hover, th:hover {background: none!important}

.center {text-align: center!important}
.right {text-align: right!important}
.left {text-align: left!important}




#home_display {border: 0px solid #f09; margin: 0px; padding: 0px; position: relative; top: 5px; overflow-x: none}

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


.nomargin {margin: 0px!important; }


/** home lema search **/
.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;
}


.lema {font-family: 'RobotoSerif'; color: #fff; font-size: 3.1em; text-shadow: 2px 2px 4px rgba(0,0,0,0.2); text-align: center; width: 70%; margin: 0px auto 60px}
.lema_org {font-family: 'Roboto'; color: #fff; font-size: 3.1em; text-shadow: 2px 2px 4px rgba(0,0,0,0.2); text-align: center; width: 70%; margin: 0px auto 0px}

.logo_org img {max-width: 90px; max-height: 90px; border: 0px solid #f89; margin: 0px auto 20px}

.home_search {width: 50%; margin: 20px auto; }

.home_search .input_text {width: 48%; margin: 0px 2px;  }
.home_search input[type=submit] {width: 22%; background: var(--main); border: none; font-size: 1em; padding: 0px 0px; font-weight: 500; color: #fff; margin: 0px 2px;  ; position: relative; top: -2px; height: 36px; text-transform: uppercase}

.home_search select {width: 22%; background: #f9f9f9; border: 1px solid #f1f1f1; border-bottom: 1px solid #ccc; font-size: 1em; padding: 10px 0px 6px 4px; font-weight: 300; color: #777; margin: 2px 2px 1px ; line-height: 1.5em }

/** home lema search **/

/*text*/
.centre {text-align: center!important}
.left {text-align: left!important}
.right {text-align: right!important}

/****  form elements *****/

.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: #555; margin: 2px 0px 1px; width: calc(100% - 4px); 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}

.input_select {background: #f9f9f9; border: 1px solid #f1f1f1; border-bottom: 1px solid #ccc; font-size: 1em; padding: 8px 0px 8px 4px; font-weight: 300; color: #555; margin: 2px 0px 1px; width: calc(100% - 4px); line-height: 1.5em;}

.input_color {background: #f9f9f9; border: 1px solid #f1f1f1; border-bottom: 0px solid #ccc; font-size: 1em; padding: 8px; font-weight: 300; color: #555; margin: 2px 0px 1px; width: calc(100% - 4px); height: 2.5em;}


.input_text1 {background: #f9f9f9; border: 1px solid #f1f1f1; border-bottom: 1px solid #ccc; font-size: 1em; padding: 8px 0px 4px 4px; font-weight: 300; color: #555; margin: 2px 0px 1px; ; line-height: 1.5em; }


.event_tickets_table .input_text {font-size: 85%}
.event_tickets_table label {font-size: 85%}
.event_tickets_table select {padding: 10px 0px 6px 4px}



label {font-size: 1.1em; font-weight: 400; line-height: 1.4em; }
.star {color: var(--secondary)!important; padding-left: 2px; font-weight: 200; }
.labeledit  {font-size: 1em; font-weight: 400; line-height: 1.0em; color: #777 }


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

.button {font-weight: 400; font-size: 0.9em; line-height: 1.3em; padding: 6px 20px; 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!important; border: none; text-decoration: none!important}
.button_l {font-weight: 400; padding: 6px 30px; border-radius: 300px; white-space: nowrap; }
.reg_but {border: none; width: 50%!important; text-transform: uppercase; cursor: pointer}


.button_100 {width: 100%; display: block; cursor: pointer}
.button_60 {min-width: 60%; display: table; text-align: center; }
.button_60b {min-width: 60%; display: table; margin: 0px auto; text-transform: uppercase}
.button_60a {min-width: 60%; text-align: center; }

.button:hover, .button_l:hover, .reg_but:hover, .reg_but:hover {background: var(--dmain); text-decoration: none; color: var(--white)}

.style_button {font-weight: 400; font-size: 1em; line-height: 1.5em; padding: 8px 20px; 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; border: none; max-width: 90%; text-transform: uppercase; text-align: center; margin: 0px auto 5px}


#save_event .button {font-weight: 450; font-size: 1.1em; line-height: 1.4em; padding: 6px 70px; border-radius: 300px;color: #fff; background: var(--main);text-shadow: 1px 1px 2px 0px rgba(0,0,0,0.2); white-space: nowrap; border: none; text-transform: uppercase; letter-spacing: 1px}
#save_event .button:disabled {
  background: var(--insgrey)
}
.lang_tittle {display: table; width: 100%}
.lang_tittle h4 {color: #777; white-space: nowrap; margin: 0px 10px 0px 0px; font-size: 1em; font-weight: 300}

.idioma{
  margin: 20px 5px 10px 0px;
  background-color: var(--grey);
  border-radius: 1.5em;
  border: none;
  overflow: hidden;
  float: left;
    font-weight: 200;
    font-size: 0.9em
}

.idioma label {
  float: left; line-height: 1.5em;
  width: 130px; height: 1.5em;
}

.idioma label span {
  text-align: center;
  display: block;
    cursor: pointer;
}

.idioma label input {
  position: absolute;
  display: none;
  color: #fff !important;
}
/* selects all of the text within the input element and changes the color of the text */
.idioma label input + span{color: #fff;}


/* This will declare how a selected input will look giving generic properties */
.idioma input:checked + span {
    color: #ffffff;
    text-shadow: 1px 1px 2px 0px rgba(0,0,0,0.2);
}
/*.idio input:checked + span{background-color: var(--secondary)}*/

/****  form elements *****/



/* main elements */

#home_main {border: 0px solid #f09; margin: 10px 240px 30px; padding: 0px; position: relative; top: 0px; flex:1; }

/* end main elements */

/* 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
}
.column3margin {
  float: left;
  width: calc(33.33% - 20px);
  padding: 0px 10px!important; border: 0px solid #f09; margin: 0px 10px
}


.row3 {margin: 0px -10px!important; padding: 0px!important; min-width: calc(100% + 20px); border: 0px solid #f99}

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

/* end 3 responsive columns */

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

.column4margin {
  float: left;
  width: calc(25% - 10px);
  margin: 0px 5px!important; border: 0px solid #f09; padding: 0px!important; 
}

.row4margin {margin: -5px!important; padding: 0px 0px 40px!important; min-width: 100%; border: 0px solid #f09}

.row4 {margin: 0px -10px!important; padding: 0px!important; min-width: 100%; border: 0px solid #f09}

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

/* end 4 responsive columns */

/* 4menu responsive columns */
.column4menu {
  float: left;
  width: calc(25% - 10px);
  padding: 0px 10px!important; border: 0px solid #f09; margin: 5px; 
}

.row4menu {margin: 0px!important; padding: 0px!important; min-width: 100%; border: 0px solid #f09}

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

/* end 4menu responsive columns */




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

.column5smallest {
  float: left;
  width: calc(6% - 2px);
  padding: 0px 10px!important; border: 0px solid #f09; margin: 0px 1px
}
.column5small {
  float: left;
  width: calc(15% - 2px);
  padding: 0px 10px!important; border: 0px solid #f09; margin: 0px 1px
}
.column5big {
  float: left;
  width: calc(30% - 2px);
  padding: 0px 10px!important; border: 0px solid #f09; margin: 0px 1px
}
.column5margin {
  float: left;
  width: calc(20% - 2px);
  padding: 0px 1px!important; border: 0px solid #f09; margin: 0px 1px
}
.column5margin23 {
  float: left;
  width: calc(23% - 2px);
  padding: 0px 1px!important; border: 0px solid #f09; margin: 0px 1px
}

.row5 {margin: 0px -1px!important; padding: 0px!important; min-width: calc(100% + 8px); border: 0px solid #f99}
.row5ext {margin: 0px -1px!important; padding: 0px!important; min-width: calc(100% + 5px); border: 0px solid #f99}

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

/* end 5 responsive columns */



/* event card */
.eventcard {border: 1px solid var(--greenlight); padding: 5px; height: 410px; position: relative}
.eventcard .event_img { width: 100%; height: 200px; background-size: cover; background-position: center center; background-repeat: no-repeat}
.foto1 { background-image: url("../img/event1.jpg")}
.foto2 { background-image: url("../img/event2.jpg")}
.foto3 { background-image: url("../img/event3.jpg")}
.eventcard tr td {vertical-align: top!important; line-height: 1em!important}
.eventcard .location {font-size: 0.85em; font-weight: 300; color: #666; line-height: 0.1em!important}
.eventcard .hashtag {font-size: 0.95em; font-weight: 300; color: #aaa}
.eventcard .hashtag b {font-size: 0.9em; font-weight: 500; color: #ccc}
.eventcard .title  {font-size: 1.25em; font-weight: 450; color: #111; margin: 10px 0px 10px; vertical-align: top; height: 3.1em; line-height: 1.05em; font-stretch: 75%;}
.eventcard a:hover  {text-decoration: none!important}
.eventcard h6 {font-size: 0.9em; font-weight: 350; color: #111; margin: 0px 0px 10px}
.eventcard .price {font-size: 1.1em; font-weight: 450; color: var(--darkgreen); margin: 0px 0px 5px }
.eventcard .fa-location-dot {color: var(--main); margin-right: 5px; font-size: 0.85em}
.eventcard .remaining {font-size: 0.9em; font-weight: 300; color: #666; margin: 10px 0px 0px; position: absolute; bottom:5px}
.eventcard .remaining b { font-weight: 350; color: var(--main); }
/* end event card */


/* pagination */
#events_pagination {border: 1px solid #fff; position: relative; display: block;  margin: 20px auto 150px; padding: 0px; font-size: 0.9em;  font-weight: 350;}
#events_pagination .pagination {border: 0px solid #f09; margin: 0px auto 0px; position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap}



/* pagination */

.section_title {font-size: 1.4em; font-weight: 500; margin: 50px 0px 25px 0px; color: var(--main);}
.section_title0 {font-size: 1.4em; font-weight: 500; margin: 50px 0px 0px 0px; color: var(--main);}
.section_title h1, .section_title0 h1 {font-size: 1.2em; text-transform: uppercase}
.section_title h2, .section_title0 h2 {font-size: 1.15em; color: #777; font-weight: 350}
.section_title i {font-size: 14px; color: var(--main)}
.section_title .sub_a {color: var(--main) }
.section_title .sub_a:hover {text-decoration: none}

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

.section_subtitle {font-size: 1.35em; font-weight: 400; margin: 40px 0px 5px 0px; color: var(--secondary)}
.section_subtitle75 {font-size: 1.35em; font-weight: 400; margin: 75px 0px 5px 0px; color: var(--secondary)}
.section_subtitle5 {font-size: 1.35em; font-weight: 400; color: var(--secondary)}
.section_subtitle5 a {color: var(--secondary)}
.section_subtitle5 a:hover {text-decoration: none}

.petit {font-size: 80%!important}


.div50 {width: 50%}
.div75 {width: 75%}

.table i {color: #777}
.table i:hover {color: var(--main)}

/* 4 columns */
.wrapperfour {
  display: grid;
  grid-gap: 0px;
  grid-template-columns: 25% 25% 25% 25% ;
  padding: 0px;
  margin: 10px 0px;
  width: 100%;
}
.boxfour {
  padding: 0px 0px;
  margin: 0px;
  text-align: left;
  border: 0px solid #ee0000;
}

.boxfour h3 {font-size: 1.1em; color: var(--secondary); font-weight: 500}

.wrapperfour label {margin: 20px 0px 5px 0px; display: block}

.k1 {grid-row: 1;  grid-column: 1 / span4}     

.k1a {grid-row: 1;  grid-column: 1} 
.k1b {grid-row: 1;  grid-column: 2; margin: 0px 0px 0px 5px} 
.k1c {grid-row: 1;  grid-column: 3; margin: 0px 0px 0px 5px} 
.k1d {grid-row: 1;  grid-column: 4; margin: 0px 0px 0px 5px} 

.k1aa {grid-row: 1;  grid-column: 1 / span 2} 
.k1bb {grid-row: 1;  grid-column: 3 /span 2; margin: 0px 0px 0px 5px} 

.k1bbb {grid-row: 1;  grid-column: 2 /span 3; margin: 0px 0px 0px 5px} 

.k1aaa {grid-row: 1;  grid-column: 1 / span 3} 

.k2 {grid-row: 2;  grid-column: 1 / span4}     

.k2a {grid-row: 2;  grid-column: 1} 
.k2b {grid-row: 2;  grid-column: 2; margin: 0px 0px 0px 5px} 
.k2c {grid-row: 2;  grid-column: 3; margin: 0px 0px 0px 5px} 
.k2d {grid-row: 2;  grid-column: 4; margin: 0px 0px 0px 5px} 

.k2aa {grid-row: 2;  grid-column: 1 / span 2} 
.k2bb {grid-row: 2;  grid-column: 3 /span 2; margin: 0px 0px 0px 5px} 
.k2aaa {grid-row: 2;  grid-column: 1 / span 3} 

.k3 {grid-row: 3;  grid-column: 1 / span4}     

.k3a {grid-row: 3;  grid-column: 1} 
.k3b {grid-row: 3;  grid-column: 2; margin: 0px 0px 0px 5px} 
.k3c {grid-row: 3;  grid-column: 3; margin: 0px 0px 0px 5px} 
.k3d {grid-row: 3;  grid-column: 4; margin: 0px 0px 0px 5px} 

.k3aa {grid-row: 3;  grid-column: 1 / span 2} 
.k3bb {grid-row: 3;  grid-column: 3 /span 2; margin: 0px 0px 0px 5px} 


.k4 {grid-row: 4;  grid-column: 1 / span4}     

.k4a {grid-row: 4;  grid-column: 1} 
.k4b {grid-row: 4;  grid-column: 2; margin: 0px 0px 0px 5px} 
.k4c {grid-row: 4;  grid-column: 3; margin: 0px 0px 0px 5px} 
.k4d {grid-row: 4;  grid-column: 4; margin: 0px 0px 0px 5px} 

.k4aa {grid-row: 4;  grid-column: 1 / span 2} 
.k4bb {grid-row: 4;  grid-column: 3 /span 2; margin: 0px 0px 0px 5px} 


.k5 {grid-row: 5;  grid-column: 1 / span4}     

.k5a {grid-row: 5;  grid-column: 1} 
.k5b {grid-row: 5;  grid-column: 2; margin: 0px 0px 0px 5px} 
.k5c {grid-row: 5;  grid-column: 3; margin: 0px 0px 0px 5px} 
.k5d {grid-row: 5;  grid-column: 4; margin: 0px 0px 0px 5px} 

.k5aa {grid-row: 5;  grid-column: 1 / span 2} 
.k5bb {grid-row: 5;  grid-column: 3 /span 2; margin: 0px 0px 0px 5px} 


.k6 {grid-row: 6;  grid-column: 1 / span4}     

.k6a {grid-row: 6;  grid-column: 1} 
.k6b {grid-row: 6;  grid-column: 2; margin: 0px 0px 0px 5px} 
.k6c {grid-row: 6;  grid-column: 3; margin: 0px 0px 0px 5px} 
.k6d {grid-row: 6;  grid-column: 4; margin: 0px 0px 0px 5px} 

.k6aa {grid-row: 6;  grid-column: 1 / span 2} 
.k6bb {grid-row: 6;  grid-column: 3 /span 2; margin: 0px 0px 0px 5px} 


.k7 {grid-row: 7;  grid-column: 1 / span4}     

.k7a {grid-row: 7;  grid-column: 1} 
.k7b {grid-row: 7;  grid-column: 2; margin: 0px 0px 0px 5px} 
.k7c {grid-row: 7;  grid-column: 3; margin: 0px 0px 0px 5px} 
.k7d {grid-row: 7;  grid-column: 4; margin: 0px 0px 0px 5px} 

.k7aa {grid-row: 7;  grid-column: 1 / span 2} 
.k7bb {grid-row: 7;  grid-column: 3 /span 2; margin: 0px 0px 0px 5px} 

.k8 {grid-row: 8;  grid-column: 1 / span4}     

.k8a {grid-row: 8;  grid-column: 1} 
.k8b {grid-row: 8;  grid-column: 2; margin: 0px 0px 0px 5px} 
.k8c {grid-row: 8;  grid-column: 3; margin: 0px 0px 0px 5px} 
.k8d {grid-row: 8;  grid-column: 4; margin: 0px 0px 0px 5px} 

.k8aa {grid-row: 8;  grid-column: 1 / span 2} 
.k8bb {grid-row: 8;  grid-column: 3 /span 2; margin: 0px 0px 0px 5px} 

.k9 {grid-row: 9;  grid-column: 1 / span4}     

.k9a {grid-row: 9;  grid-column: 1} 
.k9b {grid-row: 9;  grid-column: 2; margin: 0px 0px 0px 5px} 
.k9c {grid-row: 9;  grid-column: 3; margin: 0px 0px 0px 5px} 
.k9d {grid-row: 9;  grid-column: 4; margin: 0px 0px 0px 5px} 

.k9aa {grid-row: 9;  grid-column: 1 / span 2} 
.k9bb {grid-row: 9;  grid-column: 3 /span 2; margin: 0px 0px 0px 5px} 

.k9aaa {grid-row: 9;  grid-column: 1 / span 3} 


.k10 {grid-row: 10;  grid-column: 1 / span4}     

.k10a {grid-row: 10;  grid-column: 1} 
.k10b {grid-row: 10;  grid-column: 2; margin: 0px 0px 0px 5px} 
.k10c {grid-row: 10;  grid-column: 3; margin: 0px 0px 0px 5px} 
.k10d {grid-row: 10;  grid-column: 4; margin: 0px 0px 0px 5px} 

.k10aa {grid-row: 10;  grid-column: 1 / span 2} 
.k10bb {grid-row: 10;  grid-column: 3 /span 2; margin: 0px 0px 0px 5px} 



.k40 {grid-row: 40;  grid-column: 1 / span4}     

.k40a {grid-row: 40;  grid-column: 1} 
.k40b {grid-row: 40;  grid-column: 2; margin: 0px 0px 0px 5px} 
.k40c {grid-row: 40;  grid-column: 3; margin: 0px 0px 0px 5px} 
.k40d {grid-row: 40;  grid-column: 4; margin: 0px 0px 0px 5px} 

.k40aa {grid-row: 40;  grid-column: 1 / span 2} 
.k40bb {grid-row: 40;  grid-column: 3 /span 2; margin: 0px 0px 0px 5px} 


/* end 4 columns */

.dropdown .dropdown-toggle:hover {text-decoration: none!important}
.dropdown .dropdown-toggle {text-decoration: none!important;}
.dropdown .fecha {font-weight: 350!important; display: inline-block; margin-left: 5px}

.cashless_table {border: 1px solid #ddd}
.cashless_table th {border-bottom: 1px solid #ddd}
.cashless_table td {text-align: left; height: 35px; border: 0px solid #f89}
.cashless_table h4 {font-size: 1.1em!important; font-weight: 400!important; margin: 0px!important; padding: 15px!important}
.cashless_table h5 {font-size: 1.1em!important; font-weight: 300!important; margin: 0px!important; padding: 15px!important}

.columns5 {display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px}

/* new prices */

.price_grid {
  display: grid;
  grid-gap: 0px;
  grid-template-columns: 25% 25% 25% 25% ;
  padding: 0px;
  margin: 10px 0px;
  width: 100%;}
.pbox {  padding: 0px;margin: 0px;border: 0px solid #ee0000; border: 1px solid var(--main); border-radius: 5px}

.p1a {grid-row: 1;  grid-column: 1}
.p1b {grid-row: 1;  grid-column: 1; margin: 0px 5px 0px 0px; background: var(--main10)}
.p1c {grid-row: 1;  grid-column: 2; margin: 0px 5px; background: var(--main10)}
.p1d {grid-row: 1;  grid-column: 3; margin: 0px 5px; background: var(--main10)}
.p1e {grid-row: 1;  grid-column: 4; margin: 0px 0px 0px 5px; background: var(--main10)}
.p1f {grid-row: 2;  grid-column: 1 ; margin: 0px 5px}
.p1g {grid-row: 1;  grid-column: 7}



.new_price_card {; width: 100%; padding: 20px 15px; text-align: center}
.new_price_card h1 {color: var(--secondary); text-align: center; width: 100%; margin: 0px 0px 20px!important; font-size: 1.9em!important; font-weight: 500!important}
.new_price_card h4 {color: var(--text); text-align: center; width: 100%; margin: 0px 0px 20px!important; font-size: 1.2em!important; font-weight: 300!important; line-height: 1.3em; min-height: 10em}
.new_price_card h4 b { font-weight: 500!important; white-space: nowrap!important}

.new_price_card h6 {font-size: 0.7em!important; font-weight: 200!important}

.new_price_card h2 {color: var(--text); text-align: center; width: 100%; margin: 0px 0px 0px!important; font-size: 1.7em!important; font-weight: 500!important; line-height: 1.5em}
.new_price_card h2 .smllr {color: var(--text);  font-size: 0.6em!important; font-weight: 200!important; transform: translateY(-10px); display: inline-block}

.new_price_card .button {margin: 25px auto 0px!important; display: table; font-size: 1.2em}

.current_subs b {color: var(--main); font-weight: 600}
.current_subs  {color: var(--text); font-size: 1.2em; font-weight: 400}

/*********************************  responsive desktop  *****************************/

@media (min-width: 1300px) {
    
#home_main{ margin: 0px 240px 10px}
    

    
    
}





/********************************************bigger screen settings**********************************************************/
@media screen and (min-width: 1800px) {
    
#home_main { margin: 10px 320px 30px;  }
    
 
}


/********************************************smaller screen settings */
@media screen and (max-width: 1450px) {
#home_main { margin: 10px 10px 30px;  }

    /* 4 responsive columns */
.column4 {
  float: left;
  width: calc(33.3% - 0px);
  padding: 0px 10px!important; border: 0px solid #f09; margin: 10px 0px;  justify-content: center;
}
      /* 4 responsive columns */  

    
}
/**********************************************************/

/********************************************even smaller screen settings */
@media  (min-width:600px) and (max-width:1000px) {

.column4 {
  float: left;
  width: calc(50% - 0px)!important;
  padding: 0px 10px!important; border: 0px solid #f09; margin: 10px 0px; 
}
    
    
.price_grid {
  display: grid;
  grid-gap: 0px;
  grid-template-columns: 50% 50% ;
  padding: 0px;
  margin: 10px 0px;
  width: 100%;}
.pbox {  padding: 0px;margin: 0px;}

.p1a {grid-row: 1;  grid-column: 1}
.p1b {grid-row: 1;  grid-column: 1; margin: 10px 5px 0px 0px}
.p1c {grid-row: 1;  grid-column: 2;  margin: 10px 0px 0px 5px}
.p1d {grid-row: 2;  grid-column: 1;  margin: 10px 5px 0px 0px}
.p1e {grid-row: 2;  grid-column: 2;  margin: 10px 0px 0px 5px}
.p1f {grid-row: 2;  grid-column: 2;  margin: 10px 10px}
.p1g {grid-row: 1;  grid-column: 7}
    
.new_price_card h4 { min-height: 3.5em}
 
}
/**********************************************************/




/********************************************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 lema search **/
.bg-trans-cross-fade .bg-layer .display-layer {
  border: 0px solid #f09;
  position: absolute;
  top: 50%;
  left: 50%;
    transform:  translateY(-40%) translateX(-50%);
  width: calc(100% - 20px);
  height: auto;
  justify-content: center;
  align-items: center;
  z-index: 30;
    padding: 0px; margin: 0px;
}


.lema {font-family: 'RobotoSerif'; color: #fff; font-size: 1.8em; text-shadow: 2px 2px 4px rgba(0,0,0,0.2); text-align: center; width: 100%; margin: 0px auto 60px}

.home_search {width: calc(100% - 20px); margin: 20px auto; }

.home_search .input_text {width: 48%; margin: 0px 2px;  }
.home_search input[type=submit] {width: 22%; background: var(--main); border: none; font-size: 1em; padding: 9px  4px; font-weight: 500; color: #fff; margin: 0px 2px;  ; position: relative; top: -2px}


.home_search select {width: 22%; background: #f9f9f9; border: 1px solid #f1f1f1; border-bottom: 1px solid #ccc; font-size: 1em; padding: 10px 0px 6px 4px; font-weight: 300; color: #777; margin: 2px 2px 1px ; line-height: 1.5em }

    
#events_pagination {border: 1px solid #fff; position: relative; display: block;  margin: 20px auto 150px; padding: 0px; font-size: 0.9em;  font-weight: 350;}
#events_pagination .pagination {border: 0px solid #f09; margin: 0px auto 0px; position: absolute; left: 0%; transform: translateX(0%); white-space: nowrap}    
    
/** home lema search **/
.home_search {width: 100%; margin: 20px auto; }

.home_search .input_text {width: 48%; margin: 0px 2px;  }
.home_search input[type=submit] {width: 22%; background: var(--main); border: none; font-size: 1em; padding: 0px 0px; font-weight: 500; color: #fff; margin: 0px 2px;  ; position: relative; top: -2px; height: 36px; text-transform: uppercase}

.home_search select {width: 22%; background: #f9f9f9; border: 1px solid #f1f1f1; border-bottom: 1px solid #ccc; font-size: 1em; padding: 10px 0px 6px 4px; font-weight: 300; color: #777; margin: 2px 2px 1px ; line-height: 1.5em }
    

.div50 {width: 100%}
.div75 {width: 100%}
    
    /* 4 responsive columns */
.column4 {
  float: left;
  width: calc(100% - 0px);
  padding: 0px 10px!important; border: 0px solid #f09; margin: 10px 0px; 
}
/* end 4 responsive columns */  
    
    /* 4 columns */
.wrapperfour {
  display: grid;
  grid-gap: 0px;
  grid-template-columns: 100% ;
  padding: 0px;
  margin: 10px 0px;
  width: 100%;
}
.boxfour {
  padding: 0px 0px;
  margin: 0px;
  text-align: left;
  border: 0px solid #ee0000;
}

.wrapperfour label {margin: 0px; display: block}

.k1 {grid-row: 1;  grid-column: 1 }     

.k1a {grid-row: 1;  grid-column: 1} 
.k1b {grid-row: 2;  grid-column: 1} 
.k1c {grid-row: 3;  grid-column: 1 } 
.k1d {grid-row: 4;  grid-column: 1 } 

.k1aa {grid-row: 1;  grid-column: 1 } 
.k1bb {grid-row: 3;  grid-column: 1 } 

    

.k1bbb {grid-row: 2;  grid-column: 1} 
    
.k1aaa {grid-row: 1;  grid-column: 1 } 
    
.k2 {grid-row: 5;  grid-column: 1 }     

.k2a {grid-row: 5;  grid-column: 1} 
.k2b {grid-row: 6;  grid-column: 1} 
.k2c {grid-row: 7;  grid-column: 1} 
.k2d {grid-row: 8;  grid-column: 1} 

.k2aa {grid-row: 5;  grid-column: 1 } 
.k2bb {grid-row: 7;  grid-column: 1 } 

.k2aaa {grid-row: 5;  grid-column: 1 } 


.k3 {grid-row: 9;  grid-column: 1 }     

.k3a {grid-row: 9;  grid-column: 1} 
.k3b {grid-row: 10;  grid-column: 1} 
.k3c {grid-row: 11;  grid-column: 1} 
.k3d {grid-row: 12;  grid-column: 1} 

.k3aa {grid-row: 9;  grid-column: 1 } 
.k3bb {grid-row: 11;  grid-column: 1 } 


.k4 {grid-row: 13;  grid-column: 1}     

.k4a {grid-row: 13;  grid-column: 1} 
.k4b {grid-row: 14;  grid-column: 1} 
.k4c {grid-row: 15;  grid-column: 1} 
.k4d {grid-row: 16;  grid-column: 1} 

.k4aa {grid-row: 13;  grid-column: 1} 
.k4bb {grid-row: 15;  grid-column: 1 } 


.k5 {grid-row: 17;  grid-column: 1}     

.k5a {grid-row: 17;  grid-column: 1} 
.k5b {grid-row: 18;  grid-column: 1} 
.k5c {grid-row: 19;  grid-column: 1} 
.k5d {grid-row: 20;  grid-column: 1} 

.k5aa {grid-row: 17;  grid-column: 1} 
.k5bb {grid-row: 19;  grid-column: 1 } 


.k6 {grid-row: 21;  grid-column: 1}     

.k6a {grid-row: 21;  grid-column: 1} 
.k6b {grid-row: 22;  grid-column: 1} 
.k6c {grid-row: 23;  grid-column: 1} 
.k6d {grid-row: 24;  grid-column: 1} 

.k6aa {grid-row: 21;  grid-column: 1} 
.k6bb {grid-row: 23;  grid-column: 1 } 

.k7 {grid-row: 25;  grid-column: 1}     

.k7a {grid-row: 25;  grid-column: 1} 
.k7b {grid-row: 26;  grid-column: 1} 
.k7c {grid-row: 27;  grid-column: 1} 
.k7d {grid-row: 28;  grid-column: 1} 

.k7aa {grid-row: 25;  grid-column: 1} 
.k7bb {grid-row: 27;  grid-column: 1 } 

.k8 {grid-row: 29;  grid-column: 1}     

.k8a {grid-row: 29;  grid-column: 1} 
.k8b {grid-row: 30;  grid-column: 1} 
.k8c {grid-row: 31;  grid-column: 1} 
.k8d {grid-row: 32;  grid-column: 1} 

.k8aa {grid-row: 29;  grid-column: 1} 
.k8bb {grid-row: 31;  grid-column: 1 } 

.k9 {grid-row: 33;  grid-column: 1}     

.k9a {grid-row: 33;  grid-column: 1} 
.k9b {grid-row: 34;  grid-column: 1} 
.k9c {grid-row: 35;  grid-column: 1} 
.k9d {grid-row: 36;  grid-column: 1} 

.k9aa {grid-row: 33;  grid-column: 1} 
.k9bb {grid-row: 35;  grid-column: 1 } 

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


.k10 {grid-row: 37;  grid-column: 1}     

.k10a {grid-row: 37;  grid-column: 1} 
.k10b {grid-row: 38;  grid-column: 1} 
.k10c {grid-row: 39;  grid-column: 1} 
.k10d {grid-row: 40;  grid-column: 1} 

.k10aa {grid-row: 37;  grid-column: 1} 
.k10bb {grid-row: 39;  grid-column: 1 } 


.k40 {grid-row: 81;  grid-column: 1}     

.k40a {grid-row: 81;  grid-column: 1} 
.k40b {grid-row: 82;  grid-column: 1} 
.k40c {grid-row: 83;  grid-column: 1} 
.k40d {grid-row: 84;  grid-column: 1}  

.k40aa {grid-row: 81;  grid-column: 1} 
.k40bb {grid-row: 82;  grid-column: 1 } 

    /* end 4 columns */  
    

/* 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 3 responsive columns */


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

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

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

/* end 3 responsive columns */

/* 4 responsive columns */

.column4margin {
  float: left;
  width: calc(100% - 10px);
  margin: 1px 5px!important; border: 0px solid #f09; padding: 0px!important; 
}

.row4margin {margin: -5px!important; padding: 0px 0px 150px!important; min-width: 100%; border: 0px solid #f09}
    
.column4 {
  float: left;
  width: calc(100% - 0px);
  padding: 0px 10px!important; border: 0px solid #f09; margin: 10px 0px; 
}

.row4 {margin: 0px -10px!important; padding: 0px!important; min-width: 100%; border: 0px solid #f09}

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

/* end 4 responsive columns */
/* 5 responsive columns */
.column5 {
  float: left;
  width: calc(100% - 0px);
  padding: 0px 10px!important; border: 0px solid #f09; margin: 2px 0px 0px 0px
}
.column5margin, .column5small, .column5smaller, .column5big, .column5smallest, .column5margin23  {
  float: left;
  width: calc(100% - 0px);
  padding: 0px 10px!important; border: 0px solid #f09; margin: 2px 0px 0px 0px
}


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

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

/* end 5 responsive columns */


    
.price_grid {
  display: grid;
  grid-gap: 0px;
  grid-template-columns: 100% ;
  padding: 0px;
  margin: 10px 0px;
  width: 100%;}
.pbox {  padding: 0px;margin: 0px;}

.p1a {grid-row: 1;  grid-column: 1}
.p1b {grid-row: 1;  grid-column: 1; margin:   5px 0px}
.p1c {grid-row: 2;  grid-column: 1;  margin:  5px 0px}
.p1d {grid-row: 3;  grid-column: 1;  margin: 5px 0px}
.p1e {grid-row: 4;  grid-column: 1;  margin: 5px 0px}
.p1f {grid-row: 2;  grid-column: 2;  margin: 10px 10px}
.p1g {grid-row: 1;  grid-column: 7}
    
.new_price_card h4 { min-height: 3.0em}
  
}


.input_text.ng-invalid.ng-touched {
  border: 2px solid var(--red);
}
.error_msg {
  color: var(--red);
}
.error_msg {
  color: var(--red);
}

.required_accept_terms {
  color: var(--red);
  font-size: 0.8em;
  display: inline;
  margin-top: 5px;
}