/*TARJETAS*/
/*Todo lo que tiene cm-plantilla webinars es como se ven las tarjetas en las diverentes paginas*/

.cm-plantilla-webinars {
	-webkit-box-shadow: 2px 2px 8px 3px rgba(204,204,204,0.6);
	-moz-box-shadow: 2px 2px 8px 3px rgba(204,204,204,0.6);
	box-shadow: 2px 2px 8px 3px rgba(204,204,204,0.6);
	transition: box-shadow 0.3s ease-in-out;
}

.cm-plantilla-webinars {
    margin-left: 15px;
    margin-right: 15px;
}

.cm-plantilla-webinars:hover {
	-webkit-box-shadow: 2px 2px 8px 3px rgba(170,170,170,0.8);
	-moz-box-shadow: 2px 2px 8px 3px rgba(170,170,170,0.8);
	box-shadow: 2px 2px 8px 3px rgba(170,170,170,0.8);
}

.cm-plantilla-webinars .vc_separator h4 {
	font-size: 0.7em;
}

.cm-plantilla-webinars h5 {
    display: block;/* or inline-block */
    text-overflow: ellipsis;
    word-wrap: break-word;
    overflow: hidden;
    height: 2.4em;
    line-height: 1.2em;
	font-size: 0.8em;
	font-weight:bold;
}

.cm-plantilla-webinars p {
    display: block;/* or inline-block */
    text-overflow: ellipsis;
    word-wrap: break-word;
    overflow: hidden;
    max-height: 3.9em;
    line-height: 1.3em;
	font-size: 0.7em;
}

.cm-plantilla-webinars-cat {
    margin-top: -10px;
    margin-left: -10px;
    margin-right: 40px;
    margin-bottom: 10px;
    padding-left: 10px;
    color: #ffffff;
    text-align: left!important;
}

/*esto es para que se vean bien los filtros*/
.vc_responsive .vc_grid-filter-filled-rounded {
        margin-top: 5px;
        margin-bottom: 20px;
}

@media (max-width: 778px){
    .vc_responsive .vc_grid-filter-filled-rounded {
        display: block!important;
        margin-top: 30px;
        margin-bottom: 30px;
    }
    .vc_responsive .vc_grid-filter-select {
        display: none!important;
    }
    .vc_responsive .vc_grid-filter.cm-plantilla-webinars-cat {
        display: block!important;
    }
}

.cm-plantilla-webinars .vc_gitem-row-position-middle{
    top: 25%;
}
.cm-plantilla-webinars .vc_gitem-row-position-top{
    z-index: 4;
}
@media (min-width: 779px) and (max-width: 1200px){
    .vc_col-sm-4 {
        width: 50%;
    }
}
/*Los colores de las categorias en todas las tarjetas*/
.cm-color-Webinar{
    background-color: #1a3053;
    color:#ffffff!important;
}
.cm-color-Actividad{
    background-color: #ED6C34;
    color:#ffffff!important;
}
.cm-color-Servicio{
    background-color: #56efbf;
    color:#000000!important;
}
.cm-color-Curso{
    background-color: #808080;
    color:#1a3053!important;
    font-weight:bold!important;
}
.cm-color-{
    background-color: #f39f7a;
    color:#1a3053!important;
    font-weight:bold!important;
}

/*FIN DE TARJETAS*/

/*los siguientes dos para que se vean bien los titulos y sus backgrounds*/
.mobile-true .breadcrumbs-off.fancy-parallax-bg{
    background-size:cover!important;
}

.fancy-title{
    text-shadow: 1px 1px #333333;
}



.sub-downwards.dt-parent-menu-clickable .sub-nav > li:not(.has-children) > a {
    margin-right: 0px!important;
}

.side-header .branding {
    display: none!important;
}

/* clase para tener sombritas*/
.cm-boxshadow{
-webkit-box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
-moz-box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
border-top: 1px solid #ededed;
}


/*el color del "para ayudarte en lo que necesites." en la pagina principal*/
.cm-flip-intro h5 {
    color:#ffffff;
}



.dt-css-grid{
   grid-column-gap:0 !important;
   grid-row-gap:30px !important;
   
}

.dt-css-grid .vc_col-sm-4{
    width:100% !important;
    padding-left:0;
    padding-right:0;
}

#cm-formulario{
    display:none;
    width:auto;
    padding:initial;
    float:none !important;
}

ul.vc_grid-filter {
    display:flex;
    justify-content: center;
    align-items: center;
    margin-left: 0 !important;
}

li.vc_grid-filter-item {
    flex-basis: 4.5em;
}

/*Los contenedores de las categorias en el buscador de arriba, descomentar width para que se ajuste al tamaño de nombre de la categoria*/
/*usan las mismas clases de las tarjetas para los colores*/
.cm-landing-cat {
    padding:3px 8px 4px 8px!important;
    border-radius:3px!important;
    margin-bottom:10px!important;
    /*width:max-content!important;*/
}