File: D:/HostingSpaces/SBogers57/topsluchtfilters.nl/wwwroot/public/css/screen.less
@import 'mixins.less';
html{ width: 100%; height: 100%; }
body{ position: relative; overflow-y: scroll; margin: 0; min-width: 1000px; width: 100%; min-height: 100%; color: #555F68; font-size: 13px; font-family:'Proxima N W02 Reg',sans-serif; line-height: 1.538461538; letter-spacing: .02em; -webkit-overflow-scrolling: touch; }
a{ text-decoration: none; color: #387CE3; }
h1{ margin: 0 0 .5em 0; color: #387CE3; font-size: 1.615384615em; font-weight: normal;}
h2{ margin: 1.733333333em 0 .866666667em 0; color: #387CE3; font-size: 1.153846154em; font-weight: normal; font-family:'Proxima N W02 Smbd',sans-serif; }
img{ border: none; }
strong{ color: #454F56; font-family:'Proxima N W02 Smbd',sans-serif; font-weight: normal; }
figure{ position: relative; margin: 0; width: 100%; height: 100%; }
p a{ text-decoration: underline; }
/* Global Classes */
.clear{ display: block; clear: both; }
.sprite{ background: url('../images/structure/tops_sprite.png') }
.selection(#387CE3,#fff);
/* Structure */
#scroller{ position: relative; top: 0; left: 0; width: 100%; }
#wrapper{ position: fixed; top: 60px; left: 0; min-width: 1000px; width: 100%; }
#main{ position: absolute; top: 0; left: 0; width: 100%; min-height: 100%; }
#content_area{ position: relative; z-index: 10; margin: 0 auto; width: 980px; .transition(width,300ms); }
#content_area .shadow.vertical{ position: absolute; z-index: 200; top: 0; right: 0; width: 10px; height: 100%; background: url('../images/structure/sdw_left_o20_w10.png') repeat-y; }
.mobile{ display: none; }
/* Header */
header.main{ position: fixed; top: 0; left: 0; z-index: 150; min-width: 1000px; width: 100%; height: 60px; background: #387CE3;
.shadow{ position: absolute; left: 0; z-index: 100; bottom: -10px; width: 100%; height: 10px; background: url('../images/structure/sdw_down_o20_h10.png') repeat-x; }
.lang_holder{ position: absolute; right: 30px; top: 50%; margin-top: -9px; }
.lang_holder ul{ margin: 0; padding: 0; list-style: none; }
.lang_holder li{ display: block; float: left; .opacity(.5);
a{ display: block; color: #fff; padding-left: 3px; width: 21px; height: 16px; border-bottom: 2px solid #fff;}
}
.lang_holder .active{ .opacity(1); }
}
#logo_holder{ float: left; width: 183px; height: 100%; border-right: 1px solid #6398E6; .transition(background, 200ms);
a{ display: block; padding: 14px 30px 14px 20px; width: 133px; height: 32px;
&:hover{ background: #1F58DF; }
}
}
#logo{ display: block; width: 133px; height: 32px;
img {height: 100%;}
}
/* Main Menu */
nav.main{
ul{ display: block; float: left; margin: 0; padding: 0; list-style: none; }
li{ float: left; height: 60px; border-right: 1px solid #6398E6; line-height: 60px; }
a{ display: block; padding: 0 30px; height: 60px; color: #fff; font-size: .923076923em; font-family:'Proxima N W02 Smbd',sans-serif; text-transform: uppercase; letter-spacing: .04em; .transition(background, 200ms)}
.active a { background: #fff; color: #387CE3; }
li:not(.active):hover a { background: #1F58DF; }
}
/* Aside Call to action */
#aside_cta{ position: fixed; top: 120px; right: 0; width: 40px; z-index: 1000; }
#aside_cta ul, #home #slider_nav{ position: relative; margin: 0; padding: 0; width: 300px; list-style: none; }
#aside_cta li, #home #slider_nav li{ position: relative; left: 0; padding: 0; margin-bottom: 2px; width: 100%; height: 40px; white-space: nowrap; .transition(left, 300ms); }
#aside_cta li
{
a{ display: inline-block; background: #fff; width: auto; height: 40px; .transition(background, 300ms); }
.text{ display: inline; float: left; padding-right: 40px; color: #fff; line-height: 42px; font-family:'Proxima N W02 Smbd',sans-serif; }
.icon{ display: block; position: relative; float: left; width: 40px; height: 40px;
span{ display: block; position: absolute; top: 50%; left: 50%; .sprite(); }
.up{ position: relative; .transition(opacity, 300ms); }
.hover{ z-index: 5; .opacity(0); .transition(opacity, 300ms) }
}
.phone{
span{ margin: -8px 0 0 -3px; width: 7px; height: 16px; }
.up{ background-position: -220px -10px ; }
.hover{ background-position: -220px -30px ; }
}
.mail{
span{ margin: -6px 0 0 -8px; width: 17px; height: 13px; }
.up{ background-position: -240px -10px ; }
.hover{ background-position: -240px -30px ; }
}
.offer{
span{ margin: -9px 0 0 -6px; width: 15px; height: 18px; }
.up{ background-position: -270px -10px; }
.hover{ background-position: -270px -30px; }
}
&:hover{
a{ background: #387CE3 }
.icon .hover{ .opacity(1); }
.icon .up{ .opacity(0); }
}
}
#home #slider_nav{ position: fixed; top: 320px; right: 0; width: 40px; z-index: 1000; .transition(opacity, 300ms);
li span{ display: block; width: 40px; height: 40px; background: #fff; color: #387CE3; font-family:'Proxima N W02 Smbd',sans-serif; text-align: center; line-height: 40px; .transition(all, 300ms); }
li.active span{ color: #FF8600; }
&:not(.disabled) li:not(.active) span:hover{ background: #387CE3; color: #fff; cursor: pointer; }
&.disabled{ .opacity(0.5); }
}
/* Footer */
footer{ position: fixed; bottom: 0; left: 0; z-index: 150; overflow: hidden; min-width: 1000px; width: 100%; height: 2.307692308em;
.inner{ position: absolute; bottom: 0; width: 100%; height: 21em; background: #387CE3; }
.shadow{ position: absolute; left: 0; top: 0; z-index: 100; width: 100%; height: 10px; background: url('../images/structure/sdw_down_o20_h10.png') repeat-x; }
.copyright, .komma{ position: absolute; bottom: 6px; color: #C4D8F6; font-size: .846153846em; text-transform: uppercase; }
.copyright{ left: 20px; }
.komma{ right: 20px; color: #fff; .opacity(.7); .transition(opacity, 300ms);
.logo{ display: inline-block; position: relative; top: 2px; margin-right: 4px; width: 12px; height: 12px; .sprite(); background-position: -270px -110px;}
&:hover{ .opacity(1);}
}
.content{ margin: 0 auto; width: 780px; color: #C4D8F6;
.col{ display: block; float: left; margin: 0; padding: 0; width: 195px; list-style: none;
&.three{ width: 585px; }
&.four{ width: 780px; }
&.title{ margin: 20px 0 10px 0; border-bottom: 1px solid #6398E6; color: #fff; font-size: .846153846em; font-family:'Proxima N W02 Smbd',sans-serif; text-transform: uppercase; }
}
a{ color: #C4D8F6; .transition(color, 200ms);
&:hover{ color: #fff; }
}
}
}
.footer_btn{ display: block; position: fixed; bottom: 19px; left: 50%; overflow: hidden; z-index: 2000; margin-left: -11px; width: 22px; height: 22px; cursor: pointer;
.arrow{ display: block; position: absolute; top: 50%; left: 50%; margin: -4px 0 0 -5.5px; z-index: 10; width: 10px; height: 6px; .sprite(); background-position: -279px -88px; .transition(top, 300ms);
&.hover{ top: 150%; }
}
.bg{ display: block; position: absolute; top: 0; left: 0; width: 22px; height: 22px; .sprite(); background-position: -189px -10px; .transition(opacity, 300ms);
&.hover{ .opacity(0); z-index: 5; .sprite(); background-position: -250px -150px; }
}
&:hover{
.arrow{ top: -50%;
&.hover{ top: 50%; }
}
.bg{ .opacity(0);
&.hover{ .opacity(1); }
}
}
}
/* Backgrounds */
#ambiance{ position: fixed; top: 60px; left: 0; z-index: 100; overflow: hidden; height: 100%; .transition(left, 300ms);
img{ position: absolute; top: 0; left: 50%; height: 100%; }
.shadow{ position: absolute; z-index: 100; top: 0; right: 0; width: 10px; height: 100%; background: url('../images/structure/sdw_left_o20_w10.png') repeat-y;}
}
#pattern{ position: fixed; top: 60px; right: 0; height: 100%; background: url('../images/structure/pattern.jpg'); .transition(right, 300ms); }
/* Submenu */
#submenu{ position: absolute; top: 0; left: -110px; width: 220px; min-height: 100%; background: #387CE3; color: #fff; .transition(left, 300ms); .opacity(0);
.head_title{ display: block; padding-left: 40px; width: 180px; height: 59px; border-bottom: 1px solid #76A5E8; font-family:'Proxima N W02 Smbd',sans-serif; font-size: 1.153846154em; line-height: 60px; }
ul{ margin: 0; padding: 0; list-style: none;
li{ position: relative; overflow: hidden; border-bottom: 1px solid #4F8BE3; .transition(background, 300ms);
.title{ display: block; position: relative; padding-left: 40px; width: 180px; height: 39px; color: #fff; font-family:'Proxima N W02 Smbd',sans-serif; line-height: 42px; .transition(color, 300ms); }
.shadow{ display: block; position: absolute; bottom: -10px; left: 0; width: 100%; height: 10px; background: url('../images/structure/sdw_down_o7_h10.png') repeat-x; }
ul{ display: none; margin: 10px 0 20px 0; padding: 0; list-style: none;
li{ border: none;
a{ display: block; padding-left: 45px; height: 30px; color: #555F68; line-height: 30px;
&:hover{ color: #387CE3; }
}
&.active a{ color: #387CE3; font-family:'Proxima N W02 Smbd',sans-serif; }
}
}
&.active{ background: #F5F8FE;
ul{ display: block; }
.title{ background: #fff; color: #387CE3; }
}
&:not(.active):hover{ background: #fff;
.title{ color: #387CE3; }
}
&:hover ul li:hover{ background: none; }
}
}
}
/* Open Submenu */
.open_submenu{
#content_area{ width: 1200px }
#submenu{ left: 0; .opacity(1); }
#content{ margin-left: 220px; }
#ambiance{ left: -110px; }
#pattern{ right: -110px; }
}
/* Content */
#content{ position: relative; z-index: 10; float: left; width: 600px; min-height: 100%; background: #fff; .transition(margin-left, 300ms);
.shadow.vertical{ position: absolute; z-index: 10; top: 0; left: -10px; width: 10px; height: 100%; background: url('../images/structure/sdw_left_o20_w10.png') repeat-y; }
}
.breadcrumb{ margin-bottom: 30px; padding-left: 100px; width: 500px; height: 4.538461538em; border-bottom: 1px solid #DDDFE1; line-height: 4.538461538; white-space: nowrap;
.logo{ display: inline-block; width: 16px; height: 10px; .sprite(); background-position: -250px -110px; }
a{ color: #858585; font-size: 10px; text-transform: uppercase; }
.active{ color: #666; font-family:'Proxima N W02 Smbd',sans-serif; }
}
.mobile_submenu{ display: none; font-size: .846153846em; padding-bottom: 15px; border-bottom: 1px solid #DDDFE1;
ul{ display: inline; margin: 0; padding: 0; list-style: none; float: left; }
li{ display: inline; float: left; margin-right: 10px; }
.main{ font-weight: 600; }
.active a{ color: #387CE3; }
a{ color: #858585; }
a:hover{ color: #387CE3; }
}
#content_area article{ padding: 0 100px; }
article{
h1{ float: left; width: 200px;
&.wide{ width: 100% }
}
.intro{ font-family:'Proxima N W02 Smbd',sans-serif; }
.btn{ float: right; margin-bottom: 10px;
&.left{ float: left; }
}
}
// Small table (two columns)
ul.table{ float: left; margin: 0; padding: 0; list-style: none; border-top: 1px solid #DDDFE1;
li{ float: left; padding: 10px 0; border-bottom: 1px solid #DDDFE1;
.prop{ display: block; float: left; width: 200px; color: #387CE3; font-size: 0.8em; text-transform: uppercase; }
.value{ display: block; float: left; width: 200px; font-size: 0.9em; }
}
}
// Large table
table.data_table{ width: 100%; padding: 0; margin: 30px 0 0 0; font-size: 0.9em; table-layout: fixed;
tbody, tr{ width: 100%; }
tbody, tr, td{ margin: 0; padding: 0; .box-sizing(border-box); vertical-align: top; }
tr.heading{ margin-bottom: 10px; border-bottom: 1px solid #DDDFE1; font-family:'Proxima N W02 Smbd',sans-serif; color: #387CE3;}
&.equal_six td{ width: 16%; }
}
// Forms
form
{
.input_holder{ position: relative; float: left; margin-bottom: 10px; width: 100%; height: auto;
label{ display: block; position: relative; top: 10px; left: 0; float: left; margin-bottom: 0; width: 30%; font-family:'Proxima N W02 Smbd',sans-serif; font-size: 0.9em; line-height: 1; outline: none; }
input{ position: relative; z-index: 5; padding: 0 10px; width: 70%; height: 30px; border: 1px solid #E0E6EC; background: #fff; color: #555F68; font-family:'Proxima N W02 Reg',sans-serif; font-size: 13px; line-height: 30px; outline: none; .box-sizing(border-box); }
textarea{ position: relative; z-index: 5; padding: 10px; width: 70%; height: 130px; border: 1px solid #E0E6EC; background: #fff; color: #555F68; font-family:'Proxima N W02 Reg',sans-serif; font-size: 13px; outline: none; .box-sizing(border-box); resize: none; }
.placeholder{ position: absolute; top: 1px; left: 33%; z-index: 15; color: #C2C5C6; line-height: 30px; }
.error{ position: absolute; top: -15px; left: 0; display: block; float: left; margin-left: 30%; width: 70%; color: #F2303F; font-size: 0.9em;}
&.focus{
input,textarea{ border: 1px solid #387CE3; }
.placeholder{ color: #9BA0AE; }
}
&.textarea_holder{ height: 150px;}
&.error{ margin-top: 15px;
input,textarea{ border: 1px solid #F2303F; }
}
&.birthday{
display: none
}
}
}
/* Filter dashboard */
.filters_holder{ padding: 0 100px; border-top: 1px solid #DDDFE1;
h2{ margin-bottom: 30px; }
}
ul.filters{ position: relative; float: left; margin: 0 ; padding: 0; list-style: none;
li { position: relative; overflow: hidden; float: left; margin-bottom: 20px; margin-right: 40px; width: 180px; cursor: pointer;
figure{ position: relative; overflow: hidden; width: 180px; height: 180px;
img{ position: relative; width: 100%; .transform(scale(1)); .transition(transform,200ms); }
}
.title{ margin-top: 10px; color: #999FA4; height: 20px; width: 180px; text-align: center; }
.arrow{ position: absolute; top: 50%; left: 50%; margin: -11px 0 0 -11px; width: 22px; height: 22px;
.bg{ background-position: -160px -10px; width: 22px; height: 22px; .transition(opacity, 200ms); }
.bg_hover{ position: absolute; top: 0; left: 0; z-index: 10; width: 22px; height: 22px; background-position: -250px -150px; .opacity(0); .transition(opacity, 200ms); }
.icon{ position: absolute; top: 50%; left: 50%; z-index: 15; margin: -5px 0 0 -3px; width: 7px; height: 11px; background-position: -269px -129px; .transition(left, 200ms); }
.icon_hover{ position: absolute; top: 50%; left: -50%; z-index: 15; margin: -5px 0 0 -3px; width: 7px; height: 11px; background-position: -259px -129px; .transition(left, 200ms); }
}
span{ display: block; .sprite(); overflow: hidden; }
&:nth-child(2n){ margin-right: 0;}
&:hover{
.arrow{
.bg{ .opacity(0);}
.bg_hover{ .opacity(1);}
.icon{ left: 150%;}
.icon_hover{ left: 50%; }
}
figure img{ .transform(scale(1.03)) }
}
}
}
/* Button */
#content_area, #home{
.btn{ display: inline-block; position: relative; overflow: hidden; height: 30px; border-radius: 4px; line-height: 32px;
span{ display: block; }
.up, .hover{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.up{ z-index: 1; background: #FF8600; }
.hover{ z-index: 2; background: #39E271; top: -30px; .transition(top, 200ms); }
.arrow{ display: inline-block; position: relative; top: 1px; left: 0; z-index: 5; margin: 0 10px 0 -10px; width: 13px; height: 10px; .sprite(); background-position: -190px -40px;}
.label{ display: inline; position: relative; z-index: 5; padding: 0 15px; color: #fff; font-size: 12px; font-family:'Proxima N W02 Smbd',sans-serif; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
.arrow{ position: relative; top: 1px; left: 0; z-index: 5; margin: 0 0 0 10px }
}
input{ display: inline; position: relative; z-index: 5; padding: 0 15px; color: #fff; border: none; background: transparent; font-size: 12px; font-family:'Proxima N W02 Smbd',sans-serif; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; cursor: pointer; }
&:hover .hover{ top: 0; }
}
}
article .call_to_action{ display: block; margin: 2.307692308em 0;
.text{ float: left; width: 200px; color: #387CE3; font-size: 1.538461538em; line-height: 1.4; }
}
/* Call Us */
.call_us{ margin-top: 60px; padding: 40px 100px; width: 400px; border-top: 1px solid #DDDFE1;
.person{ float: left; width: 180px;
img{ display: block; position: relative; top: -10px; left: -10px; float: left; }
.info{ float: left; margin-top: -10px; padding: 0 0 10px 0; width: 180px; font-size: 1em; font-weight: 600; line-height: 1.2; text-align: center; }
.function{ color: #555F68;font-size: .909090909em; font-weight: 400;}
}
.phone{ float: left; margin-right: 40px; width: 180px; color: #387CE3; font-size: 1.4em; line-height: 1.4;
.streamer{ display: block; color: #555F68; margin-bottom: 20px; }
strong.blue{ color: #387CE3; }
strong{ white-space: nowrap;}
a:not(.btn){ text-decoration: underline;
}
.btn{ margin-top: 20px; }
}
}
#uses .call_us{ border-top: none; margin-top: 0; }
/* Sidebar */
#sidebar{ position: relative; float: left; width: 380px; min-height: 100%; background: #F5F3EF;
.shadow.vertical{ position: absolute; z-index: 100; top: 0; width: 10px; height: 100%; left: 0; background: url('../images/structure/sdw_right_o20_w10.png') repeat-y;}
.call_to_action{ width: 100%; height: 4.538461538em;
.text{ display: block; float: left; padding: 15px 0 0 20px; width: 50%; height: 60px; background: #387CE3; color: #fff; font-size: 1.153846154em; line-height: 1.1; .box-sizing(border-box);}
.phone{ display: block; float: left; padding: 3px 0 0 20px; width: 50%; height: 60px; background: #fff; color: #FF8600; line-height: 3.75; font-family:'Proxima N W02 Smbd',sans-serif; font-size: 1.230769231em; .box-sizing(border-box);
.icon{ display: inline-block; position: relative; top: 2px; left: 0; margin-right: 10px; width: 7px; height: 16px; .sprite(); background-position: -250px -60px; }
}
}
#slider{ position: relative; z-index: 150; width: 380px; height: 253px;
.images{ position: absolute; top: 0; left: 0; overflow: hidden; margin: 0; padding: 0; width: 100%; height: 100%; list-style: none;
li{ position: absolute; top: 0; left: 0; overflow: hidden; width: 100%; height: 100%; .transition(left, 600ms);
img{ position: absolute; top: 50%; left: 50%; }
}
.new{ left: 100%; }
.show{ left: 0; }
.hide{ left: -100%; }
}
}
#slider_nav{ position: absolute; top: 50%; left: 0; overflow: hidden; margin: -20px 0 0 0; padding: 0; width: 100%; height: 40px; list-style: none; .transition(opacity, 600ms);
.nav_btn{ position: absolute; width: 40px; height: 40px; background: #fff; cursor: pointer;
.icon{ display: block; position: absolute; top: 50%; left: 50%; margin-left: -2px; margin-top: -5px; width: 4px; height: 10px; }
}
&.disabled{ .opacity(0.5); }
}
}
#sidebar {
#next{ right: -40px; .transition(right, 200ms);
.icon{ .sprite(); background-position: -250px -90px; }
}
#prev{ left: -40px; .transition(left, 200ms);
.icon{ .sprite(); background-position: -250px -130px; }
}
#slider:hover{
#next{ right: 0; }
#prev{left: 0; }
}
}
#sidebar span#phone_en { font-size: 1em;}
.go_to{ display: block; margin: 0; padding: 0; list-style: none;
li{ width: 100%; }
ul{ display: block; margin: 0; padding: 0; list-style: none;
li{ display: block; position: relative; width: 100%; height: 60px; line-height: 60px; background: #F7F7F7; .transition(background, 200ms);
a{ display: block; padding-left: 90px; width: 290px; height: 60px; color: #666; .transition(color, 200ms); }
figure{ position: absolute; top: 0; left: 0; z-index: 10;width: 60px; height: 60px;
img{ width: 100%;}
}
.shadow{ display: block; position: absolute; left: 0; z-index: 100; bottom: -10px; width: 100%; height: 10px; background: url('../images/structure/sdw_down_o7_h10.png') repeat-x; }
&:hover{ background: #fff;
a{color: #387CE3;}
}
}
}
.title{ display: block; padding-left: 20px; width:100%; height: 40px; background: #387CE3; color: #fff; font-size: 1.076923077em; font-family:'Proxima N W02 Smbd',sans-serif; line-height: 40px; .box-sizing(border-box);
.shadow{ display: block; position: absolute; left: 0; z-index: 100; bottom: -10px; width: 100%; height: 10px; background: url('../images/structure/sdw_down_o10_h10.png') repeat-x; }
}
.certificate{ background: #74A2E6;
.icon{ display: block; position: absolute; top: 50%; left: 50%; margin: -11px 0 0 -8px; width: 15px; height: 22px; .sprite(); background-position: -270px -60px;}
}
.arrow{ display: block; position: absolute; top: 50%; right: 20px; margin-top: -5px; width: 13px; height: 10px; .sprite(); background-position: -171px -40px; }
}
.sitemap{ padding: 0 0 0 20px; font-family:'Proxima N W02 Smbd',sans-serif; font-size: 1.2em; list-style: none;
ul{ padding: 0; font-family:'Proxima N W02 Reg',sans-serif; font-size: 1em;
ul{ padding: 0 0 0 20px; font-size: .9em; list-style: disc;
ul{ font-style: italic; list-style: circle; }
}
}
}
.quote_holder{ display: block; margin: 30px 0; color: #387CE3; font-size: 1.1em;
strong{color: #387CE3; }
}
/* Home */
#home{
#cta{ display: block; position: fixed; bottom: 30px; left: 0; z-index: 1000; margin: 0; padding: 0; min-width: 1000px; width: 100%; height: 240px; list-style: none; background: #fff;
li{ display: block; position: relative; float: left; width: 25%; height: 100%;
a{ display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
&:hover{
.btn .hover{ top: 0;}
.title{ color: #39E271;}
}
}
}
.shadow{ display: block; position: absolute; top: 0; right: -10px; width: 10px; height: 100%; background: url('../images/structure/sdw_right_o20_w10.png') repeat-y;}
.title{ display: block; margin: 40px; color: #387CE3; font-family:'Proxima N W02 Smbd',sans-serif; font-size: 1.5em; line-height: 1.428571429; .transition(color, 200ms); }
.offer .title{ color: #FF8600; }
}
.offer .btn .up{ background: #FF8600; }
.btn{ position: absolute; bottom: 40px; left: 40px;
.up{ background: #387CE3; }
}
#slider{ position: absolute; top: 0; left: 0; overflow: hidden; margin: 0; padding: 0; width: 100%; height: 100%; list-style: none; .opacity(0);
li{ position: absolute; top: 0; left: 0; width: 100%; height: 100%;
figure{ position: absolute; top: 100%; left: 0; z-index: 1; margin: 0; height: 100%; width: 100%; overflow: hidden; .transition(top,750ms ease-in-out); }
img{ position: absolute; top: 0; left: 50%; width: 100%; }
&.new{
.text{ left: -500px; }
figure{ top: -100%; }
}
&.show{
.text{ left: 120px; }
figure{ top: 0; }
}
&.hide{
.text{ top: -500px; }
figure{ top: 100%; }
}
}
blockquote{ margin: 0; background: none; color: #387CE3; font-size: 2.307692308em;
.name{ display: block; margin-top: 10px; font-size: .555555556em; font-weight: 600; line-height: 1.2 }
.function{ display: block; margin-bottom: -10px;font-size: .444444444em; line-height: 1.2 }
}
.text{ position: absolute; top: 60px; left: 120px; z-index: 10; width: 400px; .transition(all, 750ms ease-out);
}
.btn{ position: relative; bottom: auto; left: auto; margin-top: 30px; }
}
.story{ position: relative; z-index: 100; margin: 300px 0 60px 120px; width: 400px; }
}
#responsive
{
// Resize content
.set_content(@holderW,@cW,@js)
{
@padding : (@holderW - @cW) /2;
#content{ width: @holderW; }
#content_area article{ padding: 0 @padding; width: @cW;}
.call_us{ padding: 40px @padding; width: @cW;}
.breadcrumb{ padding: 0 @padding; width: @cW; }
.filters_holder{ padding: 0 @padding; width: @cW; }
}
.set_content(@holderW,@cW,@js) when (@js)
{
#content{ width: auto; } // set width javascript
#content_area article{ margin: 0 auto; padding: 0; width: @cW; }
.call_us{ margin: 0 auto 30px; padding: 40px 0; width: @cW; }
.breadcrumb{ margin: 0 auto 30px auto; padding: 0; width: @cW; }
.mobile_submenu{ margin: 15px auto 30px; padding-left: 0; width: @cW; }
.filters_holder{ margin: 0 auto 30px auto; padding: 0; width: @cW; }
}
// Resize sidebar
.set_sidebar(@sbW, @titlePadding, @gotoPadding){
@imgR: 480 / 320;
/* Smaller sidebar */
#sidebar{ width: @sbW;}
.go_to .title{padding-left: @titlePadding; }
.go_to ul li a{ padding-left: @gotoPadding; width: @sbW - @gotoPadding; }
#sidebar #slider{ width: @sbW; height: @sbW / @imgR; }
}
// Footer
.relative_footer()
{
#main{ position: relative; }
#scroller{ position: relative; }
#wrapper{ position: relative; }
.footer_btn{ display: none; }
footer{ position: relative; bottom: 0; left: 0; z-index: 150; width: 100%; height: 21em;
.inner{ position: relative; bottom: 0; width: 100%; height: 21em; background: #387CE3; }
}
#home footer{ position: relative; margin: 0;}
}
}
// > 1600
@media screen and (min-width: 1600px)
{
@sbW: 480px;
@areaW: 600px;
#responsive > .set_content(@areaW, 400px, false);
#responsive > .set_sidebar(@sbW, 20px, 90px);
#content_area{ width: @areaW + @sbW}
.open_submenu #content_area{ width: @areaW + @sbW + 220px}
}
// < 1600
@media screen and (max-width: 1600px)
{
nav.main a{ padding: 0 20px; }
}
// < 1400
@media screen and (max-width: 1400px)
{
nav.main a{ padding: 0 15px; letter-spacing: 0; }
#home #cta .title{ font-size: 1.3em;}
}
// < 1250
@media screen and (max-width: 1250px)
{
/* Alternative header */
header.main{ height: 80px; }
#logo_holder{
a{ padding: 24px 30px 24px 20px;
&:hover{ background: transparent; color: #fff; }
}
}
nav.main
{
ul{ margin-top: 15px; }
li{ float: left; margin: 0 0 10px 20px; width: 150px; height: 19px; border-bottom: 1px solid #6398E6; border-right: none; line-height: 20px;
&:nth-child(5){ clear: left; }
}
a{ padding: 0; height: 20px; color: #C4D8F6; letter-spacing: 0; }
.active a { background: none; color: #fff; border-bottom: 1px solid #fff; }
li:not(.active):hover a { background: transparent; color: #fff; }
}
#installation a{ font-size: .9em; white-space: nowrap;}
#wrapper,#ambiance,#pattern{ top: 80px; }
/* Smaller content */
#responsive > .set_content(500px, 400px, false);
#content_area { width: 880px; }
.open_submenu #content_area{ width: 1100px }
/* Smaller submenu */
.open_submenu
{
#content{ margin-left: 180px; }
#ambiance{ left: -90px; }
#pattern{ right: -90px; }
}
#submenu{ left: -90px; width: 180px;
.head_title{ padding-left: 15px; width: 165px; }
ul li .title{ padding-left: 15px; width: 165px; }
ul li ul li a{ padding-left: 15px; }
}
/* Smaller sidebar */
#responsive > .set_sidebar(280px, 20px, 90px);
#sidebar .call_to_action .text{ padding: 15px 0 0 10px; font-size: 1em; }
#sidebar .call_to_action .phone{ padding: 3px 0 0 7px; font-size: 1.076923077em; }
#sidebar span#phone_en { font-size: 0.8em;}
/* Smaller content area */
#content_area { width: 780px; }
.open_submenu #content_area{ width: 960px }
/* Home */
#home #cta{ height: 200px; }
#home .btn{ left: 20px; bottom: 20px; }
#home #cta .title{ margin: 20px; }
#home .story{ margin: 300px 0 60px 40px; }
#home #slider li.show .text{ left: 40px; }
}
/* < 1000 */
@media screen and (max-width: 1000px)
{
@sbW: 300px;
@areaW: 100%;
header.main{ display: none;}
#wrapper,#ambiance,#pattern{ top: 60px; }
body, #wrapper{ min-width: 0; }
#ambiance, #pattern, #submenu{ display: none; }
#content_area{ margin: 0; width: 100%; }
.open_submenu #content_area{ margin: 0; width: 100%; }
.open_submenu #content{ margin-left: 0 }
.mobile_submenu{ display: block; }
#responsive > .set_content(100%, 400px, true);
#responsive > .set_sidebar(@sbW, 20px, 90px);
// Home
#home #slider{ position: relative; overflow: hidden; height: 320px; }
#home #slider_nav{ position: fixed; top: 120px; }
#home .story{ position: relative; width: 60%; margin: 0 auto; padding: 30px 0; }
#home #cta{ position: relative; bottom: 0; z-index: 1; margin: 0 20%; min-width: 0; width: 60%; height: auto;
li{ display: block; position: relative; float: none; margin-bottom: 30px; width: 100%; height: auto; border-bottom: 1px solid #F5F3EF;
a{ position: relative; }
}
.shadow{ display: none; }
.title{ position: relative; margin: 0 0 20px; padding-right: 30px; }
.btn{ position: relative; left: 0; bottom: 0; margin-bottom: 20px; }
}
footer{ min-width: 0; }
footer .content{ width: 90%; }
footer .content .col{ width: 25%; font-size: .846153846em; }
footer .content .col.three{ width: 75%; }
@import 'mobile.less';
}
/* < 750 */
@media screen and (max-width: 750px)
{
#wrapper{ position: relative; top: 0; margin-top: 60px; }
#responsive > .set_content(100%, 400px, false);
#responsive > .set_sidebar(100%, 20px, 90px);
#responsive > .relative_footer();
#sidebar .call_to_action{ display: none; }
#aside_cta{ display: none; }
#home #slider{ height: 240px;
.text{ top: 40px; }
}
#home .story{ width: 80%; }
#home #cta{ margin: 0 10%; width: 80%; }
.breadcrumb{ padding-top: 15px !important; padding-bottom: 15px !important; white-space: normal; line-height: 1.2; height: auto; }
#content_area .btn, #home .btn{ float: none;
&.left{ float: none;}
}
.call_us .phone{ margin-bottom: 30px; }
.fake_padding{ display: none; }
footer{ height: auto;
.inner{ height: auto; padding-bottom: 40px; }
}
}
/* < 500 */
@media screen and (max-width: 500px)
{
#responsive > .set_content(320px, 300px, false);
footer .inner{ height: auto; }
footer .content{ padding: 30px 0;}
footer .content .col{ padding: .6em 0; width: 100%; font-size: 1em; }
footer .content .col.title{ display: none; }
footer .copyright, footer .komma{ display: block; position: relative; top: 0; left: 0; margin-left: 5%; }
footer .komma{ padding-bottom: 40px; }
#home
{
#slider{ height: 180px;
li img{ }
blockquote{ font-size: 1.5em; line-height: 1.2;
.name{ font-size: .7em; }
.function{ font-size: .7em; }
}
}
#slider_nav{ display: none; }
}
}
// Set home height changes
@media screen and (max-height: 1035px) and (min-width: 1000px)
{
#home #cta{ position: relative; z-index: 1; bottom: 0;
li{ display: block; position: relative; float: left; width: 25%; height: 100%;
}
}
}
// Reset some touch stuff
#touch
{
.set(){
// Main divs to relative
#scroller{ position: relative; top: 0; left: 0; }
#wrapper{ position: relative; top: 0; left: 0; }
#main{ position: relative; top: 0; left: 0; }
// Footer
.footer_btn{ display: none; }
footer{ position: relative; bottom: 0; left: 0; z-index: 150; min-width: 0; width: 100%; height: auto;
.inner{ position: relative; bottom: 0; width: 100%; height: auto; background: #387CE3; }
}
#home footer{ position: relative; margin: 0;}
}
}
// iPad Landscape / Portrait
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
{
#touch > .set();
}
// iPad Landscape
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape){
body{ padding-top: 80px; }
#home{ padding-bottom: 50px; }
#pattern{ right: 0; }
.open_submenu #pattern{ right: 0; }
}
/* High Density */
@highDensity: ~"only screen and (-webkit-min-device-pixel-ratio: 1.5)",
~"only screen and (min--moz-device-pixel-ratio: 1.5)",
~"only screen and (-o-min-device-pixel-ratio: 3/2)",
~"only screen and (min-device-pixel-ratio: 1.5)";
@media @highDensity{
.sprite{ background: url('../images/structure/tops_sprite_2x.png'); background-size: 600px 360px;}
}
/* IPAD FIX */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
#home #slider{ margin-top: -480px; }
#home .story{ margin-top: 480px; }
}