#3837 - Settings for CSS @media classes

inc/classes/BxDolTemplate.php

@@ -1751,6 +1751,15 @@ class BxDolTemplate extends BxDolFactory implements iBxDolSingleton
                     if(isset($aMix['dark']) && (int)$aMix['dark'] == 1)
                         $sRet .= ' dark';
                 }
+                break;
+			case 'css_media_phone':
+			case 'css_media_phone2':
+			case 'css_media_tablet':
+			case 'css_media_tablet2':
+			case 'css_media_desktop':
+                $aData = json_decode(getParam('sys_css_media_classes'), true);
+				$sKey = str_replace('css_media_', '', $sKey);
+                $sRet = $aData[$sKey];
                 break;
             default:
                 $sRet = ($sTemplAdd = BxTemplFunctions::getInstance()->TemplPageAddComponent($sKey)) !== false ? $sTemplAdd : $aKeyWrappers['left'] . $sKey . $aKeyWrappers['right'];

install/sql/system.sql

@@ -349,7 +349,9 @@ INSERT INTO `sys_options`(`category_id`, `name`, `caption`, `value`, `type`, `ex
 
 (@iCategoryId, 'sys_notify_to_approve_by_role', '_adm_stg_cpt_option_sys_notify_to_approve_by_role', '', 'checkbox', '', '', '', '', 160),
 
-(@iCategoryId, 'sys_fixed_header', '_adm_stg_cpt_option_sys_fixed_header', '', 'checkbox', '', '', '', '', 170);
+(@iCategoryId, 'sys_fixed_header', '_adm_stg_cpt_option_sys_fixed_header', '', 'checkbox', '', '', '', '', 170),
+
+(@iCategoryId, 'sys_css_media_classes', '_adm_stg_cpt_option_sys_css_media_classes', '{"phone":"(max-width:720px)","phone2":"(min-width:533px) and (max-width:720px)","tablet":"(min-width:720px) and (max-width:1280px)","tablet2":"(min-width:1024px) and (max-width:1280px)","desktop":"(min-width:1280px)"}', 'digit', '', '', '', '', 180);
 
 --
 -- CATEGORY (HIDDEN): System

modules/boonex/decorous/data/template/system/css/general.css

@@ -35,11 +35,10 @@
     min-height: 100vh;
     right: 100%;
 }
-@media only screen and (min-width: 1025px) {
-    #bx-sliding-menu-search{
-        padding-left: 200px;
-        width:calc(100% - 200px);
-    }
+
+:where(.bx-media-tablet2, .bx-media-desktop) #bx-sliding-menu-search{
+	padding-left: 200px;
+	width:calc(100% - 200px);
 }
 
 /*--- Header ---*/
@@ -59,12 +58,11 @@
   content: "";
   display: table;
 }
-@media only screen and (min-width: 720px) {
-  .cd-main-header {
+
+:where(.bx-media-tablet, .bx-media-desktop) .cd-main-header {
     position: fixed;
     height: 55px;
   }
-}
 
 .cd-logo {
   float: left;
@@ -74,21 +72,16 @@
 .cd-logo img {
   display: block;
 }
-@media only screen and (min-width: 720px) {
-  .cd-logo {
+:where(.bx-media-tablet, .bx-media-desktop)  .cd-logo {
     margin: 16px 0 0 36px;
   }
-}
 
 /*--- Top Navigation ---*/
-@media only screen and (min-width: 720px) {
-  .cd-nav {
+:where(.bx-media-tablet, .bx-media-desktop) .cd-nav {
     display: block;
     float: right;
     height: 100%;
   }
-}
-
 /*--- Sidebar ---*/
 .cd-side-nav {
   position: fixed;
@@ -142,24 +135,22 @@
   font-size: 1.4rem;
 }
 
-@media (max-width: 720px){
-	.cd-side-nav {
+.bx-media-phone .cd-side-nav {
 		top:57px;
 		box-shadow: none;
 	}
-	.bx-sliding-menu, .bx-sliding-menu-main{
+.bx-media-phone .bx-sliding-menu, .bx-sliding-menu-main{
 		width: 100% !important;
 		left:0px !important;
 		top:56px !important;
 	}
-	#bx-menu-toolbar-item-main-menu{
+.bx-media-phone	#bx-menu-toolbar-item-main-menu{
 		margin-top: 3px;
 	}
-}
+
 
 	
-@media only screen and (min-width: 720px) {
-  .cd-side-nav {
+:where(.bx-media-tablet, .bx-media-desktop) .cd-side-nav {
     position: relative;
     float: left;
     top: auto;
@@ -171,32 +162,32 @@
     overflow: visible;
     max-height: none;
   }
-  .cd-side-nav.nav-is-visible {
+ :where(.bx-media-tablet, .bx-media-desktop) .cd-side-nav.nav-is-visible {
     box-shadow: none;
   }
-  .cd-side-nav.is-fixed,
-  .content-wrapper.is-fixed {
+:where(.bx-media-tablet, .bx-media-desktop)  .cd-side-nav.is-fixed,
+:where(.bx-media-tablet, .bx-media-desktop)  .content-wrapper.is-fixed {
     position: fixed;
   }
-  .content-wrapper.is-fixed {
+ :where(.bx-media-tablet, .bx-media-desktop) .content-wrapper.is-fixed {
       left: 0;
       width: 100%;
   }
-  .cd-side-nav > ul {
+ :where(.bx-media-tablet, .bx-media-desktop) .cd-side-nav > ul {
     /* reset style */
     padding: 0;
   }
-  .cd-side-nav .cd-label {
+ :where(.bx-media-tablet, .bx-media-desktop) .cd-side-nav .cd-label {
     /* remove labels on minified version of the sidebar */
     display: none;
   }
-  .cd-side-nav ul a {
+ :where(.bx-media-tablet, .bx-media-desktop) .cd-side-nav ul a {
     font-size: 1.2rem;
   }
-  .cd-side-nav > ul > li > a {
+ :where(.bx-media-tablet, .bx-media-desktop) .cd-side-nav > ul > li > a {
     padding: calc(2.2em + 24px) 0 2.4em;
   }
-  .cd-side-nav > ul > li > a::before {
+ :where(.bx-media-tablet, .bx-media-desktop) .cd-side-nav > ul > li > a::before {
     left: 50%;
     right: auto;
     -webkit-transform: translateX(-50%);
@@ -206,32 +197,30 @@
     transform: translateX(-50%);
     top: 2.4em;
   }
-  .cd-side-nav .active > a {
+ :where(.bx-media-tablet, .bx-media-desktop) .cd-side-nav .active > a {
     /* current page */
     box-shadow: inset 3px 0 0 #1784c7;
     background-color: #33383e;
   }
-  .cd-side-nav .action-btn a {
+ :where(.bx-media-tablet, .bx-media-desktop) .cd-side-nav .action-btn a {
     margin: 1em 10% 0;
   }
-}
 
-@media only screen and (min-width: 1025px) {
-  .cd-side-nav {
+:where(.bx-media-tablet2, .bx-media-desktop)  .cd-side-nav {
     width: 200px;
   }
-  .cd-side-nav > ul {
+ :where(.bx-media-tablet2, .bx-media-desktop) .cd-side-nav > ul {
     padding: 0.6em 0;
   }
-  .cd-side-nav > ul > li:not(.action-btn):hover > a {
+ :where(.bx-media-tablet2, .bx-media-desktop) .cd-side-nav > ul > li:not(.action-btn):hover > a {
     background-color: #33383e;
   }
-  .cd-side-nav > ul > li > a {
+ :where(.bx-media-tablet2, .bx-media-desktop) .cd-side-nav > ul > li > a {
     padding: 1em 1em 1em 42px;
     text-align: left;
     border-bottom: none;
   }
-  .cd-side-nav > ul > li > a::before {
+ :where(.bx-media-tablet2, .bx-media-desktop) .cd-side-nav > ul > li > a::before {
     top: 50%;
     bottom: auto;
     -webkit-transform: translateY(-50%);
@@ -241,11 +230,10 @@
     transform: translateY(-50%);
     left: 18px;
   }
-  .cd-side-nav .cd-label {
+:where(.bx-media-tablet2, .bx-media-desktop)  .cd-side-nav .cd-label {
     display: block;
     padding: 1em 18px;
   }
-}
 
 .has-children ul {
   position: relative;
@@ -280,11 +268,10 @@
   transform: translateY(-50%) rotate(180deg);
 }
 
-@media only screen and (min-width: 720px) {
-  .has-children {
+:where(.bx-media-tablet, .bx-media-desktop) .has-children {
     position: relative;
   }
-  .has-children ul {
+:where(.bx-media-tablet, .bx-media-desktop) .has-children ul {
     position: absolute;
     top: 0;
     left: 100%;
@@ -292,35 +279,35 @@
     padding: 0;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
   }
-  .has-children ul a {
+:where(.bx-media-tablet, .bx-media-desktop) .has-children ul a {
     text-align: left;
     border: none;
     padding: 1em;
   }
-  .no-touch .has-children ul a:hover {
+:where(.bx-media-tablet, .bx-media-desktop) .no-touch .has-children ul a:hover {
     color: #1784c7;
   }
-  .has-children > a::after {
+:where(.bx-media-tablet, .bx-media-desktop) .has-children > a::after {
     display: none;
   }
-  .cd-side-nav .has-children.selected > a {
+ :where(.bx-media-tablet, .bx-media-desktop) .cd-side-nav .has-children.selected > a {
     /* focus state -> show sub pages */
     background-color: #33383e;
   }
-  .cd-top-nav .has-children {
+:where(.bx-media-tablet, .bx-media-desktop) .cd-top-nav .has-children {
     position: relative;
     background-color: #2c3136;
   }
-  .cd-top-nav .has-children > a {
+:where(.bx-media-tablet, .bx-media-desktop) .cd-top-nav .has-children > a {
     height: 100%;
     padding: 0 calc(1.8em + 22px) 0 calc(1.8em + 26px) !important;
     line-height: 55px;
   }
-  .cd-top-nav .has-children > a::after {
+:where(.bx-media-tablet, .bx-media-desktop) .cd-top-nav .has-children > a::after {
     display: block;
     right: 1.8em;
   }
-  .cd-top-nav .has-children ul {
+:where(.bx-media-tablet, .bx-media-desktop) .cd-top-nav .has-children ul {
     background-color: #1c1f22;
     width: 200px;
     top: 100%;
@@ -328,20 +315,18 @@
     left: auto;
     box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
   }
-  .cd-top-nav .has-children ul a {
+:where(.bx-media-tablet, .bx-media-desktop) .cd-top-nav .has-children ul a {
     padding-left: 18px !important;
   }
-}
 
-@media only screen and (min-width: 1025px) {
-  .has-children > ul {
+ :where(.bx-media-tablet2, .bx-media-desktop) .has-children > ul {
     width: 100%;
     z-index: 1;
   }
-  .has-children ul a {
+ :where(.bx-media-tablet2, .bx-media-desktop) .has-children ul a {
     padding-left: 18px;
   }
-  .has-children.active > ul {
+:where(.bx-media-tablet2, .bx-media-desktop) .has-children.active > ul {
     /* if the item is active, make the subnavigation visible */
     position: relative;
     display: block;
@@ -349,13 +334,13 @@
     left: 0;
     box-shadow: none;
   }
-  .no-touch .cd-side-nav .has-children:hover > ul, .cd-side-nav .has-children.hover > ul {
+:where(.bx-media-tablet2, .bx-media-desktop) .no-touch .cd-side-nav .has-children:hover > ul, 
+:where(.bx-media-tablet2, .bx-media-desktop) .cd-side-nav .has-children.hover > ul {
     /* show subnavigation on hover */
     display: block;
     opacity: 1;
     visibility: visible;
   }
-}
 
 /* profile cover customisation */
 .bx-base-pofile-cover{

modules/boonex/decorous/data/template/system/css/menu.less

@@ -49,49 +49,44 @@
         background-size: 60% 60%;
     }
 
-    @media (min-width: 720px) and (max-width:1024px) {
-        #bx-sliding-menu-sys_site.bx-sliding-smenu-main .bx-menu-object-sys_site li .bx-menu-floating-blocks-icon, 
-        #bx-sliding-menu-sys_site.bx-sliding-smenu-main .bx-menu-object-sys_site li .bx-menu-floating-blocks-title {
-            display: block;
-            text-align: center;
-        }
+.bx-media-tablet  #bx-sliding-menu-sys_site.bx-sliding-smenu-main .bx-menu-object-sys_site li .bx-menu-floating-blocks-icon, 
+.bx-media-tablet  #bx-sliding-menu-sys_site.bx-sliding-smenu-main .bx-menu-object-sys_site li .bx-menu-floating-blocks-title {
+	display: block;
+	text-align: center;
+}
 
-        #bx-sliding-menu-sys_site.bx-sliding-smenu-main .bx-menu-object-sys_site li .bx-menu-floating-blocks-title {
-            padding-left: 0px;
-        }
+.bx-media-tablet #bx-sliding-menu-sys_site.bx-sliding-smenu-main .bx-menu-object-sys_site li .bx-menu-floating-blocks-title {
+	padding-left: 0px;
+}
 
-        #bx-sliding-menu-sys_site.bx-sliding-smenu-main .bx-menu-object-sys_site li .sys-icon {
-            width: 100%;
-            font-size: 1.5rem;
-        }
+.bx-media-tablet #bx-sliding-menu-sys_site.bx-sliding-smenu-main .bx-menu-object-sys_site li .sys-icon {
+	width: 100%;
+	font-size: 1.5rem;
+}
 
-        #bx-sliding-menu-sys_site.bx-sliding-smenu-main .bx-menu-object-sys_site li img {
-            margin: 0px auto;
-            background-size: 70% 70%;
-        }
-    }
+.bx-media-tablet #bx-sliding-menu-sys_site.bx-sliding-smenu-main .bx-menu-object-sys_site li img {
+	margin: 0px auto;
+	background-size: 70% 70%;
+}
 
-    @media (max-width:720px) {
-        .cd-main-content .cd-side-nav {
-            position:fixed;
-            width:100%;
-            height: calc(100%);
+.bx-media-phone .cd-main-content .cd-side-nav {
+	position:fixed;
+	width:100%;
+	height: calc(100%);
 
-            overflow-x:hidden;
-            overflow-y:auto;
+	overflow-x:hidden;
+	overflow-y:auto;
 
-            -webkit-overflow-scrolling:touch;
-        }
-    }
+	-webkit-overflow-scrolling:touch;
+}
 
 
     /*--- Account Popup ---*/
-    @media (min-width:720px) {
-        #bx-sliding-menu-account.bx-sliding-menu-main {
-            width: auto !important;
-            border-radius: 4px;
-        }
-    }
+:where(.bx-media-tablet, .bx-media-desktop) #bx-sliding-menu-account.bx-sliding-menu-main {
+	width: auto !important;
+	border-radius: 4px;
+}
+	
     #bx-sliding-menu-account.bx-sliding-menu-main.bx-sliding-menu-fullheight {
         height: calc(100% - 4rem);
     }
@@ -164,12 +159,11 @@
     }
 
     /*--- Add Content Menu ---*/
-    @media (min-width:720px) {
-        #bx-sliding-menu-sys_add_content.bx-sliding-menu-main {
-            width: auto !important;
-            border-radius: 4px;
-        }
-    }
+:where(.bx-media-tablet, .bx-media-desktop) #bx-sliding-menu-sys_add_content.bx-sliding-menu-main {
+	width: auto !important;
+	border-radius: 4px;
+}
+
     #bx-sliding-menu-sys_add_content.bx-sliding-menu-main .bx-menu-object-sys_add_content {
         display: block;
         width: 100%;

modules/boonex/english/data/langs/system/en.xml

@@ -1655,6 +1655,7 @@
     <string name="_adm_stg_cpt_option_sys_samesite_cookies"><![CDATA[SameSite value for sensitive cookies]]></string>
     <string name="_adm_stg_cpt_option_sys_notify_to_approve_by_role"><![CDATA[Notify context member with necessary role to approve content in the context]]></string>
 	<string name="_adm_stg_cpt_option_sys_fixed_header"><![CDATA[Fixed header]]></string>
+	<string name="_adm_stg_cpt_option_sys_css_media_classes"><![CDATA[CSS @media intervals]]></string>
     <string name="_adm_stg_cpt_option_template"><![CDATA[Default Template]]></string>
     <string name="_adm_stg_err_option_template"><![CDATA[Template cannot be empty and must have a valid name.]]></string>
     <string name="_adm_stg_cpt_option_use_like_operator"><![CDATA[Use operator LIKE for search (recommended for small content)]]></string>

modules/boonex/lucid/data/template/system/css/general.css

@@ -69,12 +69,10 @@
   content: "";
   display: table;
 }
-@media only screen and (min-width: 720px) {
-  .cd-main-header {
+:where(.bx-media-tablet, .bx-media-desktop) .cd-main-header {
     position: fixed;
     height: 55px;
   }
-}
 
 .cd-logo {
   float: left;
@@ -176,18 +174,14 @@
   -o-transform: translateX(4px) translateY(2px) rotate(-45deg);
   transform: translateX(4px) translateY(2px) rotate(-45deg);
 }
-@media only screen and (min-width: 720px) {
-  .cd-nav-trigger {
+:where(.bx-media-tablet, .bx-media-desktop) .cd-nav-trigger {
     display: none;
   }
-}
 
 
 /*--- Top Navigation ---*/
-@media only screen and (min-width: 720px) {
-  .cd-nav {
+:where(.bx-media-tablet, .bx-media-desktop) .cd-nav {
     display: block;
-  }
 }
 
 

modules/boonex/lucid/data/template/system/css/menu-dropdown.css

@@ -83,21 +83,19 @@ li.bx-lcd-mdd-login .bx-lcd-login-form {
   height: 50px;
   line-height: 50px;
 }
-@media only screen and (min-width: 768px) {
-  .cd-dropdown h2,
-  .cd-dropdown .cd-dropdown-content a,
-  .cd-dropdown .cd-dropdown-content ul a {
-    height: 60px;
-    line-height: 60px;
-  }
-}
-@media only screen and (min-width: 1024px) {
-  .cd-dropdown h2,
-  .cd-dropdown .cd-dropdown-content a,
-  .cd-dropdown .cd-dropdown-content ul a {
-    height: 50px;
-    line-height: 50px;
-  }
+
+.bx-media-tablet .cd-dropdown h2,
+.bx-media-tablet .cd-dropdown .cd-dropdown-content a,
+.bx-media-tablet .cd-dropdown .cd-dropdown-content ul a {
+	height: 60px;
+	line-height: 60px;
+}
+
+:where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown h2,
+:where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content a,
+:where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content ul a {
+	height: 50px;
+	line-height: 50px;
 }
 
 .cd-dropdown h2,
@@ -213,13 +211,11 @@ li.bx-lcd-mdd-login .bx-lcd-login-form {
     display: none;
 }
 
-@media only screen and (min-width: 768px) {
-  .cd-dropdown .cd-close {
+:where(.bx-media-tablet, .bx-media-desktop) .cd-dropdown .cd-close {
     top: 5px;
   }
-}
-@media only screen and (min-width: 1024px) {
-  .cd-dropdown {
+
+:where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown {
     position: absolute;
     top: calc(100% - 2px);
     /* reset style*/
@@ -243,16 +239,16 @@ li.bx-lcd-mdd-login .bx-lcd-login-form {
     -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s, -moz-transform 0.3s 0s;
     transition: opacity 0.3s 0s, visibility 0s 0.3s, transform 0.3s 0s;
   }
-  .open-to-left .cd-dropdown {
+:where(.bx-media-tablet2, .bx-media-desktop) .open-to-left .cd-dropdown {
     /* use the .open-to-left class if you want to open the dropdown on the left */
     right: 0;
     left: auto;
   }
-  .cd-dropdown h2, .cd-dropdown .cd-close {
+:where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown h2, .cd-dropdown .cd-close {
     /* on desktop - hide title and 'X' */
     display: none;
   }
-  .cd-dropdown.dropdown-is-active {
+:where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown.dropdown-is-active {
     opacity: 1;
     -webkit-transform: translateY(0);
     -moz-transform: translateY(0);
@@ -263,7 +259,6 @@ li.bx-lcd-mdd-login .bx-lcd-login-form {
     -moz-transition: opacity 0.3s 0s, visibility 0.3s 0s, -moz-transform 0.3s 0s;
     transition: opacity 0.3s 0s, visibility 0.3s 0s, transform 0.3s 0s;
   }
-}
 
 .cd-dropdown .cd-dropdown-content, 
 .cd-dropdown .cd-dropdown-content ul {
@@ -423,62 +418,58 @@ li.bx-lcd-mdd-login .bx-lcd-login-form {
 .dropdown-is-active .cd-dropdown-content ul {
   -webkit-overflow-scrolling: touch;
 }
-@media only screen and (min-width: 768px) {
-  .cd-dropdown .cd-dropdown-content, .cd-dropdown-content ul {
+.bx-media-tablet  .cd-dropdown .cd-dropdown-content, .cd-dropdown-content ul {
     padding-top: 60px;
   }
-  .cd-dropdown .cd-dropdown-content a, .cd-dropdown-content ul a {
+ .bx-media-tablet .cd-dropdown .cd-dropdown-content a, .cd-dropdown-content ul a {
     font-size: 1.8rem;
   }
-}
-@media only screen and (min-width: 1024px) {
-  .cd-dropdown .cd-dropdown-content, 
-  .cd-dropdown .cd-dropdown-content ul {
+.bx-media-tablet2 .cd-dropdown .cd-dropdown-content, 
+.bx-media-tablet2 .cd-dropdown .cd-dropdown-content ul {
     padding-top: 0;
     overflow: visible;
   }
-  .cd-dropdown .cd-dropdown-content a, 
-  .cd-dropdown .cd-dropdown-content ul a {
+.bx-media-tablet2 .cd-dropdown .cd-dropdown-content a, 
+.bx-media-tablet2 .cd-dropdown .cd-dropdown-content ul a {
     color: #111433;
     height: 50px;
     line-height: 50px;
     font-size: 1.5rem;
     border-color: #ebebeb;
   }
-  .cd-dropdown .cd-dropdown-content .cd-divider, 
-  .cd-dropdown .cd-dropdown-content ul .cd-divider {
+.bx-media-tablet2  .cd-dropdown .cd-dropdown-content .cd-divider, 
+.bx-media-tablet2 .cd-dropdown .cd-dropdown-content ul .cd-divider {
     background-color: transparent;
     color: #b3b3b3;
     border-top: 1px solid #ebebeb;
   }
-  .cd-dropdown .cd-dropdown-content .cd-divider + li > a, 
-  .cd-dropdown .cd-dropdown-content ul .cd-divider + li > a {
+ .bx-media-tablet2 .cd-dropdown .cd-dropdown-content .cd-divider + li > a, 
+ .bx-media-tablet2 .cd-dropdown .cd-dropdown-content ul .cd-divider + li > a {
     border-top-width: 1px;
   }
-  .cd-dropdown .cd-dropdown-content.is-hidden > li > a, 
-    .cd-dropdown .cd-dropdown-content.is-hidden > li > .bx-lcd-login,
-  .cd-dropdown .cd-dropdown-content.is-hidden > .bx-lcd-mdd-search,
-  .cd-dropdown .cd-dropdown-content.is-hidden > .bx-lcd-mdd-profile,
-  .cd-dropdown .cd-dropdown-content.is-hidden > .cd-divider, 
-  .cd-dropdown .cd-dropdown-content.move-out > li > a, 
-    .cd-dropdown .cd-dropdown-content.move-out > li > .bx-lcd-login,
-  .cd-dropdown .cd-dropdown-content.move-out > .bx-lcd-mdd-search,
-  .cd-dropdown .cd-dropdown-content.move-out > .bx-lcd-mdd-profile,
-  .cd-dropdown .cd-dropdown-content.move-out > .cd-divider, 
-  .cd-dropdown .cd-dropdown-content ul.is-hidden > li > a, 
-  .cd-dropdown .cd-dropdown-content ul.is-hidden > li > .bx-lcd-login,
-  .cd-dropdown .cd-dropdown-content ul.is-hidden > .bx-lcd-mdd-search,
-  .cd-dropdown .cd-dropdown-content ul.is-hidden > .bx-lcd-mdd-profile,
-  .cd-dropdown .cd-dropdown-content ul.is-hidden > .cd-divider, 
-  .cd-dropdown .cd-dropdown-content ul.move-out > li > a, 
-  .cd-dropdown .cd-dropdown-content ul.move-out > li > .bx-lcd-login,
-  .cd-dropdown .cd-dropdown-content ul.move-out > .bx-lcd-mdd-search,
-  .cd-dropdown .cd-dropdown-content ul.move-out > .bx-lcd-mdd-profile,
-  .cd-dropdown .cd-dropdown-content ul.move-out > .cd-divider {
+.bx-media-tablet2 .cd-dropdown .cd-dropdown-content.is-hidden > li > a, 
+.bx-media-tablet2 .cd-dropdown .cd-dropdown-content.is-hidden > li > .bx-lcd-login,
+.bx-media-tablet2 .cd-dropdown .cd-dropdown-content.is-hidden > .bx-lcd-mdd-search,
+.bx-media-tablet2 .cd-dropdown .cd-dropdown-content.is-hidden > .bx-lcd-mdd-profile,
+.bx-media-tablet2 .cd-dropdown .cd-dropdown-content.is-hidden > .cd-divider, 
+.bx-media-tablet2 .cd-dropdown .cd-dropdown-content.move-out > li > a, 
+.bx-media-tablet2 .cd-dropdown .cd-dropdown-content.move-out > li > .bx-lcd-login,
+.bx-media-tablet2 .cd-dropdown .cd-dropdown-content.move-out > .bx-lcd-mdd-search,
+.bx-media-tablet2 .cd-dropdown .cd-dropdown-content.move-out > .bx-lcd-mdd-profile,
+.bx-media-tablet2 .cd-dropdown .cd-dropdown-content.move-out > .cd-divider, 
+.bx-media-tablet2 .cd-dropdown .cd-dropdown-content ul.is-hidden > li > a, 
+.bx-media-tablet2 .cd-dropdown .cd-dropdown-content ul.is-hidden > li > .bx-lcd-login,
+.bx-media-tablet2 .cd-dropdown .cd-dropdown-content ul.is-hidden > .bx-lcd-mdd-search,
+.bx-media-tablet2 .cd-dropdown .cd-dropdown-content ul.is-hidden > .bx-lcd-mdd-profile,
+.bx-media-tablet2 .cd-dropdown .cd-dropdown-content ul.is-hidden > .cd-divider, 
+.bx-media-tablet2 .cd-dropdown .cd-dropdown-content ul.move-out > li > a, 
+.bx-media-tablet2 .cd-dropdown .cd-dropdown-content ul.move-out > li > .bx-lcd-login,
+.bx-media-tablet2 .cd-dropdown .cd-dropdown-content ul.move-out > .bx-lcd-mdd-search,
+.bx-media-tablet2 .cd-dropdown .cd-dropdown-content ul.move-out > .bx-lcd-mdd-profile,
+.bx-media-tablet2 .cd-dropdown .cd-dropdown-content ul.move-out > .cd-divider {
     /* reset mobile style */
     opacity: 1;
   }
-}
 
 .cd-dropdown .cd-dropdown-content .see-all a {
   /* different style for the See all links */
@@ -569,24 +560,23 @@ li.bx-lcd-mdd-login .bx-lcd-login-form {
 .cd-dropdown .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item.item-12::before {
   background-image: url("../img/nucleo-icon-12.svg");
 }
-@media only screen and (min-width: 1024px) {
-  .cd-dropdown .cd-dropdown-content {
+:where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content {
     /* reset mobile style */
     position: static;
     height: auto;
     width: 280px;
   }
-  .cd-dropdown .cd-dropdown-content > li:last-of-type a {
+ :where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content > li:last-of-type a {
     border-bottom: none;
   }
-  .no-touchevents .cd-dropdown .cd-dropdown-content > li:not(.has-children) a:hover {
+ :where(.bx-media-tablet2, .bx-media-desktop) .no-touchevents .cd-dropdown .cd-dropdown-content > li:not(.has-children) a:hover {
     color: #3f8654;
   }
-  .cd-dropdown .cd-dropdown-content.move-out > li > a, 
-  .cd-dropdown .cd-dropdown-content.move-out > li > .bx-lcd-login,
-  .cd-dropdown .cd-dropdown-content.move-out > .bx-lcd-mdd-search,
-  .cd-dropdown .cd-dropdown-content.move-out > .bx-lcd-mdd-profile,
-  .cd-dropdown .cd-dropdown-content.move-out > .cd-divider {
+:where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content.move-out > li > a, 
+:where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content.move-out > li > .bx-lcd-login,
+:where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content.move-out > .bx-lcd-mdd-search,
+:where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content.move-out > .bx-lcd-mdd-profile,
+:where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content.move-out > .cd-divider {
     /* reset mobile style */
     -webkit-transform: translateX(0);
     -moz-transform: translateX(0);
@@ -595,9 +585,9 @@ li.bx-lcd-mdd-login .bx-lcd-login-form {
     transform: translateX(0);
     opacity: 1;
   }
-  .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown, 
-  .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery, 
-  .cd-dropdown .cd-dropdown-content .cd-dropdown-icons {
+:where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown, 
+:where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery, 
+:where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-dropdown-icons {
     -webkit-transform: translateX(0);
     -moz-transform: translateX(0);
     -ms-transform: translateX(0);
@@ -608,23 +598,23 @@ li.bx-lcd-mdd-login .bx-lcd-login-form {
     background-color: #ffffff;
     box-shadow: 0 2px 14px rgba(0, 0, 0, 0.1);
   }
-  .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown::after, 
-  .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery::after, 
-  .cd-dropdown .cd-dropdown-content .cd-dropdown-icons::after {
+:where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown::after, 
+:where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery::after, 
+:where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-dropdown-icons::after {
     clear: both;
     content: "";
     display: table;
   }
-  .open-to-left .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown, 
-  .open-to-left .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery, 
-  .open-to-left .cd-dropdown .cd-dropdown-content .cd-dropdown-icons {
+:where(.bx-media-tablet2, .bx-media-desktop) .open-to-left .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown, 
+:where(.bx-media-tablet2, .bx-media-desktop) .open-to-left .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery, 
+:where(.bx-media-tablet2, .bx-media-desktop) .open-to-left .cd-dropdown .cd-dropdown-content .cd-dropdown-icons {
     /* use the .open-to-left class if you want to open the dropdown on the left */
     left: auto;
     right: 100%;
   }
-  .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown.is-hidden, 
-  .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery.is-hidden, 
-  .cd-dropdown .cd-dropdown-content .cd-dropdown-icons.is-hidden {
+:where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown.is-hidden, 
+:where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery.is-hidden, 
+:where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-dropdown-icons.is-hidden {
     /* reset mobile style */
     -webkit-transform: translateX(0);
     -moz-transform: translateX(0);
@@ -632,38 +622,38 @@ li.bx-lcd-mdd-login .bx-lcd-login-form {
     -o-transform: translateX(0);
     transform: translateX(0);
   }
-  .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown.fade-in, 
-  .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery.fade-in, 
-  .cd-dropdown .cd-dropdown-content .cd-dropdown-icons.fade-in {
+:where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown.fade-in, 
+:where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery.fade-in, 
+:where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-dropdown-icons.fade-in {
     /* animate secondary dropdown items when hovering over of of the .cd-dropdown-content list items */
     -webkit-animation: cd-fade-in 0.2s;
     -moz-animation: cd-fade-in 0.2s;
     animation: cd-fade-in 0.2s;
   }
-  .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown.fade-out, 
-  .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery.fade-out, 
-  .cd-dropdown .cd-dropdown-content .cd-dropdown-icons.fade-out {
+:where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown.fade-out, 
+:where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery.fade-out, 
+:where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-dropdown-content .cd-dropdown-icons.fade-out {
     /* animate secondary dropdown items when hovering over of of the .cd-dropdown-content list items */
     -webkit-animation: cd-fade-out 0.2s;
     -moz-animation: cd-fade-out 0.2s;
     animation: cd-fade-out 0.2s;
   }
-  .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown > .go-back, 
-  .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery > .go-back, 
-  .cd-dropdown .cd-dropdown-content .cd-dropdown-icons > .go-back {
+:where(.bx-media-tablet2, .bx-media-desktop)   .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown > .go-back, 
+:where(.bx-media-tablet2, .bx-media-desktop)   .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery > .go-back, 
+:where(.bx-media-tablet2, .bx-media-desktop)   .cd-dropdown .cd-dropdown-content .cd-dropdown-icons > .go-back {
     display: none;
   }
-  .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown > .see-all, 
-  .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery > .see-all, 
-  .cd-dropdown .cd-dropdown-content .cd-dropdown-icons > .see-all {
+:where(.bx-media-tablet2, .bx-media-desktop)   .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown > .see-all, 
+:where(.bx-media-tablet2, .bx-media-desktop)   .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery > .see-all, 
+:where(.bx-media-tablet2, .bx-media-desktop)   .cd-dropdown .cd-dropdown-content .cd-dropdown-icons > .see-all {
     position: absolute;
     bottom: 20px;
     height: 45px;
     text-align: center;
   }
-  .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown > .see-all a, 
-  .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery > .see-all a, 
-  .cd-dropdown .cd-dropdown-content .cd-dropdown-icons > .see-all a {
+:where(.bx-media-tablet2, .bx-media-desktop)   .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown > .see-all a, 
+:where(.bx-media-tablet2, .bx-media-desktop)   .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery > .see-all a, 
+:where(.bx-media-tablet2, .bx-media-desktop)   .cd-dropdown .cd-dropdown-content .cd-dropdown-icons > .see-all a {
     margin: 0;
     height: 100%;
     line-height: 45px;
@@ -673,39 +663,39 @@ li.bx-lcd-mdd-login .bx-lcd-login-form {
     -moz-transition: color 0.2s, background-color 0.2s;
     transition: color 0.2s, background-color 0.2s;
   }
-  .no-touchevents .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown > .see-all a:hover, 
-  .no-touchevents .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery > .see-all a:hover, 
-  .no-touchevents .cd-dropdown .cd-dropdown-content .cd-dropdown-icons > .see-all a:hover {
+:where(.bx-media-tablet2, .bx-media-desktop)  .no-touchevents .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown > .see-all a:hover, 
+:where(.bx-media-tablet2, .bx-media-desktop)   .no-touchevents .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery > .see-all a:hover, 
+:where(.bx-media-tablet2, .bx-media-desktop)   .no-touchevents .cd-dropdown .cd-dropdown-content .cd-dropdown-icons > .see-all a:hover {
     color: #ffffff;
     background-color: #111433;
   }
-  .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown .cd-dropdown-item, 
-  .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown a, 
-  .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery .cd-dropdown-item, 
-  .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery a, 
-  .cd-dropdown .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item, 
-  .cd-dropdown .cd-dropdown-content .cd-dropdown-icons a {
+:where(.bx-media-tablet2, .bx-media-desktop)   .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown .cd-dropdown-item, 
+:where(.bx-media-tablet2, .bx-media-desktop)   .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown a, 
+:where(.bx-media-tablet2, .bx-media-desktop)   .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery .cd-dropdown-item, 
+:where(.bx-media-tablet2, .bx-media-desktop)   .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery a, 
+:where(.bx-media-tablet2, .bx-media-desktop)   .cd-dropdown .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item, 
+:where(.bx-media-tablet2, .bx-media-desktop)   .cd-dropdown .cd-dropdown-content .cd-dropdown-icons a {
     border: none;
   }
-  .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery, 
-  .cd-dropdown .cd-dropdown-content .cd-dropdown-icons {
+:where(.bx-media-tablet2, .bx-media-desktop)   .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery, 
+:where(.bx-media-tablet2, .bx-media-desktop)   .cd-dropdown .cd-dropdown-content .cd-dropdown-icons {
     padding: 20px 30px 100px;
   }
-  .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery > .see-all, 
-  .cd-dropdown .cd-dropdown-content .cd-dropdown-icons > .see-all {
+ :where(.bx-media-tablet2, .bx-media-desktop)  .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery > .see-all, 
+:where(.bx-media-tablet2, .bx-media-desktop)   .cd-dropdown .cd-dropdown-content .cd-dropdown-icons > .see-all {
     width: calc(100% - 60px);
   }
-  .cd-dropdown .cd-dropdown-content .cd-dropdown-icons > li, 
-  .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown > li {
+:where(.bx-media-tablet2, .bx-media-desktop)   .cd-dropdown .cd-dropdown-content .cd-dropdown-icons > li, 
+:where(.bx-media-tablet2, .bx-media-desktop)   .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown > li {
     width: 50%;
     float: left;
   }
-  .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown {
+ :where(.bx-media-tablet2, .bx-media-desktop)  .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown {
     overflow: hidden;
     width: 550px;
     padding-bottom: 65px;
   }
-  .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown::before {
+:where(.bx-media-tablet2, .bx-media-desktop)   .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown::before {
     /* this is the separation line in the middle of the .cd-secondary-dropdown element */
     position: absolute;
     content: '';
@@ -715,7 +705,7 @@ li.bx-lcd-mdd-login .bx-lcd-login-form {
     width: 520px;
     background-color: #ebebeb;
   }
-  .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown > li > a {
+:where(.bx-media-tablet2, .bx-media-desktop)   .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown > li > a {
     color: #3f8654;
     font-size: 1.6rem;
     margin-bottom: 10px;
@@ -723,12 +713,12 @@ li.bx-lcd-mdd-login .bx-lcd-login-form {
     height: 30px;
     pointer-events: none;
   }
-  .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown > li > a::after, 
-  .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown > li > a::before {
+:where(.bx-media-tablet2, .bx-media-desktop)   .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown > li > a::after, 
+:where(.bx-media-tablet2, .bx-media-desktop)   .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown > li > a::before {
     /* hide the arrow */
     display: none;
   }
-  .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown.move-out > li > a {
+:where(.bx-media-tablet2, .bx-media-desktop)   .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown.move-out > li > a {
     /* reset mobile style */
     -webkit-transform: translateX(0);
     -moz-transform: translateX(0);
@@ -736,7 +726,7 @@ li.bx-lcd-mdd-login .bx-lcd-login-form {
     -o-transform: translateX(0);
     transform: translateX(0);
   }
-  .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown > li {
+:where(.bx-media-tablet2, .bx-media-desktop)   .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown > li {
     margin: 20px 0;
     border-right-width: 1px;
     border-color: #ebebeb;
@@ -744,10 +734,10 @@ li.bx-lcd-mdd-login .bx-lcd-login-form {
     padding: 0 30px;
     height: 250px;
   }
-  .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown > li:nth-of-type(2n) {
+:where(.bx-media-tablet2, .bx-media-desktop)   .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown > li:nth-of-type(2n) {
     border-right-width: 0;
   }
-  .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown > li > ul {
+:where(.bx-media-tablet2, .bx-media-desktop)   .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown > li > ul {
     /* reset mobile style */
     -webkit-transform: translate(0);
     -moz-transform: translate(0);
@@ -757,115 +747,114 @@ li.bx-lcd-mdd-login .bx-lcd-login-form {
     position: relative;
     height: auto;
   }
-  .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown > li > ul > .go-back {
+:where(.bx-media-tablet2, .bx-media-desktop)   .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown > li > ul > .go-back {
     display: none;
   }
-  .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown a {
+:where(.bx-media-tablet2, .bx-media-desktop)   .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown a {
     line-height: 25px;
     height: 25px;
     font-size: 1.3rem;
     padding-left: 0;
   }
-  .no-touchevents .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown a:hover {
+:where(.bx-media-tablet2, .bx-media-desktop)   .no-touchevents .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown a:hover {
     color: #3f8654;
   }
-  .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown ul {
+:where(.bx-media-tablet2, .bx-media-desktop)   .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown ul {
     padding-bottom: 25px;
     overflow: hidden;
     height: auto;
   }
-  .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown .go-back a {
+:where(.bx-media-tablet2, .bx-media-desktop)   .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown .go-back a {
     padding-left: 20px;
     color: transparent;
   }
-  .no-touchevents .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown .go-back a:hover {
+:where(.bx-media-tablet2, .bx-media-desktop)   .no-touchevents .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown .go-back a:hover {
     color: transparent;
   }
-  .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown .go-back a::before, 
-  .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown .go-back a::after {
+:where(.bx-media-tablet2, .bx-media-desktop)  .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown .go-back a::before, 
+:where(.bx-media-tablet2, .bx-media-desktop)  .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown .go-back a::after {
     left: 0;
   }
-  .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown .see-all {
+:where(.bx-media-tablet2, .bx-media-desktop)   .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown .see-all {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
   }
-  .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery {
+:where(.bx-media-tablet2, .bx-media-desktop)  .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery {
     width: 600px;
     padding-bottom: 100px;
   }
-  .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery > li {
+:where(.bx-media-tablet2, .bx-media-desktop)   .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery > li {
     width: 48%;
     float: left;
     margin-right: 4%;
   }
-  .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery > li:nth-of-type(2n) {
+:where(.bx-media-tablet2, .bx-media-desktop)   .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery > li:nth-of-type(2n) {
     margin-right: 0;
   }
-  .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery .cd-dropdown-item {
+:where(.bx-media-tablet2, .bx-media-desktop)   .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery .cd-dropdown-item {
     padding: 0;
     height: auto;
     line-height: normal;
     color: #3f8654;
     margin-bottom: 2em;
   }
-  .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery > li:nth-last-of-type(2) a,
-  .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery > li:last-of-type a {
+:where(.bx-media-tablet2, .bx-media-desktop)   .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery > li:nth-last-of-type(2) a,
+:where(.bx-media-tablet2, .bx-media-desktop)   .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery > li:last-of-type a {
     margin-bottom: 0;
   }
-  .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery img {
+:where(.bx-media-tablet2, .bx-media-desktop)   .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery img {
     position: static;
     height: auto;
     width: 100%;
     margin: 0 0 0.6em;
   }
-  .cd-dropdown .cd-dropdown-content .cd-dropdown-icons {
+:where(.bx-media-tablet2, .bx-media-desktop)   .cd-dropdown .cd-dropdown-content .cd-dropdown-icons {
     width: 600px;
   }
-  .cd-dropdown .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item {
+:where(.bx-media-tablet2, .bx-media-desktop)   .cd-dropdown .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item {
     height: 80px;
     line-height: 1.2;
     padding: 24px 0 0 85px;
   }
-  .cd-dropdown .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item:hover {
+:where(.bx-media-tablet2, .bx-media-desktop)   .cd-dropdown .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item:hover {
     background: #ebebeb;
   }
-  .cd-dropdown .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item h3 {
+:where(.bx-media-tablet2, .bx-media-desktop)   .cd-dropdown .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item h3 {
     color: #3f8654;
     font-weight: bold;
   }
-  .cd-dropdown .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item p {
+:where(.bx-media-tablet2, .bx-media-desktop)   .cd-dropdown .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item p {
     display: block;
     font-size: 1.2rem;
   }
-  .cd-dropdown .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item::before {
+:where(.bx-media-tablet2, .bx-media-desktop)  .cd-dropdown .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item::before {
     left: 25px;
   }
-  .cd-dropdown .cd-dropdown-content > .has-children > ul {
+:where(.bx-media-tablet2, .bx-media-desktop)  .cd-dropdown .cd-dropdown-content > .has-children > ul {
     visibility: hidden;
   }
-  .cd-dropdown .cd-dropdown-content > .has-children > ul.is-active {
+:where(.bx-media-tablet2, .bx-media-desktop)   .cd-dropdown .cd-dropdown-content > .has-children > ul.is-active {
     /* when hover over .cd-dropdown-content items - show subnavigation */
     visibility: visible;
   }
-  .cd-dropdown .cd-dropdown-content > .has-children > .cd-secondary-dropdown.is-active > li > ul {
+:where(.bx-media-tablet2, .bx-media-desktop)   .cd-dropdown .cd-dropdown-content > .has-children > .cd-secondary-dropdown.is-active > li > ul {
     /* if .cd-secondary-dropdown is visible - show also subnavigation */
     visibility: visible;
   }
-  .cd-dropdown .cd-dropdown-content > .has-children > a.is-active {
+:where(.bx-media-tablet2, .bx-media-desktop)   .cd-dropdown .cd-dropdown-content > .has-children > a.is-active {
     /* hover effect for .cd-dropdown-content items with subnavigation */
     box-shadow: inset 2px 0 0 #3f8654;
     color: #3f8654;
   }
-  .cd-dropdown .cd-dropdown-content > .has-children > a.is-active::before, 
-  .cd-dropdown .cd-dropdown-content > .has-children > a.is-active::after {
+:where(.bx-media-tablet2, .bx-media-desktop)   .cd-dropdown .cd-dropdown-content > .has-children > a.is-active::before, 
+:where(.bx-media-tablet2, .bx-media-desktop)   .cd-dropdown .cd-dropdown-content > .has-children > a.is-active::after {
     background: #3f8654;
   }
-  .open-to-left .cd-dropdown .cd-dropdown-content > .has-children > a.is-active {
+:where(.bx-media-tablet2, .bx-media-desktop)  .open-to-left .cd-dropdown .cd-dropdown-content > .has-children > a.is-active {
     box-shadow: inset -2px 0 0 #3f8654;
   }
-}
 
 @-webkit-keyframes cd-fade-in {
   0% {
@@ -978,11 +967,9 @@ li.bx-lcd-mdd-login .bx-lcd-login-form {
   -o-transform: rotate(-45deg);
   transform: rotate(-45deg);
 }
-@media only screen and (min-width: 1024px) {
-  .has-children > a::before, .has-children > a::after, .go-back a::before, .go-back a::after {
+:where(.bx-media-tablet, .bx-media-desktop) .has-children > a::before, .has-children > a::after, .go-back a::before, .go-back a::after {
     background: #b3b3b3;
   }
-}
 
 .has-children > a {
   padding-right: 40px;
@@ -997,21 +984,19 @@ li.bx-lcd-mdd-login .bx-lcd-login-form {
   transform-origin: 9px 50%;
 }
 
-@media only screen and (min-width: 1024px) {
-  .open-to-left .cd-dropdown .cd-dropdown-content > .has-children > a {
-    padding-left: 40px;
-    padding-right: 20px;
-  }
-  .open-to-left .cd-dropdown .cd-dropdown-content > .has-children > a::before, 
-  .open-to-left .cd-dropdown .cd-dropdown-content > .has-children > a::after {
-    right: auto;
-    left: 20px;
-    -webkit-transform-origin: 1px 50%;
-    -moz-transform-origin: 1px 50%;
-    -ms-transform-origin: 1px 50%;
-    -o-transform-origin: 1px 50%;
-    transform-origin: 1px 50%;
-  }
+:where(.bx-media-tablet, .bx-media-desktop) .open-to-left .cd-dropdown .cd-dropdown-content > .has-children > a {
+	padding-left: 40px;
+	padding-right: 20px;
+}
+:where(.bx-media-tablet, .bx-media-desktop) .open-to-left .cd-dropdown .cd-dropdown-content > .has-children > a::before, 
+:where(.bx-media-tablet, .bx-media-desktop) .open-to-left .cd-dropdown .cd-dropdown-content > .has-children > a::after {
+	right: auto;
+	left: 20px;
+	-webkit-transform-origin: 1px 50%;
+	-moz-transform-origin: 1px 50%;
+	-ms-transform-origin: 1px 50%;
+	-o-transform-origin: 1px 50%;
+	transform-origin: 1px 50%;
 }
 .cd-dropdown .cd-dropdown-content .go-back a {
   padding-left: 40px;

modules/boonex/lucid/data/template/system/css/menu.less

@@ -112,111 +112,109 @@
         display: none;
     }
 
-    @media only screen and (min-width: 720px) {
-        #bx-sliding-menu-sys_site.bx-sliding-smenu-main {
-            position: relative;
-            height: 2.125rem;
-        }
-
-        #bx-sliding-menu-sys_site.bx-sliding-smenu-main .bx-sliding-menu-main-cnt {
-            position: absolute;
-            width: 100%;
-        }
-
-        #bx-sliding-menu-sys_site.bx-sliding-smenu-main ul.bx-menu-object-sys_site {
-            position: relative;
-            display: -webkit-flex;
-            display: flex;
-            -webkit-align-items: center;
-            align-items: center;
-            height: 100%;
-        }
-
-        #bx-sliding-menu-sys_site.bx-sliding-smenu-main ul.bx-menu-object-sys_site li {
-            position: relative;
-
-            height: 2.125rem;
-            border: 1px solid transparent;
-            border-radius: 0.5rem;
-        }
-        #bx-sliding-menu-sys_site.bx-sliding-smenu-main ul.bx-menu-object-sys_site li:not(.bx-menu-item-more-auto) {
-            display: block;
-        }
-        #bx-sliding-menu-sys_site.bx-sliding-smenu-main ul.bx-menu-object-sys_site li > a {
-            position: relative;
-            display: -webkit-flex;
-            display: flex;
-            -webkit-align-items: center;
-            align-items: center;
-            height: 100%;
-        }
-
-        #bx-sliding-menu-sys_site.bx-sliding-smenu-main ul.bx-menu-object-sys_site li .bx-menu-floating-blocks-line {
-            position: absolute;
-            display: none;
-
-            top: 0px;
-            left: 0px;
-            width: 100%;
-            height: 0.1875rem;
-
-            -webkit-border-radius: 0.25rem;
-            border-radius: 0.25rem;
-            background-color: rgba(255, 255, 255, 1.0);
-        }
-
-        #bx-sliding-menu-sys_site.bx-sliding-smenu-main ul.bx-menu-object-sys_site li .bx-sliding-smenu-submenu ul,
-        #bx-sliding-menu-sys_site.bx-sliding-smenu-main ul.bx-menu-object-sys_site li .bx-sliding-smenu-submenu ul li{
-            display: block; 
-        }
-
-        #bx-sliding-menu-sys_site.bx-sliding-smenu-main ul.bx-menu-object-sys_site > li:hover,
-        #bx-sliding-menu-sys_site.bx-sliding-smenu-main ul.bx-menu-object-sys_site > li.bx-menu-tab-active:hover {
-            border: 1px solid rgba(0, 0, 0, 0.05);
-            background-color: rgba(0, 0, 0, 0.05);
-        }
-
-        #bx-sliding-menu-sys_site.bx-sliding-smenu-main ul.bx-menu-object-sys_site > li.bx-menu-tab-active {
-            border-color: transparent;
-            background-color: transparent;
-        }
-
-        #bx-sliding-menu-sys_site.bx-sliding-smenu-main ul.bx-menu-object-sys_site > li:hover .bx-sliding-smenu-submenu {
-            display: block;
-        }
-
-        #bx-sliding-menu-sys_site.bx-sliding-smenu-main .bx-menu-object-sys_site li:hover .bx-menu-floating-blocks-arrow .sys-icon.active {
-            display: inline;
-        }
-
-        #bx-sliding-menu-sys_site.bx-sliding-smenu-main .bx-menu-object-sys_site li:hover .bx-menu-floating-blocks-arrow .sys-icon.inactive {
-            display: none;
-        }
-    }
-
-    @media (max-width:720px) {
-        #bx-sliding-menu-sys_site.bx-sliding-smenu-main ul.bx-menu-object-sys_site li {
-           height: auto;
-        }
-
-        #bx-sliding-menu-sys_site.bx-sliding-smenu-main ul.bx-menu-object-sys_site li .bx-sliding-sms-cnt {
-           padding: 0px 0px 0px 1.7rem;
-        }
-
-        .bx-sliding-smenu-submenu {
-            position: relative;
-
-            top: 0px;
-            left: 0px;
-
-            background-color: #transparent;
-            box-shadow: none;
-        }	
-    }
-
-    ul.bx-menu-toolbar li a .bx-menu-item-addon {
-        bottom: auto;
-    }
+    
+:where(.bx-media-tablet, .bx-media-desktop) #bx-sliding-menu-sys_site.bx-sliding-smenu-main {
+	position: relative;
+	height: 2.125rem;
+}
+
+:where(.bx-media-tablet, .bx-media-desktop) #bx-sliding-menu-sys_site.bx-sliding-smenu-main .bx-sliding-menu-main-cnt {
+	position: absolute;
+	width: 100%;
+}
+
+:where(.bx-media-tablet, .bx-media-desktop) #bx-sliding-menu-sys_site.bx-sliding-smenu-main ul.bx-menu-object-sys_site {
+	position: relative;
+	display: -webkit-flex;
+	display: flex;
+	-webkit-align-items: center;
+	align-items: center;
+	height: 100%;
+}
+
+:where(.bx-media-tablet, .bx-media-desktop) #bx-sliding-menu-sys_site.bx-sliding-smenu-main ul.bx-menu-object-sys_site li {
+	position: relative;
+
+	height: 2.125rem;
+	border: 1px solid transparent;
+	border-radius: 0.5rem;
+}
+:where(.bx-media-tablet, .bx-media-desktop) #bx-sliding-menu-sys_site.bx-sliding-smenu-main ul.bx-menu-object-sys_site li:not(.bx-menu-item-more-auto) {
+	display: block;
+}
+:where(.bx-media-tablet, .bx-media-desktop) #bx-sliding-menu-sys_site.bx-sliding-smenu-main ul.bx-menu-object-sys_site li > a {
+	position: relative;
+	display: -webkit-flex;
+	display: flex;
+	-webkit-align-items: center;
+	align-items: center;
+	height: 100%;
+}
+
+:where(.bx-media-tablet, .bx-media-desktop) #bx-sliding-menu-sys_site.bx-sliding-smenu-main ul.bx-menu-object-sys_site li .bx-menu-floating-blocks-line {
+	position: absolute;
+	display: none;
+
+	top: 0px;
+	left: 0px;
+	width: 100%;
+	height: 0.1875rem;
+
+	-webkit-border-radius: 0.25rem;
+	border-radius: 0.25rem;
+	background-color: rgba(255, 255, 255, 1.0);
+}
+
+:where(.bx-media-tablet, .bx-media-desktop) #bx-sliding-menu-sys_site.bx-sliding-smenu-main ul.bx-menu-object-sys_site li .bx-sliding-smenu-submenu ul,
+:where(.bx-media-tablet, .bx-media-desktop) #bx-sliding-menu-sys_site.bx-sliding-smenu-main ul.bx-menu-object-sys_site li .bx-sliding-smenu-submenu ul li{
+	display: block; 
+}
+
+:where(.bx-media-tablet, .bx-media-desktop) #bx-sliding-menu-sys_site.bx-sliding-smenu-main ul.bx-menu-object-sys_site > li:hover,
+:where(.bx-media-tablet, .bx-media-desktop) #bx-sliding-menu-sys_site.bx-sliding-smenu-main ul.bx-menu-object-sys_site > li.bx-menu-tab-active:hover {
+	border: 1px solid rgba(0, 0, 0, 0.05);
+	background-color: rgba(0, 0, 0, 0.05);
+}
+
+:where(.bx-media-tablet, .bx-media-desktop) #bx-sliding-menu-sys_site.bx-sliding-smenu-main ul.bx-menu-object-sys_site > li.bx-menu-tab-active {
+	border-color: transparent;
+	background-color: transparent;
+}
+
+:where(.bx-media-tablet, .bx-media-desktop) #bx-sliding-menu-sys_site.bx-sliding-smenu-main ul.bx-menu-object-sys_site > li:hover .bx-sliding-smenu-submenu {
+	display: block;
+}
+
+:where(.bx-media-tablet, .bx-media-desktop) #bx-sliding-menu-sys_site.bx-sliding-smenu-main .bx-menu-object-sys_site li:hover .bx-menu-floating-blocks-arrow .sys-icon.active {
+	display: inline;
+}
+
+:where(.bx-media-tablet, .bx-media-desktop) #bx-sliding-menu-sys_site.bx-sliding-smenu-main .bx-menu-object-sys_site li:hover .bx-menu-floating-blocks-arrow .sys-icon.inactive {
+	display: none;
+}
+
+
+.bx-media-phone #bx-sliding-menu-sys_site.bx-sliding-smenu-main ul.bx-menu-object-sys_site li {
+   height: auto;
+}
+
+.bx-media-phone #bx-sliding-menu-sys_site.bx-sliding-smenu-main ul.bx-menu-object-sys_site li .bx-sliding-sms-cnt {
+   padding: 0px 0px 0px 1.7rem;
+}
+
+.bx-media-phone .bx-sliding-smenu-submenu {
+	position: relative;
+
+	top: 0px;
+	left: 0px;
+
+	background-color: #transparent;
+	box-shadow: none;
+}	
+
+ul.bx-menu-toolbar li a .bx-menu-item-addon {
+	bottom: auto;
+}
 
 
     /*--- Submenu ---*/
@@ -417,13 +415,12 @@
     }
 
     /*--- Account Popup ---*/
-    @media (min-width:720px) {
-        #bx-sliding-menu-account.bx-sliding-menu-main {
-            left: auto !important;
-            right: 0px !important;
-            width: auto !important;
-        }
-    }
+	:where(.bx-media-tablet, .bx-media-desktop) #bx-sliding-menu-account.bx-sliding-menu-main {
+		left: auto !important;
+		right: 0px !important;
+		width: auto !important;
+	}
+	
     #bx-sliding-menu-account.bx-sliding-menu-main.bx-sliding-menu-fullheight {
         height: calc(100% - 3.75rem);
     }
@@ -491,13 +488,12 @@
     }
 
     /*--- Add Content Menu ---*/
-    @media (min-width:720px) {
-        #bx-sliding-menu-sys_add_content.bx-sliding-menu-main {
-            left: auto !important;
-            right: 0px !important;
-            width: auto !important;
-        }
-    }
+    :where(.bx-media-tablet, .bx-media-desktop) #bx-sliding-menu-sys_add_content.bx-sliding-menu-main {
+		left: auto !important;
+		right: 0px !important;
+		width: auto !important;
+	}
+
     #bx-sliding-menu-sys_add_content.bx-sliding-menu-main .bx-menu-object-sys_add_content {
         display: block;
         width: 100%;

modules/boonex/russian/data/langs/system/ru.xml

@@ -1642,6 +1642,7 @@
     <string name="_adm_stg_cpt_option_sys_samesite_cookies"><![CDATA[Значение "SameSite" для конфиденциальных Cookie]]></string>
     <string name="_adm_stg_cpt_option_sys_notify_to_approve_by_role"><![CDATA[Оповещать участников контекста с определенной ролью о необходимости одобрять контент в контексте]]></string>
 	<string name="_adm_stg_cpt_option_sys_fixed_header"><![CDATA[Статический заголовок]]></string>
+	<string name="_adm_stg_cpt_option_sys_css_media_classes"><![CDATA[CSS @media интервалы]]></string>
     <string name="_adm_stg_cpt_option_template"><![CDATA[Основная тема]]></string>
     <string name="_adm_stg_err_option_template"><![CDATA[Тема не может быть пустой и должна иметь приемлемое название.]]></string>
     <string name="_adm_stg_cpt_option_use_like_operator"><![CDATA[Использовать для поиска оператор LIKE (рекомендуется для небольшого содержимого)]]></string>

studio/template/css/store.css

@@ -358,40 +358,33 @@ div.bx-std-notification-cnt {
 
 
 /*--- Mobile Optimization style ---*/
-@media (min-width:533px) and (max-width:720px) {
-    .bx-std-categories .bx-std-category {
-       width: 49.8%;
-    }
+.bx-media-phone .bx-std-categories .bx-std-category {
+   width: 49.8%;
 }
 
-@media (min-width:533px) and (max-width:1024px) {
-    .bx-std-products .bx-std-product-gallery {
-        -webkit-flex: 0 0 49.8%;
-        -ms-flex: 0 0 49.8%;
-        flex: 0 0 49.8%;
-    }
+:where(.bx-media-phone, .bx-media-tablet) .bx-std-products .bx-std-product-gallery {
+	-webkit-flex: 0 0 49.8%;
+	-ms-flex: 0 0 49.8%;
+	flex: 0 0 49.8%;
 }
 
-@media (min-width:1024px) and (max-width:1280px) {
-    .bx-std-products .bx-std-product-gallery {
-        -webkit-flex: 0 0 33.25%;
-        -ms-flex: 0 0 33.25%;
-        flex: 0 0 33.25%;
-    }
 
-    .bx-std-categories .bx-std-category {
-       width: 49.8%;
-    }
+.bx-media-tablet2 .bx-std-products .bx-std-product-gallery {
+	-webkit-flex: 0 0 33.25%;
+	-ms-flex: 0 0 33.25%;
+	flex: 0 0 33.25%;
 }
 
-@media (min-width:1280px) {
-    .bx-std-products .bx-std-product-gallery {
-        -webkit-flex: 0 0 24.9%;
-        -ms-flex: 0 0 24.9%;
-        flex: 0 0 24.9%;
-    }
+.bx-media-tablet2 .bx-std-categories .bx-std-category {
+   width: 49.8%;
+}
 
-    .bx-std-categories .bx-std-category {
-       width: 33%;
-    }
+.bx-media-desktop   .bx-std-products .bx-std-product-gallery {
+	-webkit-flex: 0 0 24.9%;
+	-ms-flex: 0 0 24.9%;
+	flex: 0 0 24.9%;
 }
+
+.bx-media-desktop .bx-std-categories .bx-std-category {
+   width: 33%;
+}

template/_header_js.html

@@ -17,11 +17,11 @@
         window.location.reload();
     })(window);
 
-    var oMediaPhone = window.matchMedia('(max-width:720px)');
-    var oMediaPhone2 = window.matchMedia('(min-width:533px) and (max-width:720px)');
-    var oMediaTablet = window.matchMedia('(min-width:720px) and (max-width:__page_width__)');
-    var oMediaTablet2 = window.matchMedia('(min-width:533px) and (max-width:__page_width__)');
-    var oMediaDesktop = window.matchMedia('(min-width:__page_width__)');
+    var oMediaPhone = window.matchMedia('__css_media_phone__');
+    var oMediaPhone2 = window.matchMedia('__css_media_phone2__');
+    var oMediaTablet = window.matchMedia('__css_media_tablet__');
+    var oMediaTablet2 = window.matchMedia('__css_media_tablet2__');
+    var oMediaDesktop = window.matchMedia('__css_media_desktop__');
 
     function fMediaCallback(e) {
         if (oMediaPhone.matches)