/////////////////////////////////////////////// // // Queries // /////////////////////////////////////////////// // MIN WIDTH @media all and (min-width: 1600px) { #gallery-items .rsOverflow, .royalSlider#gallery-items { height: 640px !important; } } @media all and (min-width: 1200px) { #gallery-items .rsOverflow, .royalSlider#gallery-items { height: 480px !important; } } @media all and (min-width: 767px) { .center-padding-right { padding-right: 15px;} .center-padding-left { padding-left: 15px;} .center-padding-both { padding-left: 10px; padding-right: 10px;} } // MAX WIDTH @media all and (max-width: 1200px) and (min-width: $navbarCollapseWidth + 1) { #nav-main > li { > a { margin-right: 12px; font-size: 16px; } } } @media all and (max-width: 1000px) { .top-msg { font-size: 12px; } } @media all and (max-width: $navbarCollapseWidth) { .navbar .btn-navbar { margin: 23px 0 0 10px; } .brand-tel { margin-top: 26px; margin-left: 10px; } #header-image h1 { font-size: 52px; line-height: 60px; } #nav-main > li { a { padding-bottom: 11px; padding-top: 11px; text-shadow: none !important; border-bottom: 0 !important; margin-right: 0; } &:hover, &.active, &.open { > a { background: $accent-sec; color: #fff; } > .dropdown-menu { > a:hover { color: #fff; background: $accent-sec; } > .dropdown-submenu:hover { > a { color: #fff !important; background: $accent-sec; } } > .dropdown-submenu.active { > a { color: #fff !important; background: $accent-sec; } } &.active { > a { color: #fff; background: $accent-sec; } } } } } #header-search-form { margin:0 10px 10px; float:none; width:auto !important; .search-input-wrapper { @include box-shadow(1px 1px 3px rgba(0,0,0,0.25)); } .search-query { font-size: 14px; line-height: 28px; } .search-input-wrapper { padding: 0px 30px !important; } } .dropdown-submenu > a:after { display: inline-block; float: none; margin-left: 4px; border-width: 5px 5px 0 5px; border-top-color: #b5b5b5; border-left-color: transparent; } .dropdown-submenu:hover > a:after { border-top-color: $white; border-left-color: transparent; } // Active state // ------------ .dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus { color: #fff; } } @media all and (max-width: 979px) { //match with menu collapse .nav-collapse { #header-search-form, #links-user, #nav-main {display:none;} } .nav-collapse.in { #header-search-form, #links-user, #nav-main {display:block;} } #header-image > h1 { height: 130px; font-size: 60px; } #gallery-items .rsOverflow, .royalSlider#gallery-items { height: 295px !important; } } @media all and (min-width: 768px) and (max-width: 979px) { // .thumbnails { // margin-left: -#{$gridGutterWidth768}; // > li {margin-left: $gridGutterWidth768;} // } .navbar .container { width:724px;} .table { th {font-size: $baseFontSize - 4;} td {font-size: $baseFontSize - 2; line-height:$baseFontSize; } } } @media all and (max-width: 900px) { .top-msg { float: none !important; text-align: center; border-bottom: 1px solid #fff; line-height: 1.2; padding-top: 5px; padding-bottom: 5px; } } @media all and (max-width: 800px) { .nav-tabs > li { float:none !important; a { @include border-radius(0px); } } } @media all and (max-width: 767px) { body { padding-left: 0; padding-right: 0; } .navbar .brand { max-width:300px; } .clmn-left, .clmn-center { margin-bottom: $baseLineHeight; } .push > .container-fluid { margin-bottom: 0;} .navbar-static-top { margin-left: 0; margin-right: 0; } #header-image h1 { height: 100px; font-size: 32px; line-height: 40px; } #gallery-items .rsOverflow, .royalSlider#gallery-items { height: 280px !important; } footer { text-align:center; * { float:none !important;} } .table { th {font-size: $baseFontSize - 3;} td {font-size: $baseFontSize - 1; line-height:$baseFontSize + 1;} } #product { .prod-info { clear: both; padding-top: 10px; } } } @media all and (min-width: 481px) and (max-width: 768px) { .thumbnails li.span3 { width: 32% !important; margin-right: 2% !important; margin-left: 0 !important; margin-bottom: $gridGutterWidth / 3 !important; float:left !important; &.first { clear: none !important;} &.last { margin-right: 2% !important;} &.third {margin-right: 0 !important;} } .thumbnails li.span4 { width: 32% !important; margin-right: 2% !important; margin-left: 0 !important; margin-bottom: $gridGutterWidth / 3 !important; float:left !important; &.last { margin-right: 2% !important;} &.third {margin-right: 0 !important;} } } @media all and (max-width: 480px) { h1 { font-size: $baseFontSize * 1.8;} h2 { font-size: $baseFontSize * 1.4;} h3 { font-size: $baseFontSize * 1.3;} h4 { font-size: $baseFontSize * 1.2;} h5 { font-size: $baseFontSize * 1.1;} h6 { font-size: $baseFontSize * 1.0;} // Header .navbar .brand { padding-left: 0; padding-right: 0; max-width:200px; } .brand-tel { margin-top: 16px; margin-left: 5px;} .navbar .btn-navbar { margin-top: 17px; margin-left: 5px; padding: 2px 5px;} // Medias .media { .date-square { float: left; display: block; margin-bottom: 0; } } .partner { .pull-left, .pull-right { display: inline-block; } } #gallery-items .rsOverflow, .royalSlider#gallery-items { height: 220px !important; } .filter_form { dt, #query-element {width: 100% !important;} dt, dd { margin: 0; padding-bottom:5px; float: none !important; } input.text, select { width:100% !important;} #btnSearch-element { width:100% !important; text-align: center;} } .lead { font-size:22px; line-height:normal;} ul.brief-info { //Contact Page content float:none; padding: 0 !important; } .table { th {font-size: $baseFontSize - 4;} td {font-size: $baseFontSize - 2;} } #table-sitemap { td {display: block; width: 100%;} } } @media all and (min-width: 321px) and (max-width: 480px) { .thumbnails li.span3, .thumbnails li.span4 { width: 48% !important; float:left !important; margin-right: 4% !important; margin-bottom: $gridGutterWidth / 2 !important; &.first { clear: none !important;} &.last {margin-right: 4% !important;} &.second {margin-right: 0 !important;} } } @media all and (max-width: 320px) { .brand .name {font-size: 20px;} .royalSlider#gallery-items { height: 160px !important; } .thumbnails li.span3, .thumbnails li.span4 { width: 100% !important; float: none !important; clear: both !important; margin-right: 0 !important;} }