@import "elements.less"; @custom-color1: #e12314; /* top header */ @custom-color2: #06a1fb; /* header border/menu/luister btn */ @custom-color3: #ffda10; /* case header */ @custom-color4: #61c841; /* bestel btn */ @body-background: #ffffff; @body-text: #000000; @header-background: @custom-color1; @header-text: #ffffff; @header-content-background: #000000; @header-content-text: #ffffff; @header-content-border-sm: #333333; @header-content-border-big: @custom-color2; @menu-background: @custom-color2; @menu-text: #ffffff; @case-background: #efefef; @case-header-background: @custom-color3; @case-code-background: #000000; @case-header-text: #000000; @case-content-text: #000000; @case-luister-background: @custom-color2; @case-code-background: #000000; @case-order-background: @custom-color4; @font-big: 26px; @font-normal: 18px; @font-case-header: 16px; @font-code-case: 14px; @font-small: 12px; html, body, input, select, textarea {font-family: 'Oswald', sans-serif; margin: 0; padding: 0;} body {background:@body-background; color:@body-text; height: 100%;} h1, h2, h3, h4, h5, h6, p {padding:0; margin:0;} a {text-decoration: none;} img {display: inline-block;} .block-size {max-width:1200px; width:100%; margin:0 auto; position: relative;} header {background:@header-background; font-size:@font-big; text-align: center; color:@header-text; text-transform: uppercase;} #header-content {background: @header-content-background; color:@header-content-text; .clearfix; border-bottom:12px solid @header-content-border-big; img.logo {float:left; max-width:340px; width:36%; height: auto;} ul.uitleg {float:left; width:54%; padding-left: 10%; li {list-style-type:decimal; font-size: @font-big; font-weight: 300; padding: 10px 0; border-bottom:2px solid @header-content-border-sm;} } } #content-container {.clearfix; font-size:@font-normal; height: 100%; #menu {float:left; background:@menu-background; height: 100%; min-width:160px; width:18%; a {display: block; color:@menu-text; font-weight: 300; margin:10px 5%; text-transform: uppercase; span { display:inline-block; } img.cat-menu {width:22px; height: auto; margin:5px 3% 0 0; padding-top: 5px;} } } h1 {background: @custom-color1; font-size:@font-big; font-weight: 300; color:#fff; text-align: center;} #content {float:left; width:78%; margin:10px 0 10px 1%; .case {width:100%; background:@case-background; margin-bottom: 10px; .clearfix; .case-header {background:@case-header-background; text-transform: uppercase; .clearfix; img {float:left; width:22px; margin:2px 0.3% 0 0.3%;} h2 {float:left; width:68%; font-size:@font-normal; font-weight: 300; line-height: 26px;} .case-code {float:right; line-height:26px; width:12%; background:@case-code-background; color: @header-text; font-size: @font-code-case; font-weight: 300; text-transform: uppercase; text-align: center; letter-spacing: 0.05em; span {font-size: 0.9em;} } } img.cat-pic {float:left; width:12%; margin-right:1%;} p.omschrijving {float:left; width:60%; font-size:@font-small; margin: 4px 0; font-family: verdana, arial; overflow: hidden; padding-bottom: 3%;} .bellen {float:left; width:70%; text-align: center; h3 span.mobiel {display:none;} .telefoon {margin:2px; background:@body-background; border:1px solid @header-content-border-sm;} } .buttons {float:right; width:24%; .clearfix; &.nummer {width:12%; .bestel {width:100%;} } .luister, .bestel {float:right; width: 50%; border:none; cursor: pointer; img {width:100%; height: auto;} } .luister {background:@case-luister-background;} .bestel {background:@case-order-background; position: relative; span {display: block; width: 100%; position: absolute; bottom:25%; left:0; text-align: center; letter-spacing: -0.05em; text-transform: uppercase; font-size: 22px; color:#000; .rotation(-10deg);} } } } } } #footer {text-align: center; font-size: @font-small; font-weight: 300; font-family: arial; margin: 20px 0 10px 0; a {color:@case-luister-background;} } @media screen and (max-width: 768px) { #header-content {border-bottom:0;} #content-container { #menu {width:100%; text-align: center; a {border:1px solid white; display: inline-block; margin:5px 1.5%; padding: 2px 5px; img.cat-menu {display: none;} } } #content {width:98%;} } } @media screen and (max-width: 600px) { header {font-size:1em;} #header-content {text-align: center; img.logo {float: inherit; width: 50%;} ul.uitleg {float:inherit; width: 80%; padding-left: 10%; li {font-size: 1.2em; padding: 5px 0;} } } #content-container #content .case { .case-header .case-code {width:24%;} .bellen {width:60%;} .buttons { &.nummer {width:24%; .bestel {width:100%;} } .bestel span {font-size: 16px;} } } } @media screen and (max-width: 400px) { #content-container #content .case { .bellen {width:60%; h3 span.mobiel {display:inline;} } .buttons { &.nummer {width:24%; .bestel {width:100%;} } .luister, .bestel {width:100%; float: none;} .bestel span {font-size: 18px;} } } }