.upcoming-training-events .wrapper-calendar { margin: 3.667rem auto 0 } .nav-categories ul { -ms-flex-line-pack: stretch; align-content: stretch; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; list-style-type: none; width: 100% } .nav-categories li { font: 700 1.222rem/1.778rem "Roboto", Arial, Helvetica Neue, Helvetica, sans-serif; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; text-align: center } .page-faq .nav-categories li { -ms-flex-preferred-size: 25%; flex-basis: 25% } .nav-categories .icon { display: block } .nav-categories li a { background-color: #00477d; color: #fff; display: block; height: 100%; padding: 1rem 0; width: 100%; -webkit-transition: background-color .2s ease-out, color .2s ease-out; transition: background-color .2s ease-out, color .2s ease-out } .nav-categories li.active a { color: #F7911D } .nav-categories li:nth-child(2) a { background-color: #003863 } .nav-categories li:nth-child(3) a { background-color: #002a4a } .nav-categories li:nth-child(4) a { background-color: #001b30 } .nav-categories li a:hover { background-color: #fff; color: #005596; -webkit-transition: background-color .2s ease-in, color .2s ease-in; transition: background-color .2s ease-in, color .2s ease-in } .nav-categories svg { max-height: 32px; width: auto; margin: 0 auto } .nav-categories svg path { fill: #fff } .nav-categories li a:hover svg path { fill: #005596 } .nav-categories li.active svg path { fill: #F7911D } .swiper-course-photos a.gallery>img { border-radius: 1.533rem; border: .056rem solid rgba(209, 210, 212, .333); width: 100%; opacity: 1; -webkit-transition: opacity .2s ease-out; transition: opacity .2s ease-out } .swiper-course-photos a.gallery>img:hover { opacity: .66; -webkit-transition: opacity .2s ease-in; transition: opacity .2s ease-in } .swiper-course-photos a.gallery>img { border: none; height: auto; max-width: 100%; width: auto } @media only screen and (max-width:1366px) { .wrapper-calendar { padding: 0 1.833rem } .home .wrapper-calendar { padding: 0 } } @media only screen and (max-width:840px) { .wrapper-calendar { margin: 1.833rem auto } } @media only screen and (max-width:428px) { .nav-categories ul { display: block } .nav-categories li { border: none } } .nav-categories-events { display: -webkit-box; display: -ms-flexbox; display: flex } .nav-categories-events ul { -ms-flex-line-pack: stretch; align-content: stretch; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; list-style-type: none; width: 100% } .nav-categories-events li { font: 700 1.222rem/1.778rem "Roboto", Arial, Helvetica Neue, Helvetica, sans-serif; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; text-align: center } .page-faq .nav-categories-events li { -ms-flex-preferred-size: 25%; flex-basis: 25% } .nav-categories-events li { -ms-flex-preferred-size: 14.28571429%; border: .056rem solid #dedede; flex-basis: 14.28571429%; font-size: .75rem; line-height: 1rem } .nav-categories-events li a { -webkit-transition: background-color .2s ease-in; background-color: #f2f2f2; color: #11171F; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 100%; padding: .7rem .5rem .5rem .5rem; text-decoration: none; transition: background-color .2s ease-in } .nav-categories-events li a:hover, .nav-categories-events li a:focus-visible { background-color: #fff; color: #11171F; text-decoration: none; -webkit-transition: background-color .2s ease-in; transition: background-color .2s ease-in } .nav-categories-events li a:focus-visible { outline: 2px solid #005596; outline-offset: 2px } .page-faq .nav-categories-events li a, .page-faq .nav-categories-events li a:hover, .page-faq .nav-categories-events li a:focus-visible { color: #11171F; text-decoration: none } .nav-categories-events li .icon { display: block; height: 32px; margin: 0 auto .25rem } .nav-categories-events li .icon svg { height: 32px; margin: 0 auto; width: auto } .nav-categories-events li .icon svg path { fill: #005596 } .nav-categories-events ul li.current a { background-color: #F7911D; border-bottom: 3px solid #F7911D; border-bottom-color: #F7911D; color: #11171F } .nav-categories-events ul li.current a:hover, .nav-categories-events ul li.current a:focus-visible { background-color: inherit } .nav-categories-events ul li.current .icon svg path { fill: #11171F } @media only screen and (max-width:1260px) { .nav-categories-events li { -ms-flex-preferred-size: auto; flex-basis: auto } } @media only screen and (max-width:960px) { .nav-categories-events li { -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333% } } @media only screen and (max-width:640px) { .nav-categories-events li, .page-faq .nav-categories-events li { -ms-flex-preferred-size: 50%; flex-basis: 50% } }