File: D:/HostingSpaces/SBogers60/vandeurzenheftrucks.nl/wwwroot/css/less/screen.less
@import 'mixins.less';
@sw: 1280px;
@pad: 80px;
@v_space: 80px;
@col: ((@sw - 2*@pad) / 5);
@aside: 280px;
*{ .box-sizing(border-box); }
.selection(#0D57C1, #FEDD33);
html{ height: 100%; }
body{ position: relative; overflow-x: hidden; margin: 0; padding: @v_space 0 0 @aside; width: 100%; min-height: 100%; color: #66686D; font-family: 'Montserrat', sans-serif; font-size: 14px; letter-spacing: 0.02em;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;
}
a{ text-decoration: none; color: #0D57C1;
&.disabled{ cursor: default; }
}
section,article{ display: block; }
.clear{ display: block; clear: both; }
.float{ float: left; }
.mobile{ display: none; }
.center{ position: relative; margin: 0 auto; padding-right: @pad; padding-left: @pad; width: @sw; }
.sprite{ background: url('/images/structure/vandeurzen_sprite.svg'); background-size: 160px 200px; }
.show_small{ display: none; }
header.main{ position: fixed; z-index: 100; top: 0; left: 0; padding-left: @aside; width: 100%; height: @v_space; background: #FEDD33; color: #0D57C1; -webkit-transform: translateZ(0);
span{ position: relative; }
.logo{ position: absolute; top: 0; left: 0; margin: 20px 20px 0 0; width: 55px; height: 32px; .sprite; background-position: -10px -100px; }
.main_title{ display: block; padding-top: 10px; position: relative; padding-left: 70px; }
.title{ font-family: 'Titillium Web', sans-serif; font-weight: 600; font-size: 1.75em; white-space: nowrap; }
.phone{ position: absolute; top: 0; right: 0; font-size: 1.125em; line-height: @v_space; }
}
//.breadcrumb_holder{ position: fixed; z-index: 100; top: @v_space; left: 0; padding-left: @aside; width: 100%; height: 24px; background: #F7F8FA; color: #ccc;
.breadcrumb{ display: block; position: relative; overflow: hidden; height: 24px; font-family: 'Titillium Web', sans-serif; font-weight: 600; font-size: .9em; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap;
.holder{ display: block; position: absolute; left: 0; top: -100%; .transition(top 300ms); white-space: nowrap; }
.new{ top: -100%; }
.current{ top: 0; }
.hide{ top: 100%; }
}
//}
//aside.nav{ display: none; }
//.no-touch aside.nav{ display: block; }
aside.nav{ position: fixed; z-index: 150; top: 0; left: 0; overflow: hidden; width: @aside; min-height: 100%; background: #0D57C1; color: #fff; font-family: 'Titillium Web', sans-serif; font-size: 1.125em; -webkit-transform: translateZ(0);
.logo_large{ display: block; padding: 50px; width: 100%; }
.title{ display: block; margin-bottom: 56px; padding-left: 40px; height: @v_space; font-weight: 600; text-transform: uppercase; line-height: @v_space; }
.icon{ display: none; }
ul{ position: relative; margin: 0; padding: 0; width: @aside; list-style: none; }
li{ position: relative; height: 56px; line-height: 56px; border-bottom: 1px solid #3170CA;
a{ display: block; position: relative; z-index: 5; padding-left: 40px; width: 100%; height: 100%; color: #D8D9F4; font-weight: 600; }
.bg{ display: block; position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 0; background: #0043C4; -webkit-transition: height 400ms ease-out ,opacity 400ms linear 500ms; transition: height 400ms ease-out ,opacity 400ms linear 500ms; }
.arrow{ display: block; position: absolute; top: 50%; right: 20px; z-index: 5; .opacity(0); margin-top: -5px; width: 20px; height: 10px; .sprite; background-position: -90px -140px; -webkit-transition: opacity 400ms,background-position 400ms ease-out; transition: opacity 400ms,background-position 400ms ease-out; -webkit-transform: translateZ(0); }
&.active{
a{ color: #fff; }
.bg{ height: 100%; }
.arrow{ .opacity(1); background-position: -57px -140px; }
}
&:not(.active):hover{
a{ color: #FEDD33; }
.arrow{ .opacity(1); background-position: -57px -140px; }
}
}
}
#mob_nav{ display: none;
.icon{ display: block; margin: 20px 15px 56px; width: 30px; height: 20px; .sprite; background-position: -100px -140px; }
}
#wrap{ }
#content{ position: relative; z-index: 1; }
#loader{ display: block; position: fixed; top: 0; left: 0; margin-left: (@aside/2); width: 100%; height: 100%; background: url('/images/structure/loader.gif') center center no-repeat; .opacity(0); }
#new_id{ display: none; }
section.full{ padding: @v_space 0 0; position: relative; z-index: 5; width: 100%; background: #fff; }
#contact, #offer, #demo{
section.full{ padding-top: 20px; }
}
// Button
.btn{ display: inline-block; position: relative; overflow: hidden; margin-bottom: 10px;height: 56px; background: #4258DA; color: #fff; line-height: 56px; .radius(6px); cursor: pointer;
.text{ position: relative; top: -1px; left: 0; z-index: 5; padding: 0 56px 0 32px; font-family: 'Titillium Web', sans-serif; font-weight: 600; }
.arrow{ display: block; position: absolute; top: 50%; right: 27px; z-index: 5; margin-top: -5px; width: 6px; height: 10px; .sprite; background-position: -70px -140px; .transition(all 200ms); }
.shadow{ position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: #0B0E2F; .transition(all 200ms); }
input{ position: relative; top: 0; left: 0; z-index: 5; padding: 0 56px 0 32px; border: none; background: none; color: #fff; font-family: 'Titillium Web', sans-serif; font-size: 14px; font-weight: 600; cursor: pointer; height: 100%; }
&:hover{
.shadow{ height: 100%; background: #2F4ABC;}
.arrow{ .translate(5px, 0); }
}
}
// Banner
.banner{ position: relative; overflow: hidden; z-index: 1; margin: 0 auto; width: 100%; min-width: @sw; max-height: 600px; text-align: center;
img{ width: 100%; }
.layer{ position: absolute; top: 0; left: 1px; z-index: 3; width: 100%; }
&.preload{ background: #FFEE9F;
&.fork-truck{ background: none; }
}
}
#home .banner{ margin: 10% auto; min-width: 0; width: 50%; max-width: 900px; }
// Columns
.col{ width: @col; float: left;
&.w2{ width: @col*2; }
&.w3{ width: @col*3; }
&.w4{ width: @col*4; }
&.w5{ width: @col*5; }
&.pad{ padding-right: @pad }
&.pad_l{ padding-left: @pad }
&.float_r{ float: right; }
&.w2.short{ width: @col*2 - @pad; }
&.move_col_r{ margin-left: @col; }
}
// Standard text area's
.row{ padding-bottom: @v_space;
h1,h2{ position: relative; overflow: hidden; width: 100%; color: #0D57C1; font-size: 1.6em; font-weight: 400;
.arrow{ display: block; position: absolute; bottom: 100%; right: 0; width: 8px; height: 5px; .sprite; background-position: -50px -25px; .transition(bottom 400ms);}
strong{ font-weight: 600; }
.text{ display: block; position: relative; .translate(0,100%); .transition(all 400ms); }
.border{ display: block; width: 1%; height: 2px; background: #0D57C1; .transition(width 400ms);}
}
h3{ margin: 0 0 .2em; font-size: 1em; font-weight: 600; }
p,ul.list{ margin: 0 0 1.95em; line-height: 1.75;
strong{ color: #292B2D; }
}
p{ position: relative; left: -80px; .opacity(0); .transition(all 400ms); }
ul.ol{ float: left; margin: 0 0 1.95em; padding: 0; width: 100%; list-style: none; line-height: 1.75;
li{ float: left; width: 100%; }
.nr{ display: block; float: left; width: 10%; color: #0D57C1; font-family: 'Titillium Web', sans-serif; font-weight: 700; }
.text{ display: block; float: left; width: 90%; }
}
.cta_text{ display: block; margin-bottom: 1.2em; color: #0D57C1; font-size: 1.7em; font-family: 'Titillium Web', sans-serif; font-weight: 400; line-height: 1.4375em;
.arrow{ display: inline-block; margin: 0 0 5px 10px; width: 10px; height: 8px; .sprite; background-position: -50px -10px; }
&.small{ font-size: 1.4em; font-style: normal; font-weight: 400;
strong{ font-weight: 600; }
}
}
ul.list{ padding: 0; list-style: none;
li{ padding-left: 30px; .sprite; background-position: -10px -170px; background-repeat: no-repeat; }
}
.quote{ color: #0D57C1;
h3{ font-size: 1.1em; }
hr{ display: block; margin: 40px 0; width: 100%; height: 2px; border: none; background: #0D57C1; }
}
}
#contact .row{ margin-bottom: 0; padding-bottom: 60px;}
.show_content{
h1,h2{
.text{ display: block; position: relative; .translate(0,0); }
.border{ width: 100%; }
.arrow{ bottom: 10px; }
}
p{ left: 0; .opacity(1); }
}
#references {
.cta { margin-top: @v_space; }
.references{ float: left; padding: 0; margin: 60px 0; list-style: none;
li{ width: 33.33333%; float: left;
img{ margin: 5%; width: 90% }
}
}
}
.client_holder.no-margin-top{ margin-top: 0;}
#references .references.no-margin-top{ margin-top: 0;}
// Preload images
.preload{
img{ display: block; .opacity(0); .transition(opacity 600ms ease-in); width: 100%; -webkit-backface-visibility:hidden; }
&.resize{ background: none;}
}
// Forms
form{
.form-element{ position: relative; float: left; width: 100%; height: 50px;
label{ display: block; position: absolute; top: 15px; left: -140px; margin-bottom: 3px; width: 130px; color: #0D57C1; font-family: 'Titillium Web', sans-serif; font-weight: 700; font-size: .9em; text-transform: uppercase; line-height: 1; text-align: right; outline: none; letter-spacing: 0.06em; }
input,textarea{ position: relative; z-index: 5; padding: 10px; width: 100%; border: 3px solid #D9DEF8; background: #fff; color: #66686D; font-family: 'Montserrat', sans-serif; font-weight: 300; font-size: 13px; outline: none; .box-sizing(border-box); }
input{ height: 40px; line-height: 40px; }
textarea{ height: 130px; resize: none; }
select{ width: 300px; }
.error{ position: absolute; top: -18px; left: 0; display: block; width: 100%; color: #F2303F; font-size: 0.8em; }
.placeholder{ position: absolute; top: -2px; left: 12px; z-index: 15; color: #D9DEF8; font-size: 13px; line-height: 45px; }
&.focus{
input,textarea{ border: 3px solid #0D57C1; }
.placeholder{ color: #9BA0AE; }
}
&.textarea_holder{ height: 150px;}
&.error{ margin-top: 14px;
input,textarea{ border: 3px solid #F2303F; }
}
.customSelect { padding: 10px; width: 100%; border: 3px solid #D9DEF8; background: #fff url('/images/structure/select_arrow.svg') right center no-repeat; color: #66686D; font-family: 'Montserrat', sans-serif; font-weight: 300; font-size: 13px; letter-spacing: normal; }
.customSelect.customSelectHover { }
.customSelect.customSelectOpen {}
.customSelect.customSelectFocus { border: 3px solid #0D57C1;}
.customSelectInner { width: 100% !important; }
}
}
.thanks.inactive{ display: none; }
.form-element.message{ height: 150px }
// Streamer
.streamer_holder{ position: relative; z-index: 5; width: 100%; background: #EFF1F6; font-size: 1.4em;
h1 { font-size: 1.5em; font-weight: 600;}
.center{ padding-top: 30px; padding-bottom: 45px; max-width: 800px; }
p{ margin: 0; color: #383838; font-family: 'Titillium Web', sans-serif; font-weight: 300; line-height: 1.4375em; }
.btn{ margin-top: 24px; }
}
.agrimac {
background: #EFF1F6; padding: 0; margin: 0 auto 80px auto; width: 1120px;
.pad {
padding: 45px;
}
p {
left: 0;
opacity: 1;
width: 90%;
}
svg {
max-width: 250px;
margin-bottom: 15px;
margin-right: 40px;
.st0 {
fill: #96c346;
}
}
}
// Call to action
.cta{ float: left;
.info{ padding: 30px 20px; height: 246px; background: #FEDD33; color: #0D57C1;
.title{ display: block; margin-bottom: 20px; font-size: 1.5em; font-family: 'Titillium Web', sans-serif; font-weight: 600; }
.prop{ display: block; float: left; margin: 0 10px 10px 0; width: 24px; height: 24px; .sprite;
&.phone{ background-position: -10px -60px; }
&.mail{ background-position: -40px -60px; }
}
.value{ display: block; position: relative; top: 2px; left: 0; float: left; }
}
.preload{ overflow:hidden; }
}
.caption{ display: block; margin-top: 5px; font-size: .875em; color: #0D57C1; font-family: 'Titillium Web', sans-serif; font-weight: 600; }
.client_holder{ margin-top: 60px; }
// News holder / CTA Footer
.news_holder, .cta_footer{ display: block; position: relative; z-index: 5; cursor: pointer;
.bar{ width: 100%; background: #FEDD33; color: #0D57C1; font-family: 'Titillium Web', sans-serif; .transition(all 300ms);
.center{ padding-top: 36px; padding-bottom: 20px; height: 100%;}
.left{ float: left; width: @col; }
.right{ float: left; width: @sw - @col - (2*@pad);}
span{ display: block; }
.category{ font-weight: 700; font-size: 1.25em; text-transform: uppercase; }
.date, .read{ margin-top: 5px; font-size: .75em; font-weight: 700; text-transform: uppercase; }
.title{ margin: -9px 0 0; font-size: 1.5em; font-weight: 600; }
.read{ display: inline-block; position: relative; margin-top: 2px; .transition(all 300ms);}
.arrow{ display: inline-block; position: relative; margin-left: 5px; width: 10px; height: 8px; .sprite; background-position: -50px -10px; .transition(all 300ms); }
.plus{ display: block; position: absolute; top: 50%; right: @pad; margin-top: -16px; width: 32px; height: 32px; .sprite; background-position: -10px -10px; .transition(all 300ms); }
.message{ position: relative; overflow: hidden; margin: 20px 0 0; width: @col * 2; height: 0; .transition(height ease-out 300ms); font-family: 'Montserrat', sans-serif; line-height: 1.75; }
}
&:not(.open) .bar:hover{ background: #FED400;
.plus{ -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); }
.read, .arrow{ .translate(40px, 0); }
}
&.open .bar{
.message{ }
.plus{ .rotate(45deg); }
.read, .arrow{ .opacity(0) }
}
}
// Footer Call to action
.cta_footer{ margin: @pad 0 0; padding: 0; list-style: none;
.bar{ display: block; background: #EBEEF4;
.center{ padding-top: 56px; padding-bottom: 40px; }
.title{ font-weight: 600; width: 80%;
strong{ font-weight: 700;}
}
.large_arrow{ display: block; position: absolute; top: 50%; right: @pad; margin-top: -16px; width: 20px; height: 32px; .sprite; background-position: -70px -10px; }
}
li:nth-child(2n) .bar{ background: #FCFCFD; }
}
// Board Members
.board_members, .employees{ margin: 0; padding: 0; list-style: none; float: left;
li{ position: relative; overflow: hidden; float: left; width: @col;
img{ width: 100%; }
span{ display: block; }
.photo{ position: relative; z-index: 1; padding-bottom: 135.555555556%; width: 100%; height: 0; }
.photo.hover{ position: absolute; top: -100.1%; left: 0; z-index: 4; padding-bottom: 135.555555556%; height: 0; .opacity(0); }
.blur{ position: absolute; top: 0; left: 0; z-index: 5; width: 100%; height: 100%; background: #FED230; .opacity(.8); .transition(opacity 300ms);}
.name{ position: absolute; left: 0; bottom: 25px; z-index: 10; width: 100%; color: #fff; font-size: 1.25em; font-family: 'Titillium Web', sans-serif; font-weight: 600; text-align: center; text-shadow: 0px 0px 3px #000;}
&:hover{
.photo.hover{ .opacity(1); }
.blur{ .opacity(0); }
}
}
}
// Employees
.employees{ margin-top: 64px;
.blur{ background: #EBEEF4; }
.name{ color: #383838; bottom: 15px; font-size: 1em; }
}
#about .cta_text{ margin-top: @v_space; }
// Products
nav.products_list{ display: none; }
#sale_rental #sale_rental_navigation{ display: block; }
#projects #used_machines_navigation{ display: block; }
nav.products_list{ visibility:hidden; position: fixed; left: 50%; top: 160px; z-index: 10; .opacity(0); margin-left: (@sw / -2)+140px+@pad; font-family: 'Titillium Web', sans-serif; .transition(all 500ms);
.list_title{ display: block; position: relative; margin-bottom: 20px; width: 100%; font-size: 1.25em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3em; color: #0D57C1;
.overview{ display: block; position: absolute; right: -5px; top: 7px; width: 16px; height: 16px; .sprite; background-position: -10px -140px; .transition(opacity 400ms); cursor: pointer;
&.disabled{ .opacity(.3); cursor: default; }
}
}
ul{ margin: 0; padding: 0; list-style: none;}
li{ position: relative; width: 100%;
a{ display: block; position: relative; top: 0; left: -5%; padding: 0 5%; width: 110%; color: #0D57C1; font-weight: 600; line-height: 32px; }
&.active a{ background: #FEDD33; }
}
.arrow{ display: block; position: absolute; top: 50%; right: 0; margin-top: -4px; width: 5px; height: 8px; .sprite; background-position: -40px -140px;}
}
nav.products_list.mob{ display: none; }
#product, #sale_rental, #projects, #project, #heftrucks-gas, #heftrucks-elektrisch, #heftrucks-diesel, #ruwterrein-heftrucks, #overige, #projectDetail{
nav.products_list{ visibility:visible; .opacity(1); }
}
// Product thumbs
.product_thumbs{ margin: @v_space 0 60px; padding: 0; list-style: none; float: left;
@thumb: (@col*4 - @pad - (16*2)) / 3;
li{ display: block; position: relative; float: left; margin: 0 16px 30px 0; width: @thumb; height: @thumb;
&:nth-child(3n){ margin-right: 0; }
&:hover{
.image img { border-color: #0D57C1; }
.title{ text-decoration: underline}
}
}
a{ display: block; }
.image{ position: relative; z-index: 1; width: 100%; height: 100%; overflow: hidden;
img{ display: block; border: 1px solid #DDE2ED; width: 100%; .transition(border-color 300ms ease-out);
}
}
.title{ position: absolute; bottom: -20px; left: 0; z-index: 5; width: 100%; }
}
// Product btn to overview small
.show_overview_holder{ display: none; }
#sale_rental .cta{ margin-bottom: @v_space; }
.product_intro{ background: #F7F8FA; margin-bottom: 40px;
.row{ margin-top: 0; margin-bottom: 0; padding: 40px @pad 24px;}
}
article.product_row{ border-bottom: 2px solid #DDE2ED; margin-bottom: 40px;
h3{ margin-bottom: 1em; color: #0D57C1; font-size: 1.375em; font-family: 'Titillium Web', sans-serif; font-weight: 600;}
ul{ margin-bottom: 40px; }
.cta_text{ margin: 40px 0; }
.btn{ margin-bottom: 40px;}
}
// Google maps
.maps_holder{ position: relative; overflow: hidden; z-index:100; width:100%; height: 0; background: #fff; .transition(height ease-out 600ms);
a{ display: block; margin: 10px auto; width: @sw * 0.75; }
}
#map_canvas{ margin: 0 auto; width: @sw * 0.75; height: 400px; }
#contact .maps_holder, .maps_holder.show{ height: 380px; }
.maps_clicker{ display: block; cursor: pointer}
.double-arrow{ display: inline-block; margin: 0 0 0 2px; width: 10px; height: 8px; .sprite; background-position: -50px -10px;
&.bc { position: relative; top: -1px; margin: 0 5px; }
}
// Footer
footer{ padding: 58px 0 64px; background: #FEDD33; color: #0D57C1;
@footerCol: ((@sw - 2*@pad) / 20) * 5;
.col.w3{ margin-left: (@sw - 2*@pad) / 5 }
.col_l{ float: left; width: @footerCol; }
.col_r{ float: right; width: @footerCol; }
.title{ font-size: 1.2em; font-weight: 600; line-height: 1.272727273; }
p{ position: relative; margin: 17px 0 12px; line-height: 1.75; width: 100%; }
hr{ display: block; width: 100%; height: 3px; border: none; background: #0D57C1; }
.maps_btn{ display: block; position: absolute; right: 0; bottom: 7px; width: 24px; height: 32px; .sprite; background-position: -70px -60px; }
.copyright,.komma{ display: block; margin-top: 24px;
.logo{ display: inline-block; margin-right: 2px; .sprite; }
.text{ display: inline-block; font-family: 'Titillium Web', sans-serif; font-size: .9em; line-height: 1.266666667em; }
strong{ display: block; font-size: 1.153846154em; }
}
.copyright{
.logo{ position: relative; top: 1px; left: 0;width: 51px; height: 30px; background-position: -80px -100px; }
}
.komma{
.logo{ position: relative; top: 4px; left: 0; width: 32px; height: 32px; background-position: -100px -60px; }
}
.submenu{ display: block; margin-top: 50px; width: 100%; text-align: center; font-size: .875em; font-weight: 400; font-family: 'Titillium Web', sans-serif;
ul{ display: inline-block; margin: 0; padding: 0; list-style: none; line-height: 1;}
li{ display: inline-block; padding: 0 20px; border-left: 2px solid #0D57C1;
&:nth-child(1){ border: none; }
}
}
}
#sale_rental footer{
.col.w3{ margin-left: (@sw - 2*@pad) / 5 + @pad; width: @col*4 - @pad; }
.col_l, .col_r{ width: @col*2 - @pad; }
}
.no_transitions,.load_transitions{
-webkit-transition: none !important;
-moz-transition: none !important;
-o-transition: none !important;
-ms-transition: none !important;
transition: none !important;
}
.sitemap{ line-height: 2em;
a:hover{ text-decoration: underline;}
}
// Aside menu
@navClosed : 60px;
@asideSpeed : 500ms;
body.auto_nav{ padding-left: @navClosed;
header.main{ padding-left: @navClosed; height: 60px; .transition(all @asideSpeed);
.logo{ margin-top: 13px; }
}
.breadcrumb_holder{ padding-left: @navClosed; .transition(all @asideSpeed); }
aside.nav{ display: block; width: @navClosed; .transition(all @asideSpeed);
.title{ display: none; }
.icon{ display: block; margin: 20px 15px 56px; width: 30px; height: 20px; .sprite; background-position: -100px -140px; }
ul{ .translate(60px,0); .transition(transform @asideSpeed);}
li.active{
.bg{ .opacity(0); }
}
}
nav.products_list{ margin-left: (@sw / -2) + (@navClosed / 2) + @pad; }
#wrap{ .transition(all @asideSpeed); }
&.open_nav{
//#wrap{ position: fixed; width: 100%; height: 100%; }
aside.nav{ position: absolute; width: @aside;
ul{ .translate(0,0); }
li.active{
.bg{ .opacity(1); }
}
}
header.main{ .translate(( @aside - @navClosed ),0); }
.breadcrumb_holder{ .translate(( @aside - @navClosed ),0); }
nav.products_list{ margin-left: (@sw / -2) + (@aside / 2) + @pad; }
#wrap{ position: fixed; width: calc(~'100% - 60px'); height: 100%; overflow: hidden; .translate( ( @aside - @navClosed ),0); }
#content{ position: fixed; width: 100%; }
}
}
// Aside menu touch devices
@navClosed : 0;
html.touch{
body.auto_nav{ padding-left: @navClosed;
.icon{ display: none;}
header.main{ padding-left: 60px; }
aside.nav{ padding-top: 60px; width: @navClosed; }
.breadcrumb_holder{ padding-left: 60px; }
nav.products_list{ margin-left: 0; left: 60px; }
&.open_nav{
aside.nav{ width: @aside; }
header.main{ .translate(( @aside - @navClosed ),0); }
.breadcrumb_holder{ .translate(( @aside - @navClosed ),0); }
#wrap{ .translate( ( @aside - @navClosed ),0); }
}
}
.row{ margin-bottom: @v_space;
h1,h2{
.text{ display: block; position: relative; .translate(0,0); }
.border{ width: 100%; }
.arrow{ bottom: 10px; }
}
p{ left: 0; .opacity(1); }
}
//#mob_nav{ display: block !important; position: fixed; top: 0; left: 0; z-index: 1000; width: 60px; height: 60px; background: #0D57C1; }
}
// Responsive class
#responsive
{
.set(@sw,@pad,@aside)
{
@col: ((@sw - 2*@pad) / 5);
//@c: ~"calc( ( @{sw} - 2 * @{pad} ) / 5 )";
@v_space : @pad;
body{ padding-top: 60px; padding-left: @aside; }
header.main{ padding-left: @aside; height: @v_space;
.phone{ line-height: @v_space; }
}
.breadcrumb_holder{ top: @v_space; padding-left: @aside; }
aside.nav{ width: @aside;
.title{ height: @v_space; line-height: @v_space; }
.logo_large{ width: @aside - 40px; }
}
section.full{ padding: @v_space 0 0; }
#loader{ margin-left: (@aside/2); }
.banner{ min-width: @sw; }
#home .banner{ min-width: 0; }
.center{ padding-right: @pad; padding-left: @pad; width: @sw; }
.agrimac {padding: 0; width: calc(@sw - 120px); min-width: 260px;}
.col{ width: @col;
&.w2{ width: @col * 2; }
&.w3{ width: @col * 3; }
&.w4{ width: @col * 4; }
&.w5{ width: @col * 5; }
&.pad{ padding-right: @pad }
&.pad_l{ padding-left: @pad }
&.w2.short{ width: @col * 2 - @pad; }
&.move_col_r{ margin-left: @col; }
}
.row{ margin-bottom: @v_space; }
.news_holder, .cta_footer{ .bar{
.left{ width: @col; }
.right{ width: @sw - @col - (2*@pad); }
.plus{ right: @pad; }
}}
.board_members, .employees{
li{ width: @col; }
}
nav.products_list{ margin-left: (@sw / -2)+140px+@pad; }
@thumb: (@col * 4 - @pad - (16*2)) / 3;
.product_thumbs li{ width: @thumb; height: @thumb;}
.cta_footer{ margin-top: @pad;
.large_arrow{ right: @pad; }
}
footer{
@footerCol: ((@sw - 2 * @pad) / 20) * 5;
.col.w3{ margin-left: (@sw - 2 * @pad) / 5 }
.col_l{ width: @footerCol; }
.col_r{ width: @footerCol; }
}
#sale_rental footer{
.col.w3{ margin-left: (@sw - 2*@pad) / 5 + @pad; width: @col*4 - @pad; }
.col_l, .col_r{ width: @col * 2 - @pad; }
}
.product_intro{
.row{ padding: 40px @pad 24px;}
}
#references .cta{ margin-top: @v_space; }
#about .cta_text{ margin-top: @v_space; }
@navClosed : 60px;
body.auto_nav{ padding-left: @navClosed;
header.main{ padding-left: @navClosed; height: @v_space; }
.breadcrumb_holder{ top: @v_space; padding-left: @navClosed; }
aside.nav{ width: @navClosed;
ul{ .translate(@navClosed,0); }
}
nav.products_list{ margin-left: (@sw / -2) + (@navClosed / 2) + @pad; }
&.open_nav{
//#wrap{ position: fixed; width: 100%; height: 100%; }
aside.nav{ width: @aside; }
header.main{ .translate(( @aside - @navClosed ),0); }
.breadcrumb_holder{ .translate(( @aside - @navClosed ),0); }
nav.products_list{ .translate( ( @aside - @navClosed ),0); }
#wrap{ .translate( ( @aside - @navClosed ),0); }
#content{ .translate( ( @aside - @navClosed ),0); }
}
}
}
.setAlt(@sw,@pad,@aside)
{
@col: ((@sw - 2*@pad) / 5);
// Product
@thumb: (@col * 5 - (16*2)) / 3;
.product_thumbs li{ width: @thumb; height: @thumb;}
// Footer
footer{
.col.w3{ margin-left: 0; }
.col_l{ width: 45%; }
.col_r{ width: 45%; }
}
#sale_rental footer{
.col.w3{ margin-left: 0; width: 100%; }
.col_l, .col_r{ width: 45%; }
}
article.product_row{ padding-bottom: 0;
.btn{ margin-bottom: 0; }
}
#support .cta{ float: none; }
.news_holder, .cta_footer
{
.bar
{
.center{ padding-top: 36px; padding-bottom: 35px;}
.left{ float: none; margin-bottom: 20px; width: @sw - @col - (2*@pad); }
}
}
}
}
// Media queries
@media screen and (max-width: 1560px)
{
#responsive > .set(1160px,60px,280px);
header.main .main_title{ padding-top: 0; }
header.main .logo{ margin-top: 13px; }
}
@media screen and (max-width: 1480px)
{
#responsive > .set(960px,60px,240px);
body{ font-size: 13px; }
}
@media screen and (max-width: 1240px)
{
aside.nav{
.logo_large{ display: none;}
}
html.touch #mob_nav{ display: block !important; position: fixed; top: 0; left: 0; z-index: 1000; width: 60px; height: 60px; background: #0D57C1; }
}
// Single column
@media screen and (max-width: 1020px)
{
#responsive > .set(700px,60px,240px);
#responsive > .setAlt(700px,60px,240px);
// Columns
.col{ width: 33.333333%; margin-bottom: 60px;
&.w2{ width: 66.666666%; }
&.w3{ width: 100%; }
&.pad{ padding-right: 0 }
&.pad_l{ padding-left: 0 }
&.no-margin{ margin-bottom: 0;}
}
.col:not(.not-100){ width: 100%; float: none;
&.w2{ width: 100%; }
&.w3{ width: 100%; }
&.w4{ width: 100%; }
&.w5{ width: 100%; }
&.pad{ padding-right: 0 }
&.pad_l{ padding-left: 0 }
&.w2.short{ width: 100%; }
&.move_col_r{ margin-left: 0; }
}
.row{ margin-bottom: 0; padding-bottom: 0}
.hide_on_small{ display: none; }
.show_small{ display: block; }
// Fix product page
#product, #sale_rental{ nav.products_list{ display: none; } }
nav.products_list.mob{ display: block; position: relative; left: 0; top: 0; }
// Fix form
form{
.form-element{ height: auto; margin-bottom: 20px;
label{ position: relative; top: 0; left: 0; text-align: left;}
.placeholder{ top: 12px; }
}
}
// Call to action
.cta .info{ height: auto; }
#sale_rental .show_overview_holder{ display: block; position: fixed; left: 60px; top: 60px; z-index: 100; width: calc(~'100% - 60px');; background: #F7F8FA; color: #0D57C1; line-height: 40px;
.center{ display: block; }
.icon{ display: inline-block; position: relative; top: 4px; left: 0; margin-right: 10px; width: 16px; height: 16px; .sprite; background-position: -10px -140px; }
}
}
@media screen and (max-width: 760px)
{
#responsive > .set(500px,60px,240px);
#responsive > .setAlt(500px,60px,240px);
// Fix header
header.main{
.phone{ display: none; }
}
#references .references li{ width: 50%; }
.col.not-100{ width: 100%; margin-bottom: 40px;
&.w2{ width: 100%; }
&.pad{ padding-right: 0 }
&.pad_l{ padding-left: 0 }
}
.hide_on_very_small{ display: none; }
.product_thumbs li{ margin-bottom: 30px;
.title{ position: relative; bottom: 0; font-size: .8em }
}
}
@media screen and (max-width: 560px)
{
#responsive > .set(260px,20px,200px);
#responsive > .setAlt(260px,20px,200px);
body.auto_nav
{
header.main{ height: 60px; }
}
header.main{
.center{ width: 100%; }
.main_title{ font-size: 1em; margin-right: 0; }
}
// Fix footer
.cta_footer .bar .large_arrow{ right: 0;}
.news_holder .bar .right, .cta_footer .bar .right{ width: 90%; }
#sale_rental footer, footer
{
.col_l, .col_r{ width: 100%; margin: 0 0 40px; }
.submenu li{ padding: 0 8px;}
}
#references .references li{ width: 100%; }
// Fix product thumbs
.product_thumbs li{ margin-right: 10px; width: calc(~'50% - 5px'); height: auto;
&:nth-child(3n){ margin-right: 10px; }
&:nth-child(2n){ margin-right: 0; }
}
.show_overview_holder{ font-size: .9em;}
}