/* The main site menu, for the blog: every rule main.css and site.css apply
   to .menu_outer and what is inside it, so the blog can open the same drawer
   without loading the main stylesheet. General rules (a, img, .logo) are
   scoped with :where(.menu_outer), which adds no specificity, so they rank
   against each other exactly as they do on the main site. */

@font-face { font-family: montserrat_light; src: url("../font/Montserrat-Light.otf"); font-display: swap; }
@font-face { font-family: montserrat_regular; src: url("../font/Montserrat-Regular.otf"); font-display: swap; }

/* What the menu inherits from the main site's body, and the box model it
   assumes, in place of the blog's. */
.menu_outer { font-family: montserrat_regular, sans-serif; font-size: 14px; line-height: 20px; color: rgb(51, 51, 51); font-weight: 400; letter-spacing: normal; text-rendering: auto; -webkit-font-smoothing: auto; }
:where(.menu_outer), :where(.menu_outer) *, :where(.menu_outer) *::before, :where(.menu_outer) *::after { box-sizing: content-box; }
:where(.menu_outer) ul, :where(.menu_outer) ol { box-sizing: content-box; }
:where(.menu_outer) img { display: inline; }

:where(.menu_outer) ::-webkit-scrollbar { width: 8px; }
:where(.menu_outer) ::-webkit-scrollbar-track { background-color: rgba(255, 255, 255, 0.3); }
:where(.menu_outer) ::-webkit-scrollbar-thumb { border-radius: 6px; background-color: rgba(117, 116, 116, 0.4); }
:where(.menu_outer) ::selection { color: rgb(255, 255, 255); background: rgb(153, 153, 153); }
:where(.menu_outer) img { height: auto; max-width: 100%; vertical-align: middle; border: 0px; }
:where(.menu_outer) a { color: rgb(0, 136, 204); text-decoration: none; }
:where(.menu_outer) h4 { font-weight: 400; }
.menu_outer { z-index: 1000; position: relative; }
.menu_open .menu_outer { height: 100%; position: fixed; width: 100%; top: 0px; left: 0px; background: rgb(49, 52, 57); }
.menu_btn_wrap { background: rgb(239, 13, 51); border-radius: 3px; box-shadow: rgba(239, 13, 51, 0.08) 0px 2px 19px 9px; color: rgb(255, 255, 255); position: fixed; top: 20px; right: 40px; cursor: pointer; font-size: 0px; z-index: 1000; transition: 0.5s; padding: 1px; }
#menu_title { transition: 0.5s; display: inline-block; font-weight: 400; font-family: montserrat_light; font-size: 10px; border-right: 1px solid rgba(197, 11, 42, 0.4); vertical-align: middle; overflow: hidden; white-space: nowrap; text-align: center; }
.menu_open #menu_title { width: 0px; padding: 0px; }
.call_icon { display: inline-block; vertical-align: middle; width: 50px; height: 30px; background: url("../images/phone-receiver.png") center center / 15px auto no-repeat; cursor: pointer; border-right: 1px solid rgba(197, 11, 42, 0.4); overflow: hidden; transition: 0.5s; }
.menu_open .call_icon { width: 0px; padding: 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; }
.menu_icon { display: inline-block; vertical-align: middle; width: 50px; height: 30px; background-size: 25px auto; cursor: pointer; }
.menu_icon:hover, .call_icon:hover { background-color: rgb(214, 12, 46); }
#nav-icon3 { width: 15px; height: 45px; position: relative; margin: 9px auto; transform: rotate(0deg); transition: 0.5s ease-in-out; cursor: pointer; }
#nav-icon3 span { display: block; position: absolute; height: 1px; width: 100%; background: rgb(255, 255, 255); border-radius: 9px; opacity: 1; left: 0px; transform: rotate(0deg); transition: 0.25s ease-in-out 0.2s; }
#nav-icon3 span:nth-child(1) { top: 0px; }
#nav-icon3 span:nth-child(2), #nav-icon3 span:nth-child(3) { top: 6px; }
#nav-icon3 span:nth-child(4) { top: 12px; }
.menu_open #nav-icon3 span:nth-child(1) { top: 6px; width: 0%; left: 50%; }
.menu_open #nav-icon3 span:nth-child(2) { transform: rotate(45deg); }
.menu_open #nav-icon3 span:nth-child(3) { transform: rotate(-45deg); }
.menu_open #nav-icon3 span:nth-child(4) { top: 6px; width: 0%; left: 50%; }
.menu_wrapper { height: 100%; display: none; }
.menu_wrapper .logo { left: 50px; box-shadow: none; }
.menu_open .menu_wrapper { display: block; animation: 1s ease 0s 1 normal none running fadeIn; z-index: 10; }
.menu_links_wrap { position: absolute; right: -100%; top: 0px; bottom: 0px; background: rgb(245, 245, 245); width: 22.5%; padding: 20px 30px; box-sizing: border-box; z-index: 1; box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 15px 1px; transition: 0.7s; }
.menu_wrapper.open .menu_links_wrap { right: 0%; }
h4.main_head { font-size: 50px; font-weight: bolder; color: rgb(235, 235, 235); margin: 20px 0px 0px; line-height: 60px; }
.menu_links_wrap > ul { list-style: none; padding: 0px 30px 0px 0px; border-bottom: 1px solid rgb(235, 235, 235); }
.menu_links_wrap ul li { position: relative; opacity: 0; }
.menu_open .menu_links_wrap ul li { animation: 0.5s ease 0.5s 1 normal forwards running menuSlideLeft; }
.menu_open .menu_links_wrap ul li:nth-child(2) { animation-delay: 0.6s; }
.menu_open .menu_links_wrap ul li:nth-child(3) { animation-delay: 0.7s; }
.menu_open .menu_links_wrap ul li:nth-child(4) { animation-delay: 0.8s; }
.menu_open .menu_links_wrap ul li:nth-child(5) { animation-delay: 0.9s; }
.menu_open .menu_links_wrap ul li:nth-child(6) { animation-delay: 1s; }
.menu_links_wrap ul > li > a { color: rgb(18, 19, 21); padding: 6px 10px; display: block; font-size: 11px; margin: 0px; font-weight: 600; font-family: montserrat_light, sans-serif; border: 1px solid transparent; }
.menu_links_wrap ul > li:hover > a, .menu_links_wrap ul > li.active > a { background-color: white; color: rgb(239, 13, 51); }
.menu_links_wrap ul li ul { max-height: 0px; transition: 0.6s; overflow: hidden; margin: 0px; padding: 0px; display: none; }
.menu_links_wrap ul li:hover ul { max-height: 200px; }
.menu_open .menu_links_wrap ul li ul li { padding-left: 30px; display: block; opacity: 1; animation: auto ease 0s 1 normal none running none; }
.menu_links_wrap ul li ul li a { font-size: 10px; color: rgb(88, 88, 88); padding: 5px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; margin: 0px; }
.menu_links_wrap ul li ul li:hover a { border-width: medium; border-style: none; border-color: currentcolor; border-image: none; box-shadow: none; color: rgb(153, 153, 153); }
.menu_links_wrap ul li ul li::after { content: ""; position: absolute; width: 0px; border-bottom: 1px solid rgb(239, 13, 51); left: 5px; top: 15px; transition: 0.5s; }
.menu_links_wrap ul li ul li:hover::after { width: 15px; }
.page_links { width: 100%; position: absolute; height: 100%; left: 0px; background-color: rgb(235, 235, 235); padding: 20px 0px; overflow: hidden; }
.page_links::before { content: ""; position: absolute; width: 105%; height: 23px; border-radius: 50%; top: -22px; left: -5%; box-shadow: rgba(0, 0, 0, 0.35) 0px 6px 6px -7px; }
.page_link_adjust { display: -webkit-flex; justify-content: space-between; padding: 0px 8%; flex-wrap: wrap; }
.page_links_div { width: 48%; text-align: center; margin: 5px 0px; }
.page_links_div a { display: flex; align-items: center; }
.page_link_inner { width: 40px; height: 40px; border-radius: 50%; background-color: rgb(248, 248, 248); background-size: 50% auto; background-position: center center; background-repeat: no-repeat; margin: 0px 10px 0px 0px; }
.page_link_p { padding-top: 5px; text-align: left; color: rgb(91, 91, 91); font-size: 11px; }
.page_links div:nth-child(1) .page_link_inner { background-image: url("../images/newblog.png"); }
.page_links div:nth-child(2) .page_link_inner { background-image: url("../images/newwhite_paper.png"); }
.page_links div:nth-child(3) .page_link_inner { background-image: url("../images/newindustry.png"); }
.page_links div:nth-child(4) .page_link_inner { background-image: url("../images/play.png"); }
.menu_outer .logo img { width: 105px; height: 24px; object-fit: cover; }
:where(.menu_outer) .logo { width: 105px; padding: 11px 13px 10px; background: rgb(239, 13, 51); display: block; position: fixed; top: 0px; left: 30px; z-index: 1; box-shadow: rgba(239, 13, 51, 0.1) 0px 2px 19px 9px; }
.menu_open .menu_outer > .logo { display: none; }
.ripple { position: relative; overflow: hidden; }
.ripple::after { content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; pointer-events: none; background-image: radial-gradient(circle, rgb(0, 0, 0) 10%, transparent 10.01%); background-repeat: no-repeat; background-position: 50% center; transform: scale(10, 10); opacity: 0; transition: transform 0.5s, opacity 1s; }
.ripple:active::after { transform: scale(0, 0); opacity: 0.2; transition: all; }
.menu_btn_wrap .ripple { display: inline-block; vertical-align: middle; }
@media only screen and (max-width: 1100px) {
    .menu_links_wrap { padding: 20px; }
    .menu_links_wrap > ul { padding: 0px 25px 0px 0px; }
}
@media only screen and (max-width: 900px) {
    h4.main_head { font-size: 47px; }
}
@media only screen and (max-width: 768px) {
    .menu_links_wrap { width: 100%; overflow-y: auto; }
    .page_links { height: auto; }
}
@media only screen and (max-height: 650px) {
    .menu_links_wrap > ul { padding: 0px 30px 10px 0px; }
    .menu_links_wrap ul > li > a { padding: 6px 10px; }
    .page_links { padding: 5% 0px; }
}
@media only screen and (max-width: 578px) {
    .menu_links_wrap { width: 100%; overflow-y: auto; }
    .page_links { height: auto; }
}
@media only screen and (max-width: 540px) {
    :where(.menu_outer) .logo { display: block; }
}
@media only screen and (max-width: 482px) {
    h4.main_head { line-height: 30px; margin-top: 0px; }
    .page_link_adjust { padding: 0px 5% 12%; }
}
@media only screen and (max-width: 425px) {
    :where(.menu_outer) .logo { position: absolute; display: block; left: 14px; }
    .menu_btn_wrap { top: 15px; right: 15px; }
}
@media only screen and (max-width: 380px) {
    h4.main_head { line-height: 30px; margin-top: 0px; }
}
@media only screen and (max-width: 2100px) and (min-width: 2000px) {
    h4.main_head { font-size: max(clamp(0px, 1.1e+06px - 100000vw, 13px), 3.2vw) !important; line-height: 3.846vw !important; }
    .menu_links_wrap > ul { padding: 0px 1.923vw 0px 0px; }
    .menu_links_wrap ul > li > a { padding: 0.6846vw 0.641vw !important; font-size: max(clamp(0px, 1.1e+06px - 100000vw, 13px), 0.9vw) !important; }
    .menu_open .menu_links_wrap ul li ul li { padding-left: 1.923vw; }
    .menu_links_wrap ul li ul li a { font-size: max(clamp(0px, 1.1e+06px - 100000vw, 13px), 0.641vw); padding: 0.32vw 0px; }
}
:where(.menu_outer) ::placeholder { font-size: 14px; line-height: 28px; color: rgba(255, 255, 255, 0.3); font-family: montserrat_light; }
@media screen and (max-width: 1700px) and (min-width: 1100px) {
    :where(.menu_outer) ::placeholder { font-size: 14px; line-height: 22px; }
}
@media screen and (max-width: 1100px) and (min-width: 700px) {
    :where(.menu_outer) ::placeholder { font-size: 10px; line-height: 22px; }
}
@media screen and (max-width: 700px) and (min-width: 300px) {
    :where(.menu_outer) ::placeholder { font-size: 10px; line-height: 22px; }
}
@media only screen and (max-width: 4000px) and (min-width: 1452px) {
    .menu_outer .logo img { width: 6.73vw; height: 1.5384vw; }
    :where(.menu_outer) .logo { width: 6.73vw; padding: 0.7vw 0.833vw 0.64vw; left: 1.92vw; box-shadow: rgba(239, 13, 51, 0.1) 0px 0.128vw 1.2179vw 0.57vw; }
    h4.main_head { font-size: max(clamp(0px, 1.1e+06px - 100000vw, 13px), 3.2vw); line-height: 3.846vw; }
    .menu_links_wrap { padding: 1.28vw 1.92vw; box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0.96vw 0.064vw; }
    h4.main_head { font-size: max(clamp(0px, 1.1e+06px - 100000vw, 13px), 3.2vw); line-height: 3.84vw; margin-top: 2.56vw; }
    .menu_links_wrap > ul { padding: 0px 1.92vw 0px 0px; }
    .menu_links_wrap ul > li > a { padding: 0.38vw 0.64vw; font-size: max(clamp(0px, 1.1e+06px - 100000vw, 13px), 0.7vw); }
    .page_links { padding: 1.28vw 0px; }
    .page_links::before { height: 1.47vw; top: -1.41vw; }
    .page_links_div { margin: 0.32vw 0px; }
    .page_link_inner { width: 2.56vw; height: 2.56vw; margin: 0px 0.64vw 0px 0px; }
    .page_link_p { padding-top: 0.32vw; font-size: max(clamp(0px, 1.1e+06px - 100000vw, 13px), 0.7vw); }
    :where(.menu_outer) ::placeholder { font-size: max(clamp(0px, 1.1e+06px - 100000vw, 13px), 0.8vw); }
}
@media only screen and (max-width: 3000px) and (min-width: 2000px) {
    .menu_btn_wrap { transform: scale(1.5); top: 40px; right: 80px; line-height: 1.1; }
}
@media only screen and (max-width: 4000px) and (min-width: 3000px) {
    .menu_btn_wrap { transform: scale(3); top: 80px; right: 255px; line-height: 1.1; }
}
.menu_links_wrap a:focus-visible, .page_links_div a:focus-visible { outline: rgb(232, 17, 45) solid 2px; outline-offset: 3px; }
.menu_links_wrap { --drawer-pad-x: 30px; --drawer-pad-y: 20px; display: flex; flex-direction: column; overflow: hidden auto; }
@media only screen and (max-width: 1100px) {
    .menu_links_wrap { --drawer-pad-x: 20px; }
}
@media only screen and (min-width: 1452px) and (max-width: 4000px) {
    .menu_links_wrap { --drawer-pad-x: 1.92vw; --drawer-pad-y: 1.28vw; }
}
.menu_links_wrap { scrollbar-width: none; }
.menu_links_wrap::-webkit-scrollbar { display: none; }
.menu_links_wrap > ul { flex: 0 0 auto; }
.page_links { position: relative; left: auto; flex: 1 0 auto; width: auto; height: auto; min-height: 0px; margin: 12px calc(-1 * var(--drawer-pad-x)) calc(-1 * var(--drawer-pad-y)); }
.menu_links_wrap ul li ul.menu_sub { display: block; max-height: 0px; opacity: 0; overflow: hidden; transition: max-height 0.45s, opacity 0.3s; }
.menu_links_wrap ul li:hover > ul.menu_sub, .menu_links_wrap ul li:focus-within > ul.menu_sub { max-height: 260px; opacity: 1; }
.menu_open .menu_links_wrap ul li ul.menu_sub li { padding-left: 22px; }
.menu_links_wrap ul li ul.menu_sub li::after { left: 0px; top: 13px; }
.menu_links_wrap ul li ul.menu_sub li a { font-size: 10px; letter-spacing: 0.2px; transition: color 0.25s, transform 0.25s; }
.menu_links_wrap ul li ul.menu_sub li:hover a, .menu_links_wrap ul li ul.menu_sub li a:focus-visible { color: rgb(18, 19, 21); transform: translateX(3px); }
.menu_links_wrap ul > li.has_children > a { position: relative; padding-right: 24px; }
.menu_links_wrap ul > li.has_children > a::after { content: ""; position: absolute; right: 10px; top: 50%; width: 5px; height: 5px; margin-top: -4px; border-right: 1px solid; border-bottom: 1px solid; transform: rotate(45deg); opacity: 0.5; transition: transform 0.35s, opacity 0.35s; }
.menu_links_wrap ul > li.has_children:hover > a::after, .menu_links_wrap ul > li.has_children:focus-within > a::after { transform: rotate(-135deg); margin-top: -1px; opacity: 1; }
.page_links_head { margin: 0px 0px 10px; padding: 0px 8%; font-family: montserrat_light, sans-serif; font-size: 9px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: rgb(139, 139, 139); }
.page_links_div a { padding: 3px 0px; border-radius: 4px; transition: background-color 0.25s; }
.page_links_div a:hover, .page_links_div a:focus-visible { background-color: rgb(248, 248, 248); }
.page_links div .page_link_inner { background-image: none; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 34px; height: 34px; color: rgb(239, 13, 51); transition: background-color 0.25s; }
.page_links_div a:hover .page_link_inner { background-color: rgb(255, 255, 255); }
.page_link_inner svg { width: 17px; height: 17px; }
.page_link_p { padding-top: 0px; line-height: 1.3; }
@keyframes fadeIn { 
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes menuSlideLeft { 
  0% { transform: translateY(100px); opacity: 0; }
  100% { transform: translateY(0px); opacity: 1; }
}