/* -------------------------------- 
IMAGES
-------------------------------- */

img { max-width: 100%; height: auto;border:0;-ms-interpolation-mode:bicubic;vertical-align:middle}
@media \0screen {
img { width: auto; /* for ie 8 */}
}

 
*, *::before, *::after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
            /*-webkit-appearance:none;*/
}


[class*="shadow_"] {
  display: block;
  margin:0 auto;
  width: 100%;
  max-width:90%;
  box-shadow: var(--bigShadow);
}

.shadow_10  { box-shadow: var( --shadow10); }
.shadow_20  { box-shadow: var( --shadow20); }
.shadow_30  { box-shadow: var( --shadow30); }
.shadow_40  { box-shadow: var( --shadow40); }
.shadow_50  { box-shadow: var( --shadow50); }

 

::selection       { color:#fff; background:hsl(var(--brand));}
::-moz-selection  { color:#fff; background:hsl(var(--brand));}

a:link, [class*="button_"], [class*="shadow"], input[type=submit], .testimonios-card, .cursos-main, header, .oferta_card, .oferta_card img,
.oferta_card--info, .oferta_card--circle, .oferta_card--circle:before, .main_circle--circle:before, .testimonios-card, .testimonios-card--info,
[class*="btn_"], [class*="btn_"] small,
.block_filter > li,.block_filter li a, .promo-single p,
.slick-dots li button, .slick-dots li.slick-active button  {
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

 

/* -------------------------------- 
CSS COLUMNS
-------------------------------- */

.row {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin:0 auto;
    width:100%;
    max-width:var(--grid-maxWidth);
    position: relative; 
}


/*.row .row [class*="col_"] { margin: 0 calc(var(--grid-gutter) / 2) 0;}*/
/*.row .row [class*="col_"] { margin: 0;}*/


.row + .row,
.row + [class*="block_"],
.row + [class*="grid_"],
[class*="block_"] + .row,
/*[class*="block_"] + [class*="block_"],*/
[class*="block_"] + [class*="grid_"],
[class*="grid_"] + .row,
[class*="grid_"] + [class*="block_"],
[class*="grid_"] + [class*="grid_"]
{ margin: var(--space-xl) auto 0; }

.col, [class*="col_"] { flex: none; margin:0 calc( var(--grid-gutter) / 2 ); position: relative; }
.col { flex: 1; }

.col_1  { flex-basis: calc( 8.3333% - var(--grid-gutter));  max-width: calc( 8.3333% - var(--grid-gutter)) }
.col_2  { flex-basis: calc( 16.6667% - var(--grid-gutter)); max-width: calc( 16.6667% - var(--grid-gutter)) }
.col_3  { flex-basis: calc( 25% - var(--grid-gutter));      max-width: calc( 25% - var(--grid-gutter)) }
.col_4  { flex-basis: calc( 33.3333% - var(--grid-gutter)); max-width: calc( 33.3333% - var(--grid-gutter)) }
.col_5  { flex-basis: calc( 41.6667% - var(--grid-gutter)); max-width: calc( 41.6667% - var(--grid-gutter)) }
.col_6  { flex: 1; flex-basis: calc( 50% - var(--grid-gutter));      max-width: calc( 50% - var(--grid-gutter)) }
.col_7  { flex-basis: calc( 58.3333% - var(--grid-gutter)); max-width: calc( 58.3333% - var(--grid-gutter)) }
.col_8  { flex-basis: calc( 66.6667% - var(--grid-gutter)); max-width: calc( 66.6667% - var(--grid-gutter)) }
.col_9  { flex-basis: calc( 75% - var(--grid-gutter));      max-width: calc( 75% - var(--grid-gutter)) }
.col_10 { flex-basis: calc( 83.3333% - var(--grid-gutter)); max-width: calc( 83.3333% - var(--grid-gutter)) }
.col_11 { flex-basis: calc( 91.6667% - var(--grid-gutter)); max-width: calc( 91.6667% - var(--grid-gutter)) }
.col_12 { flex-basis: calc( 100% - var(--grid-gutter));     max-width: calc( 100% - var(--grid-gutter)) }


.no-gutters >.col, .no-gutters >[class*="col_"] { margin: 0!important; }

.no-gutters .col_1  { flex-basis: calc( 8.3333% - var(--no-gutter));  max-width: calc( 8.3333% - var(--no-gutter)) }
.no-gutters .col_2  { flex-basis: calc( 16.6667% - var(--no-gutter)); max-width: calc( 16.6667% - var(--no-gutter)) }
.no-gutters .col_3  { flex-basis: calc( 25% - var(--no-gutter));      max-width: calc( 25% - var(--no-gutter)) }
.no-gutters .col_4  { flex-basis: calc( 33.3333% - var(--no-gutter)); max-width: calc( 33.3333% - var(--no-gutter)) }
.no-gutters .col_5  { flex-basis: calc( 41.6667% - var(--no-gutter)); max-width: calc( 41.6667% - var(--no-gutter)) }
.no-gutters .col_6  { flex-basis: calc( 50% - var(--no-gutter));      max-width: calc( 50% - var(--no-gutter)) }
.no-gutters .col_7  { flex-basis: calc( 58.3333% - var(--no-gutter)); max-width: calc( 58.3333% - var(--no-gutter)) }
.no-gutters .col_8  { flex-basis: calc( 66.6667% - var(--no-gutter)); max-width: calc( 66.6667% - var(--no-gutter)) }
.no-gutters .col_9  { flex-basis: calc( 75% - var(--no-gutter));      max-width: calc( 75% - var(--no-gutter)) }
.no-gutters .col_10 { flex-basis: calc( 83.3333% - var(--no-gutter)); max-width: calc( 83.3333% - var(--no-gutter)) }
.no-gutters .col_11 { flex-basis: calc( 91.6667% - var(--no-gutter)); max-width: calc( 91.6667% - var(--no-gutter)) }
.no-gutters .col_12 { flex-basis: calc( 100% - var(--no-gutter));     max-width: calc( 100% - var(--no-gutter)) }
 

/* -------------------------------- 
CSS BLOCKS
-------------------------------- */

[class^='block_'] {
  list-style: none;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  margin:0 auto;
  width:100%;
  max-width:var(--grid-maxWidth); 

}

.block_2,
.block_3  {margin:0; padding: 0; }

[class*="block_"] > * { flex: none; margin: calc( var(--space-s) / 2 ) calc( var(--space-s) / 2 ); }

.block_2 > *  { flex-basis: calc( 50% - var(--space-s));      max-width: calc( 50% - var(--space-s)) }
.block_3 > *  { flex-basis: calc( 33.3333% - var(--space-s)); max-width: calc( 33.3333% - var(--space-s)) }
.block_4 > *  { flex-basis: calc( 25% - var(--grid-gutter));      max-width: calc( 25% - var(--grid-gutter)) }
.block_5 > *  { flex-basis: calc( 20% - var(--grid-gutter));      max-width: calc( 20% - var(--grid-gutter)) }
.block_6 > *  { flex-basis: calc( 16.6667% - var(--grid-gutter)); max-width: calc( 16.6667% - var(--grid-gutter)) }


.no-gutters.block > *, .no-gutters[class*="block_"] > *, .no-gutters[class^='block_'] > * { margin: 0; }

.no-gutters.block_2 > *  { flex-basis: calc( 50% - var(--no-gutter));      max-width: calc( 50% - var(--no-gutter)) }
.no-gutters.block_3 > *  { flex-basis: calc( 33.3333% - var(--no-gutter)); max-width: calc( 33.3333% - var(--no-gutter)) }
.no-gutters.block_4 > *  { flex-basis: calc( 25% - var(--no-gutter));      max-width: calc( 25% - var(--no-gutter)) }

 


 
@media only screen and (min-width:60em) and (max-width:74.9375em) {

.row,
[class*="block_"]
{margin:0 auto; max-width: 96%; }

.row .row { max-width: 100%; margin:0 auto; }  

.row .row,
.row [class*="block_"]                  
{ max-width: 100%; margin:0 auto; }  


}


@media only screen and (max-width:59.9375em) {

.col, [class*="col_"], .no-gutters >[class*="col_"] { flex: 0 1 100%; max-width: 100%; margin:0; }

 
.row,
[class*="block_"]   
{ margin:0 auto; max-width:92%; }

.row .row,
.row [class*="block_"]                 
{ max-width: 100%; margin:0 auto; }  

.row .row [class*="col_"] { margin: calc( var(--grid-gutter) / 2 ) 0;}
 
/*.block_3 > *  { flex-basis: calc( 50% - var(--grid-gutter)); max-width: calc( 50% - var(--grid-gutter)) }*/
 
 
}


@media only screen and (max-width:31.250em) { 

.row, 
[class*="block_"]    
{ margin:0 auto; max-width: 92%;  }

/*.block_3 > * { flex-basis: calc( 100% - var(--grid-gutter)); max-width: calc( 100% - var(--grid-gutter)) }*/
 

}



/* -------------------------------- 
CSS LAYOUT UTILITIES
-------------------------------- */

.flex                 { display: flex; }

.row-center           { align-items: center; justify-content: center;}
.row-top              { align-items: flex-start; }
.row-bottom           { align-items: flex-end; }
.row-right            { align-items: center; justify-content: flex-end!important; }
.center-items         { display: flex; align-items: center!important; justify-content: center!important; }
.row-reverse          { flex-direction: row-reverse; }


.align-center         { margin: auto; align-self: center; }
.align-left           { margin:0 auto 0 0; align-self: center;  }
.align-right          { margin:0 0 0 auto; align-self: center; }
.align-top-center     { margin:0 auto; align-self: flex-start; }
.align-top-left       { margin:0 auto 0 0; align-self: flex-start; }
.align-top-right      { margin:0 0 0 auto; align-self: flex-start;  }
.align-bottom-center  { margin:0 auto; align-self: flex-end; }
.align-bottom-left    { margin:0 auto 0 0; align-self: flex-end; }
.align-bottom-right   { margin:0 0 0 auto; align-self: flex-end; }


.hidden-col            { visibility: hidden;}

.full                  { max-width:100%!important; width: 100%!important;}
 
.between               { justify-content: space-between }

.order-left            { order: 2; }
.order-right           { order: 1; } 



@media only screen and (max-width:59.9375em) {

.hidden-col            { visibility: hidden; display: none;}

.order-left            { order: 1; }
.order-right           { order: 2; } 

}

 
/*************  DEMO STYLES ****************/


.black { border: 1px solid #000}
.ora   { border: var(--ora)}
.ore   { border: 1px solid #fff;position: relative; z-index: 9; }
 
.item, .item2  { padding:3em 1em; background:rgba(0,0,0,.2); color: #fff; font-size: 14px; text-align:center; }
.item3  { padding:1em 2em; background:rgba(255,255,255,.4); }
.item2  { padding:0; height: 300px; background:var(--dark10); }

.back  { background:rgba(0,0,0,.06); padding: 2em 0; }