/* Mobile Portrait View */ @media screen and (max-width: 479px) { * { box-sizing: border-box; } .toggle { display: block; } .toggle a { width: 100%; color: #ffffff; background: url(../images/mobile_nav_right.png) no-repeat right center #373a3f; padding: 10px 10px; margin-top: 20px; font-size: 16px; text-decoration: none; } .toggle a:hover { color: #ffffff !important; } .toggle a.active { color: #ffffff; } #navigation{ width:auto; background-color:transparent !important; position:relative !important; } .sitenav { display: none; margin-top:0; width:100%; } .sitenav ul { background: #000000; color: #000; width: 100%; float: none; margin-top: 0; } .sitenav ul li { border-top: 1px #303030 solid; display: block !important; float: none; text-align: left; margin-right:0px !important; } .sitenav ul li ul { color: #fff; opacity: 0; padding:0; position: absolute; right: 9999rem; top: calc(100% + 2rem); transition: opacity 0.15s linear, transform 0.15s linear, right 0s 0.15s; transform: translateY(0.6rem); width: 20rem; z-index: 1; } .sitenav ul li.menu-item-has-children:hover > ul, .sitenav ul li.menu-item-has-children:focus > ul, .sitenav ul li.menu-item-has-children.focus > ul { left: 0; opacity: 1; transform: translateY(0); transition: opacity 0.15s linear, transform 0.15s linear; background-color:#303030; top:0; position: relative; width:100%; } .sitenav ul li a { padding: 8px 10px !important; display: block; color: #ffffff !important; text-align:left; } .sitenav ul li a:hover { color: #ffffff !important; } .sitenav ul li ul, .sitenav ul li ul ul { display: block !important; } .sitenav ul li ul li a:before { content: "\00BB \00a0"; } .sitenav ul li ul li a { padding-left: 20px !important; } .sitenav ul li ul li ul li a { padding-left: 30px !important; } .sitenav ul li.current_page_item a{ background-color:transparent !important; } .sitenav ul li:hover, .sitenav ul li.current_page_item{ background-color:inherit !important; } } /* Mobile Landscape View */ @media screen and (max-width: 719px) and (min-width: 480px) { * { box-sizing: border-box; } .toggle { display: block; } .toggle a { width: 100%; color: #ffffff; background: url(../images/mobile_nav_right.png) no-repeat right center #373a3f; padding: 10px 10px; margin-top: 20px; font-size: 16px; text-decoration: none; } .toggle a:hover { color: #ffffff !important; } .toggle a.active { color: #ffffff; } .sitenav { display: none; margin-top:0; width:100%; } #navigation { width:auto; background-color:transparent !important; position:relative !important; } .sitenav ul { background: #000000; color: #000; width: 100%; float: none; margin-top: 0; } .sitenav ul li { border-top: 1px #303030 solid; display: block; float: none; text-align: left; } .sitenav ul li ul { color: #fff; opacity: 0; padding:0; position: absolute; right: 9999rem; top: calc(100% + 2rem); transition: opacity 0.15s linear, transform 0.15s linear, right 0s 0.15s; transform: translateY(0.6rem); width: 20rem; z-index: 1; } .sitenav ul li.menu-item-has-children:hover > ul, .sitenav ul li.menu-item-has-children:focus > ul, .sitenav ul li.menu-item-has-children.focus > ul { left: 0; opacity: 1; transform: translateY(0); transition: opacity 0.15s linear, transform 0.15s linear; background-color:#303030; top:0; position: relative; } .sitenav ul li a { padding: 5px 10px; display: block; color: #ffffff !important; text-align:left !important; } .sitenav ul li a:hover { color: #ffffff !important; } .sitenav ul li ul, .sitenav ul li ul ul { display: block !important; } .sitenav ul li ul li a:before { content: "\00BB \00a0"; } .sitenav ul li ul li a { padding-left: 20px !important; } .sitenav ul li ul li ul li a { padding-left: 30px !important; } .sitenav ul li.current_page_item a{ background-color:transparent !important; } .sitenav ul li:hover, .sitenav ul li.current_page_item{ background-color:inherit !important; } } @media screen and (max-width: 999px) and (min-width: 720px) { * { box-sizing: border-box; } .toggle { display: block; } .toggle a { width: 100%; color: #ffffff; background: url(../images/mobile_nav_right.png) no-repeat right center #373a3f; padding: 10px 10px; margin-top: 20px; font-size: 16px; text-decoration: none; } .toggle a:hover { color: #ffffff !important; } .toggle a.active { color: #ffffff; } .sitenav { display: none; float:none; } #navigation{ width:auto; background-color: transparent !important; position:relative !important; } .sitenav ul { background: #000000; color: #000; width: 100%; float: none; margin-top: 0; } .sitenav ul li { border-top: 1px #303030 solid; display: block; float: none; text-align: left; } .sitenav ul li ul { color: #fff; opacity: 0; padding:0; position: absolute; right: 9999rem; top: calc(100% + 2rem); transition: opacity 0.15s linear, transform 0.15s linear, right 0s 0.15s; transform: translateY(0.6rem); width: 20rem; z-index: 1; } .sitenav ul li.menu-item-has-children:hover > ul, .sitenav ul li.menu-item-has-children:focus > ul, .sitenav ul li.menu-item-has-children.focus > ul { left: 0; opacity: 1; transform: translateY(0); transition: opacity 0.15s linear, transform 0.15s linear; background-color:#303030; top:0; position: relative; } .sitenav ul li a { padding: 5px 10px; display: block; color: #ffffff !important; text-align:left; } .sitenav ul li a:hover { color: #ffffff !important; } .sitenav ul li ul li a:before { content: "\00BB \00a0"; } .sitenav ul li ul li a { padding-left: 20px !important; } .sitenav ul li ul li ul li a { padding-left: 30px !important; } .sitenav ul li:hover, .sitenav ul li.current_page_item{ background-color:inherit !important; } } @media screen and (min-width: 1000px) { .sitenav ul li ul li { display: block; position: relative; float: none; } .sitenav ul li ul li a { display: block; padding-top: 10px; padding-bottom: 10px; } .site-main { width: 70%; } } @media screen and (min-width: 1000px) and (max-width: 1159px) { .sitenav ul{ font-size:12px; } .sitenav ul li:hover > ul{ top:52px; } #navigation{ width:auto; } }