/** * @package Portal - accessibletemplate * @version 2.3.1 * @author Francesco Zaniol, accessibletemplate - http://www.accessibletemplate.com * @copyright Copyright (C) 2011-Present Francesco Zaniol * @license accessibletemplate Terms & Conditions - http://www.accessibletemplate.com/en/terms-and-conditions **/ /*---------------------------------------------------------------- - SMALL & NARROW SCREENS ---------------------------------------------------------------- */ @media screen and (max-width: 719px){ /* ~~~ FULL WIDTH STYLE (no margins) ~~~ */ body.full-layout-width #accessibility-panel .accessibility-module, body.liquid-layout-width #accessibility-panel .accessibility-module {display:block !important;float:left !important;width:100% !important;clear:both;margin-left:0 !important;margin-right:0 !important;} /* ~~~ Website banner - Centered ~~~ */ body.full-layout-width #layout-container_prt #website-banner-inner, body.liquid-layout-width #layout-container_prt #website-banner-inner {float:none !important;width:100% !important;text-align:center !important;margin:0 !important;} body.full-layout-width #layout-container_prt #logo-wrap, body.liquid-layout-width #layout-container_prt #logo-wrap {float:none !important;display:inline-block;text-align:center !important;margin:0 !important;} body.full-layout-width #layout-container_prt #logo-wrap, body.liquid-layout-width #layout-container_prt #logo-wrap, body.full-layout-width #layout-container_prt #logo-wrap img, body.liquid-layout-width #layout-container_prt #logo-wrap img, body.full-layout-width #layout-container_prt #logo-wrap a, body.liquid-layout-width #layout-container_prt #logo-wrap a {margin:0 auto !important;} body.full-layout-width #layout-container_prt #titles-container, body.liquid-layout-width #layout-container_prt #titles-container, body.full-layout-width #layout-container_prt #titles-container-middle, body.liquid-layout-width #layout-container_prt #titles-container-middle, body.full-layout-width #layout-container_prt #titles-container-inner, body.liquid-layout-width #layout-container_prt #titles-container-inner{ float:left !important; position:relative !important; width:100% !important; text-align:center !important; top:0 !important; right:0 !important; bottom:0 !important; left:0 !important; margin:0 0 .2em 0 !important; padding:0 !important; text-indent:0 !important; } body.full-layout-width #layout-container_prt #titles-container #title, body.liquid-layout-width #layout-container_prt #titles-container #title, body.full-layout-width #layout-container_prt #titles-container #subtitle, body.liquid-layout-width #layout-container_prt #titles-container #subtitle{white-space:normal !important;height:auto !important;} body.full-layout-width #layout-container_prt #titles-container #title, body.liquid-layout-width #layout-container_prt #titles-container #title {float:none !important;display:inline-block !important;text-align:center !important;width:auto !important;} body.full-layout-width #layout-container_prt #titles-container #subtitle, body.liquid-layout-width #layout-container_prt #titles-container #subtitle {display:block !important;width:100% !important;margin:0 !important;text-align:center !important;} /* ~~~ Main body padding ~~~ */ body.full-layout-width #layout-container_prt #main-body, body.liquid-layout-width #layout-container_prt #main-body {width:100% !important;margin-left:0 !important;margin-right:0 !important;padding-left:1% !important;padding-right:1% !important;} /* ~~~ MENUS ~~~ */ /* Footer Menu */ body.full-layout-width.side-menu-style_floating #layout-container_prt #footer-menu-inner ul a, body.liquid-layout-width.side-menu-style_floating #layout-container_prt #footer-menu-inner ul a {text-align:center !important;} } /*---------------------------------------------------------------- - NARROW SCREENS ---------------------------------------------------------------- */ @media screen and (min-width: 480px) and (max-width: 719px){ body.full-layout-width #layout-container_prt #layout-container_prt, body.liquid-layout-width #layout-container_prt #layout-container_prt{margin-top:.6em !important;} body.full-layout-width #layout-container_prt #left-column, body.full-layout-width #layout-container_prt #main-content-container, body.full-layout-width #layout-container_prt #right-column, body.liquid-layout-width #layout-container_prt #left-column, body.liquid-layout-width #layout-container_prt #main-content-container, body.liquid-layout-width #layout-container_prt #right-column, body.liquid-layout-width .custom-module-outer, body.full-layout-width .custom-module-outer{ float:left !important; width:100% !important; clear:both; } body.full-layout-width #layout-container_prt #header #header-top, body.liquid-layout-width #layout-container_prt #header #header-top{float:right;position:relative !important;clear:both !important;} body.full-layout-width #layout-container_prt #header #search-module-outer, body.liquid-layout-width #layout-container_prt #header #search-module-outer{float:right !important;} body.full-layout-width #layout-container_prt #logo-wrap, body.liquid-layout-width #layout-container_prt #logo-wrap{ margin-top:0 !important; } /* ~~~ Side Floating Menu ~~~ */ body.full-layout-width.side-menu-style_floating #layout-container_prt #main-body .menu-container ul, body.liquid-layout-width.side-menu-style_floating #layout-container_prt #main-body .menu-container ul, body.full-layout-width.side-menu-style_floating #layout-container_prt #main-body .menu-container ul li, body.liquid-layout-width.side-menu-style_floating #layout-container_prt #main-body .menu-container ul li, body.full-layout-width.side-menu-style_floating #layout-container_prt #main-body .menu-container ul a, body.liquid-layout-width.side-menu-style_floating #layout-container_prt #main-body .menu-container ul a {display:block !important;float:none !important;width:100% !important;clear:both !important;} body.full-layout-width.side-menu-style_floating #layout-container_prt #main-body .menu-container ul ul, body.liquid-layout-width.side-menu-style_floating #layout-container_prt #main-body .menu-container ul ul {width:40% !important;left:10% !important;top:100% !important;} body.full-layout-width.side-menu-style_floating #layout-container_prt #main-body .menu-container ul ul ul, body.liquid-layout-width.side-menu-style_floating #layout-container_prt #main-body .menu-container ul ul ul {width:100% !important;} } /*---------------------------------------------------------------- - SMALL SCREENS ---------------------------------------------------------------- */ @media screen and (max-width: 480px){ /* ~~~ FULL WIDTH STYLE (no margins) ~~~ */ body.full-layout-width #header-top, body.liquid-layout-width #header-top, body.full-layout-width #support-menu-inner, body.liquid-layout-width #support-menu-inner, body.full-layout-width #layout-container_prt #left-column, body.liquid-layout-width #layout-container_prt #left-column, body.full-layout-width #layout-container_prt #main-content-container, body.liquid-layout-width #layout-container_prt #main-content-container, body.full-layout-width #layout-container_prt #right-column, body.liquid-layout-width #layout-container_prt #right-column {display:block !important;float:left !important;width:100% !important;clear:both;margin-left:0 !important;margin-right:0 !important;} /* ~~~ FULL WIDTH STYLE (with margins) ~~~ */ body.full-layout-width #layout-container_prt .column-1, body.full-layout-width #layout-container_prt .column-2, body.full-layout-width #layout-container_prt .column-3, body.full-layout-width #layout-container_prt .cols-1, body.full-layout-width #layout-container_prt .cols-2 .column-1, body.full-layout-width #layout-container_prt .cols-2 .column-2, body.full-layout-width #layout-container_prt .cols-3 .column-1, body.full-layout-width #layout-container_prt .cols-3 .column-2, body.full-layout-width #layout-container_prt .cols-3 .column-3, body.full-layout-width #layout-container_prt .cols-4 .column-1, body.full-layout-width #layout-container_prt .cols-4 .column-2, body.full-layout-width #layout-container_prt .cols-4 .column-3, body.full-layout-width #layout-container_prt .cols-4 .column-4, body.full-layout-width [class*="col-style-"], body.full-layout-width [class*="fluid-width-"], body.full-layout-width #layout-container_prt .marked-block-dark, body.full-layout-width #layout-container_prt .marked-block-light, body.full-layout-width #layout-container_prt .marked-block-dark.col-style-full, body.full-layout-width #layout-container_prt .marked-block-light.col-style-full, body.full-layout-width #layout-container_prt .marked-block-dark.col-style-2, body.full-layout-width #layout-container_prt .marked-block-light.col-style-2, body.full-layout-width #layout-container_prt .marked-block-dark.col-style-3, body.full-layout-width #layout-container_prt .marked-block-light.col-style-3, body.full-layout-width #layout-container_prt .marked-block-dark.col-style-4, body.full-layout-width #layout-container_prt .marked-block-light.col-style-4, body.full-layout-width #layout-container_prt .marked-block-dark.col-style-5, body.full-layout-width #layout-container_prt .marked-block-light.col-style-5, body.full-layout-width #layout-container_prt .marked-block-dark.col-style-6, body.full-layout-width #layout-container_prt .marked-block-light.col-style-6, body.liquid-layout-width #layout-container_prt .column-1, body.liquid-layout-width #layout-container_prt .column-2, body.liquid-layout-width #layout-container_prt .column-3, body.liquid-layout-width #layout-container_prt .cols-1, body.liquid-layout-width #layout-container_prt .cols-2 .column-1, body.liquid-layout-width #layout-container_prt .cols-2 .column-2, body.liquid-layout-width #layout-container_prt .cols-3 .column-1, body.liquid-layout-width #layout-container_prt .cols-3 .column-2, body.liquid-layout-width #layout-container_prt .cols-3 .column-3, body.liquid-layout-width #layout-container_prt .cols-4 .column-1, body.liquid-layout-width #layout-container_prt .cols-4 .column-2, body.liquid-layout-width #layout-container_prt .cols-4 .column-3, body.liquid-layout-width #layout-container_prt .cols-4 .column-4, body.liquid-layout-width [class*="col-style-"], body.liquid-layout-width [class*="fluid-width-"], body.liquid-layout-width #layout-container_prt .marked-block-dark, body.liquid-layout-width #layout-container_prt .marked-block-light, body.liquid-layout-width #layout-container_prt .marked-block-dark.col-style-full, body.liquid-layout-width #layout-container_prt .marked-block-light.col-style-full, body.liquid-layout-width #layout-container_prt .marked-block-dark.col-style-2, body.liquid-layout-width #layout-container_prt .marked-block-light.col-style-2, body.liquid-layout-width #layout-container_prt .marked-block-dark.col-style-3, body.liquid-layout-width #layout-container_prt .marked-block-light.col-style-3, body.liquid-layout-width #layout-container_prt .marked-block-dark.col-style-4, body.liquid-layout-width #layout-container_prt .marked-block-light.col-style-4, body.liquid-layout-width #layout-container_prt .marked-block-dark.col-style-5, body.liquid-layout-width #layout-container_prt .marked-block-light.col-style-5, body.liquid-layout-width #layout-container_prt .marked-block-dark.col-style-6, body.liquid-layout-width #layout-container_prt .marked-block-light.col-style-6 {display:block !important;float:left !important;width:96% !important;margin:1em 2% !important;clear:both !important;} /* ~~~ Smaller title & subtitle ~~~ */ body.full-layout-width #layout-container_prt #titles-container #title, body.liquid-layout-width #layout-container_prt #titles-container #title{font-size:2.8em !important;} body.full-layout-width #layout-container_prt #titles-container #subtitle, body.liquid-layout-width #layout-container_prt #titles-container #subtitle{font-size:1em !important;margin-bottom:.6em !important;} /* ~~~ MENUS ~~~ */ /* Main & side menu */ body.full-layout-width.side-menu-style_floating #layout-container_prt #main-body .menu-container ul, body.liquid-layout-width.side-menu-style_floating #layout-container_prt #main-body .menu-container ul, body.full-layout-width.main-menu-style_vertical-floating #layout-container_prt #main-menu-container ul, body.liquid-layout-width.main-menu-style_vertical-floating #layout-container_prt #main-menu-container ul, body.full-layout-width.main-menu-style_horizontal-floating #layout-container_prt #main-menu-container ul, body.liquid-layout-width.main-menu-style_horizontal-floating #layout-container_prt #main-menu-container ul, body.full-layout-width.side-menu-style_floating #layout-container_prt #main-body .menu-container ul li, body.liquid-layout-width.side-menu-style_floating #layout-container_prt #main-body .menu-container ul li, body.full-layout-width.main-menu-style_vertical-floating #layout-container_prt #main-menu-container ul li, body.liquid-layout-width.main-menu-style_vertical-floating #layout-container_prt #main-menu-container ul li, body.full-layout-width.main-menu-style_horizontal-floating #layout-container_prt #main-menu-container ul li, body.liquid-layout-width.main-menu-style_horizontal-floating #layout-container_prt #main-menu-container ul li, body.full-layout-width.side-menu-style_floating #layout-container_prt #main-body .menu-container ul a, body.liquid-layout-width.side-menu-style_floating #layout-container_prt #main-body .menu-container ul a, body.full-layout-width.main-menu-style_vertical-floating #layout-container_prt #main-menu-container ul a, body.liquid-layout-width.main-menu-style_vertical-floating #layout-container_prt #main-menu-container ul a, body.full-layout-width.main-menu-style_horizontal-floating #layout-container_prt #main-menu-container ul a, body.liquid-layout-width.main-menu-style_horizontal-floating #layout-container_prt #main-menu-container ul a {display:block !important;float:none !important;width:100% !important;clear:both !important;} body.full-layout-width.side-menu-style_floating #layout-container_prt #main-body .menu-container ul li, body.liquid-layout-width.side-menu-style_floating #layout-container_prt #main-body .menu-container ul li, body.full-layout-width.main-menu-style_vertical-floating #layout-container_prt #main-menu-container ul li, body.liquid-layout-width.main-menu-style_vertical-floating #layout-container_prt #main-menu-container ul li, body.full-layout-width.main-menu-style_horizontal-floating #layout-container_prt #main-menu-container ul li, body.liquid-layout-width.main-menu-style_horizontal-floating #layout-container_prt #main-menu-container ul li {position:relative !important;} /* Main & side menu (2nd level) */ body.full-layout-width.side-menu-style_floating #layout-container_prt #main-body .menu-container ul ul, body.liquid-layout-width.side-menu-style_floating #layout-container_prt #main-body .menu-container ul ul, body.full-layout-width.main-menu-style_vertical-floating #layout-container_prt #main-menu-container ul ul, body.liquid-layout-width.main-menu-style_vertical-floating #layout-container_prt #main-menu-container ul ul, body.full-layout-width.main-menu-style_horizontal-floating #layout-container_prt #main-menu-container ul ul, body.liquid-layout-width.main-menu-style_horizontal-floating #layout-container_prt #main-menu-container ul ul {width:80% !important;left:10% !important;top:100% !important;} /* Main & side menu (3rd~sub levels) */ body.full-layout-width.side-menu-style_floating #layout-container_prt #main-body .menu-container ul ul ul, body.liquid-layout-width.side-menu-style_floating #layout-container_prt #main-body .menu-container ul ul ul, body.full-layout-width.main-menu-style_vertical-floating #layout-container_prt #main-menu-container ul ul ul, body.liquid-layout-width.main-menu-style_vertical-floating #layout-container_prt #main-menu-container ul ul ul, body.full-layout-width.main-menu-style_horizontal-floating #layout-container_prt #main-menu-container ul ul ul, body.liquid-layout-width.main-menu-style_horizontal-floating #layout-container_prt #main-menu-container ul ul ul {width:92% !important;} /* ~~~ OTHER ~~~ */ /* social buttons container */ body.full-layout-width.social-buttons-module-style_expandable #social-buttons-container-outer .social-button-container, body.liquid-layout-width.social-buttons-module-style_expandable #social-buttons-container-outer .social-button-container {float:none !important;width:100% !important;margin:.3em 0 !important ;} } /*---------------------------------------------------------------- - LARGE SCREENS ---------------------------------------------------------------- */ @media screen and (min-width: 1025px){} /*---------------------------------------------------------------- - SUPER LARGE SCREENS ---------------------------------------------------------------- */ @media screen and (min-width: 1921px){}