#workshops{width:1140px;margin:0 auto;text-align:center;}
@media screen and (max-width:1200px){
#workshops{width:auto;margin:0 30px;}
}
#workshops ul.switch{padding:0;margin:0 0 30px 0;display:inline-block;vertical-align:top;list-style:none;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;background:#F4F8FE;font-size:14px;line-height:20px;}
#workshops ul.switch li{display:inline-block;vertical-align:top;font-size:14px;line-height:20px;}
#workshops ul.switch li a{padding:10px 20px;display:inline-block;vertical-align:top;background:#F4F8FE;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;color:rgba(0, 30, 70, 0.8);font-size:14px;line-height:20px;font-weight:600;text-decoration:none;-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-o-transition:all 0.3s ease;transition:all 0.3s ease;}
#workshops ul.switch li a.active{background:#001E46;color:white;}
@media screen and (max-width:1200px){
#workshops ul.switch{display:block;}
#workshops ul.switch li{display:block;}
#workshops ul.switch li a{display:block;}
}
#workshops .filter-box{margin-bottom:40px;display:flex;justify-content:center;}
#workshops .filter-box__filter{display:flex;align-items:center;cursor:pointer;}
#workshops .filter-box__filter *{transition:0.2s all linear;}
#workshops .filter-box__filter-checkbox{margin-right:10px;width:25px;height:25px;border-radius:5px;border:2px solid rgba(2, 52, 68, 0.8);}
#workshops .filter-box__filter-checkbox--active{border:2px solid #023444;background-color:#023444;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' height='19px' width='19px' version='1.1' id='Capa_1' viewBox='0 0 17.837 17.837' xml:space='preserve'%3E%3Cg%3E%3Cpath style='fill:%23FFFFFF;' d='M16.145,2.571c-0.272-0.273-0.718-0.273-0.99,0L6.92,10.804l-4.241-4.27 c-0.272-0.274-0.715-0.274-0.989,0L0.204,8.019c-0.272,0.271-0.272,0.717,0,0.99l6.217,6.258c0.272,0.271,0.715,0.271,0.99,0 L17.63,5.047c0.276-0.273,0.276-0.72,0-0.994L16.145,2.571z'/%3E%3C/g%3E%3C/svg%3E");background-position:center center;background-repeat:no-repeat;}
#workshops .filter-box__filter-label{color:#023444;font-size:14px;}
#workshops .filter-box__filter-label strong{font-weight:600;}
#workshops .filter-box__filter:hover .filter-box__filter-checkbox{border:2px solid #023444;}
#workshops .list{display:grid;grid-row-gap:34px;grid-column-gap:36px;grid-template-columns:repeat(2, 1fr);text-align:left;}
@media screen and (max-width:1100px){
#workshops .list{grid-template-columns:repeat(1, 1fr);}
}
#workshops article{padding:30px 30px 140px 220px;position:relative;background:white;border:1px solid #E5E5E5;display:none;}
#workshops article.active-item-by-cat.active-item,
#workshops article.active-item-by-cat:not(.inactive-item){display:block;}
#workshops article .img{width:190px;height:100%;position:absolute;left:0;top:0;display:block;background-repeat:no-repeat;background-position:center center;background-size:cover;cursor:pointer;}
#workshops article h3{padding:0 0 10px 0;color:#001e46;font-size:18px;line-height:27px;font-weight:bold;cursor:pointer;}
#workshops article .live-broadcast-date{font-size:14px;}
#workshops article .level{padding-top:18px;color:rgba(0, 30, 70, 0.83);font-size:15px;line-height:16px;font-weight:400;}
#workshops article .level div{margin:2px 10px 0 0;display:inline-block;vertical-align:top;}
#workshops article .level div .dot{width:12px;height:12px;margin:0 4px 0 0;display:inline-block;vertical-align:top;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;-webkit-box-shadow:0 0 0 1px #D6D6D6 inset;-moz-box-shadow:0 0 0 1px #D6D6D6 inset;box-shadow:0 0 0 1px #D6D6D6 inset;}
#workshops article .level div .dot-full{background:#337EFE;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
#workshops article a{padding:11px 22px;position:absolute;left:220px;bottom:30px;display:inline-block;vertical-align:top;background:#EBF2FE;-webkit-border-radius:28px;-moz-border-radius:28px;border-radius:28px;color:#015ffe;font-size:14px;line-height:20px;font-weight:600;white-space:nowrap;text-decoration:none;-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-o-transition:all 0.3s ease;transition:all 0.3s ease;}
#workshops article a:hover{background:#015ffe;color:white;}
@media screen and (max-width:500px){
#workshops article {
padding: 30px 30px 100px 30px;
}
#workshops article .img {
display: none;
}
#workshops article a {
left: 30px;
}
}