/////////////////////////////////////////////// // // Queries // /////////////////////////////////////////////// // MIN WIDTH // @media all and (min-width: 1200px) { // #gallery-items .rsOverflow, // .royalSlider#gallery-items { // height: 480px !important; // } // } // @media all and (min-width: 1600px) { // #gallery-items .rsOverflow, // .royalSlider#gallery-items { // height: 600px !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: 1280px) { .home-gallery, .profile { background-attachment: scroll; background-size: cover; } #homeGallery { .swiperArrow { display: none; } } footer { .span9, .pull-right { float: none !important; width: 100% !important; text-align: center; } } .calculator-section .calculate-proc .span4 p.blue { min-height: 48px; } } @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: 15px 0 0 10px; } .brand-tel { margin-top: 26px; margin-left: 10px; } #header-image h1 { font-size: 52px; line-height: 60px; } .dropdown-menu .dropdown-menu .dropdown-menu { background: transparent; .open > a, .active > a, .open > a:hover, .active > a:hover {color: #fff !important;} } #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; @include gradient-vertical($dropdownLinkBackgroundActive, darken($dropdownLinkBackgroundActive, 5%)); } > .dropdown-submenu:hover { > a { color: #fff !important; @include gradient-vertical($dropdownLinkBackgroundActive, darken($dropdownLinkBackgroundActive, 5%)); } } > .dropdown-submenu.active { > a { color: #fff !important; @include gradient-vertical($dropdownLinkBackgroundActive, darken($dropdownLinkBackgroundActive, 5%)); } } &.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; } .advantages ul li { width: 100% !important; } } @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; } } .thumbnails .span3 { width: 48% !important; margin: 1% !important; float: left !important; } .specials .span3 { width: 46% !important; margin: 2% !important; float: left !important; text-align: center; } .testimonials-list { display: none !important;} .all-useful-news { text-align: center;} .title-without-arrow, .title-with-arrow, .home-gallery .title-white { font-size: 36px !important; line-height: 1.1 !important; } .calculate-proc .span4 { margin-bottom: 20px;} .profile .row-fluid > .span6:last-child {display: none;} } @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;} // 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%;} } .badge.badge-important.pull-right { display: none !important; } .logo { min-width:150px; .logo__description { display: none;} } .specials .span3 { width: 100% !important; margin: 0% !important; float: none !important; text-align: left; img { display: none;} } } @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;} }