File: D:/HostingSpaces/RaadzaamAdvies/raadzaam-advies.nl/wwwroot/css/style.css
/* =========================================================================================================== */
/* credits */
/* =========================================================================================================== */
/*
All CSS and Styling by Rik Jacobs
www.rikjacobs.com
*/
/* =========================================================================================================== */
/* comments */
/* =========================================================================================================== */
/* Colors: */
/* Dark Brown = #3c2d2c /*
/* Main Orange = #ee762e */
/* =========================================================================================================== */
/* css reset sheet */
/* =========================================================================================================== */
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; *behavior: url(js/boxsizing.htc);
}
html, body {
width:100%;
height: 100%;
font-family:Tahoma, Geneva, sans-serif;
font-size: 100%;
}
body { background-image:url(../img/bg.png); }
/* =========================================================================================================== */
/* fixes */
/* =========================================================================================================== */
/* IE no image borders when an a contains a href */
a img {
text-decoration: none;
border: 0 none;
}
.clear { clear:both; }
img, embed, object, video {
max-width: 100%;
}
/* =========================================================================================================== */
/* standards */
/* =========================================================================================================== */
/* FontSelection Coloration */
::selection {
background:#ee762e;
color:#fff;
}
moz::-moz-selection {
background:#ee762e;
color:#fff;
}
webkit::-webkit-selection {
background:#ee762e;
color:#fff;
}
hr {
background-image:url(../img/seperator.png);
background-repeat:no-repeat;
border:none;
background-color:transparent;
height:45px;
width:960px;
background-position:center;
}
.imageholder {
display: block;
width:200px;
height:200px;
position:relative;
background:#f8f8f8;
border: 1px solid #e9e8e8;
border-radius:100%;
padding:10px;
overflow:hidden;
}
.imageholder img { border-radius:100%; }
.image_right {
float:right;
margin:20px 0px 20px 20px;
}
.image_left {
float:left;
margin:20px 20px 20px 0px;
}
.floatRight { float:right!important; }
.floatLeft { float:left!important; }
.teammember {
position: relative;
width: 100%;
padding-left: 200px;
padding-top: 20px;
margin-bottom: 40px;
}
.teammember .img {
display: block;
width: 150px;
height: 150px;
position: absolute;
left: 0;
top: 0;
background:#f8f8f8;
border: 1px solid #e9e8e8;
border-radius:100%;
padding:10px;
overflow:hidden;
}
.teammember .img img { border-radius:100%; }
/* =========================================================================================================== */
/* fonts */
/* =========================================================================================================== */
@font-face {
font-family: 'allerbold';
src: url('../fonts/aller_bd-webfont.eot');
src: url('../fonts/aller_bd-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/aller_bd-webfont.woff2') format('woff2'),
url('../fonts/aller_bd-webfont.woff') format('woff'),
url('../fonts/aller_bd-webfont.ttf') format('truetype'),
url('../fonts/aller_bd-webfont.svg#allerbold') format('svg');
font-weight: normal;
font-style: normal;
}
/*
@font-face {
font-family: 'alleritalic';
src: url('../fonts/aller_it-webfont.eot');
src: url('../fonts/aller_it-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/aller_it-webfont.woff2') format('woff2'),
url('../fonts/aller_it-webfont.woff') format('woff'),
url('../fonts/aller_it-webfont.ttf') format('truetype'),
url('../fonts/aller_it-webfont.svg#alleritalic') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'allerbold_italic';
src: url('../fonts/aller_bdit-webfont.eot');
src: url('../fonts/aller_bdit-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/aller_bdit-webfont.woff2') format('woff2'),
url('../fonts/aller_bdit-webfont.woff') format('woff'),
url('../fonts/aller_bdit-webfont.ttf') format('truetype'),
url('../fonts/aller_bdit-webfont.svg#allerbold_italic') format('svg');
font-weight: normal;
font-style: normal;
}
*/
@font-face {
font-family: 'allerregular';
src: url('../fonts/aller_rg-webfont.eot');
src: url('../fonts/aller_rg-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/aller_rg-webfont.woff2') format('woff2'),
url('../fonts/aller_rg-webfont.woff') format('woff'),
url('../fonts/aller_rg-webfont.ttf') format('truetype'),
url('../fonts/aller_rg-webfont.svg#allerregular') format('svg');
font-weight: normal;
font-style: normal;
}
/*
@font-face {
font-family: 'aller_lightitalic';
src: url('../fonts/aller_ltit-webfont.eot');
src: url('../fonts/aller_ltit-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/aller_ltit-webfont.woff2') format('woff2'),
url('../fonts/aller_ltit-webfont.woff') format('woff'),
url('../fonts/aller_ltit-webfont.ttf') format('truetype'),
url('../fonts/aller_ltit-webfont.svg#aller_lightitalic') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'aller_lightregular';
src: url('../fonts/aller_lt-webfont.eot');
src: url('../fonts/aller_lt-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/aller_lt-webfont.woff2') format('woff2'),
url('../fonts/aller_lt-webfont.woff') format('woff'),
url('../fonts/aller_lt-webfont.ttf') format('truetype'),
url('../fonts/aller_lt-webfont.svg#aller_lightregular') format('svg');
font-weight: normal;
font-style: normal;
}
*/
i { font-style:italic; }
b { font-weight:bold; }
a {
font-size:0.75rem;
color:#3c2d2c;
}
a:visited { text-decoration:underline; color:#3c2d2c; }
a:hover { text-decoration:underline; color:#ee762e; }
a:active { text-decoration:none; color:#ee762e;}
p {
font-family:Tahoma, Geneva, sans-serif;
font-size:0.8rem;
line-height:1rem;
margin:10px 0px 20px 0px;
color:#3c2d2c;
}
h1 {
font-family: 'allerbold';
font-size:1.7rem;
color:#ee762e;
margin:10px 0px 20px 0px;
}
h2 {
font-family: 'allerbold';
font-size:1.2rem;
color:#3c2d2c;
margin:10px 0px 20px 0px;
}
h3 {
font-family:Tahoma, Geneva, sans-serif;
font-size:1em;
font-weight:bold;
color:#3c2d2c;
}
.page_inner ul {
list-style:disc;
}
.page_inner ul li {
margin-left:25px;
font-family:Tahoma, Geneva, sans-serif;
font-size:0.8rem;
line-height:1rem;
color:#3c2d2c;
}
/* =========================================================================================================== */
/* CONTENT */
/* =========================================================================================================== */
.mainwrapper {
position:relative;
width:100%;
height:auto;
}
.header_wrapper_outer {
position:fixed;
width:100%;
height:auto;
top:0;
overflow:hidden;
}
.header_wrapper_inner {
position:relative;
width:100%;
padding-top: 5px;
background:white;
overflow:hidden;
}
header {
position:relative;
width:960px;
margin:0 auto;
background:white;
z-index:5000;
overflow:hidden;
}
#menu_button {
position:absolute;
left:10px;
top:15px;
width:40px;
height:40px;
background-image:url(../img/menu_sprite.png);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
#menu_button:hover { cursor:pointer; }
#menu_button.active { background-position:0px 40px; }
#logo {
width:340px;
position:relative;
margin:0 auto;
}
nav {
width: 960px;
height:0px;
text-align: center;
overflow:hidden;
-webkit-transition: height 0.4s ease-in-out;
-moz-transition: height 0.4s ease-in-out;
-o-transition: height 0.4s ease-in-out;
transition: height 0.4s ease-in-out;
-webkit-backface-visbility: hidden;
}
nav.active { height:40px; } /* DEXE */
nav ul { display: inline-block; margin-top: 15px;}
nav ul li {
display: inline;
text-align: center;
height:20px;
width:auto;
float:left;
position:relative;
padding:0px 10px 0px 10px;
border-right:1px solid #ee762e;
}
nav ul li:last-child { border:none; }
nav a, nav a:hover, nav a:active, nav a:visited {
font-family:Tahoma, Geneva, sans-serif;
text-decoration:none;
color:#a4a3a3;
/*letter-spacing:0.2em;*/
}
nav a:hover { text-decoration:underline; /* color:#ee762e; */ }
.menu_shadow {
position:relative;
height:90px;
width:100%;
background-image:url(../img/menu_shadow.png);
background-position: center top;
background-repeat: repeat-x;
}
/* ===========================================================================================================================================*/
/* PAGES */
/* ===========================================================================================================================================*/
.page {
position:relative;
width:100%;
height:100%;
}
.page_inner {
position:relative;
margin:0 auto;
width:960px;
height:auto;
min-height:500px;
padding:100px 10px 30px 10px;
overflow:hidden;
}
#page1 {
height:670px;
background-image:url(../img/page1.png);
background-position:center bottom;
background-size:cover;
}
#page1 .page_inner { top:70px; }
#page4 .erkend-adviseur-logo { display: block; max-width: 100px; margin-top: 20px; }
#page5 .team-foto { display: block; position: relative; margin-bottom: 40px; }
#page5 ul {
margin:0px 0px 20px 0px;
list-style:none;
}
#page5 ul li {
margin-left:0px;
}
#page5 .contact { float:left; width:700px; padding-left:20px; }
/* HOMEPAGE QUICKLINKS */
/* =========================================================================================================== */
.grow { transition: all .2s ease-in-out; }
.grow:hover { transform: scale(0.98); }
.imagewrapper {
position:absolute;
display:block;
width:202px;
height:202px;
}
.quicklink {
width:202px;
height:202px;
position:relative;
background:#f8f8f8;
border: 1px solid #e9e8e8;
border-radius:100%;
padding:10px;
overflow:hidden;
}
.quicklink img { border-radius:100%; }
.imagewrapper span {
position:absolute;
bottom:32px;
left:-11px;
width:224px;
height:65px;
text-align:center;
background-image:url(../img/label.png);
background-repeat:no-repeat;
background-size:contain;
padding-top:15px;
font-family: 'allerregular';
font-style:italic;
font-size:20px;
color:white;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
#block1 { bottom:0; left:10px; }
#block2 { top:100px; left:22%; }
#block3 { top:100px; right:22%; }
#block4 { bottom:0; right:10px; }
/* =========================================================================================================== */
/* FOOTER */
/* =========================================================================================================== */
.footer_top {
position:relative;
width:100%;
height:48px;
background-image:url(../img/footer.png);
background-position:center bottom;
background-repeat:repeat-x;
}
.footer {
position:relative;
width:100%;
height:auto;
background:#3c2d2c;
}
footer {
position:relative;
margin:0 auto;
width:960px;
height:auto;
min-height:180px;
overflow:hidden;
}
.column {
position:relative;
width:220px;
min-height:100px;
height:auto;
float:left;
}
.column h3 { color:white; margin:0px 0px 10px 0px; }
.column ul li, .column ul li a {
color:white;
font-size:0.75rem;
line-height:1.6em;
}
#logo_footer {
width:320px;
height:70px;
position:relative;
}
.social { position:relative; margin-top:30px;}
.social a {
color:white;
float:left;
text-decoration:none;
}
.social a p {
color:white;
line-height:25px;
margin:0px 10px 0px 0px;
}
/* =========================================================================================================== */
/* MEDIA QUERIES */
/* =========================================================================================================== */
/* alles kleiner dan 1023px */
/* tablet portrait */
@media all and (max-width : 1023px) and (min-width : 768px ){
header, nav, .page_inner, footer, hr { width:100%; }
.menu_shadow { background-position: 0px 0px; }
#block1 { bottom:0; left:30px; }
#block2 { top:60px; left:19%; }
#block3 { top:60px; right:19%; }
#block4 { bottom:0; right:30px; }
.page_inner { padding:100px 30px 30px 30px; }
#page5 .contact { width:60%; }
footer { padding: 0px 30px; }
}
/* alles kleiner dan 767px */
/* kleine tablets */
@media all and (max-width: 767px) {
header, nav, .page_inner, footer, hr, .column { width:100%; }
.menu_shadow { background-position: 0px 0px; }
.page_inner {
min-height: initial;
}
nav ul { display:block; }
nav ul li {
display: block;
text-align: center;
height:40px;
width:100%;
float:none;
padding:0px;
border:none;
}
nav ul li a {
display:block;
width:100%;
height:40px;
line-height:40px;
}
nav.active { height:270px; }
#block1 { bottom:0; left:0px; }
#block2 { top:0px; left:0px; }
#block3 { top:0px; right:0px; }
#block4 { bottom:0; right:0px; }
.page_inner { padding:100px 30px 30px 30px; }
#page5 .contact { width:60%; }
footer { padding: 0px 30px; }
.imageholder { width:150px; height:150px; }
.image_right { margin:20px 0px 20px 20px; }
.image_left { margin:20px 20px 20px 0px; }
.imagewrapper { width:160px; height:160px; }
.quicklink { width:160px; height:160px; }
.imagewrapper span {
bottom:12px;
left:-8px;
width:175px;
height:65px;
padding-top:10px;
font-size:17px;
}
.column { min-height:0px; }
.footer_top { background-size:70%; height:24px; }
#navi_footer, #logo_footer { display:none; }
.social { float:none!important; margin:0px; }
.social a { float:none; }
.column { text-align:center; margin: 10px 0px 10px 0px; }
.column ul li, .column ul li { line-height:normal; margin:0px 10px 0px 10px; }
}
@media all and (max-width: 767px) {
.grow:hover { transform: scale(1); }
.quicklink { display:none; }
#blp, #ffa , #cont, #over { top:auto; right:auto; left:auto; bottom:auto; display:block; padding:0px; }
.imagewrapper { margin-bottom:10px; }
.imagewrapper, .imagewrapper span.label {
position:relative;
bottom:0;
left:0;
right:0;
width:100%;
height:50px;
background-image:none;
line-height:50px;
}
.imagewrapper span.label { background-color:rgba(238,118,46,0.8); float:left; padding:0px; }
}
/* alles kleiner dan 470px */
@media all and (max-width: 470px) {
.header_wrapper_outer {
-webkit-box-shadow: 0px 6px 9px 0px rgba(50, 50, 50, 0.5);
-moz-box-shadow: 0px 6px 9px 0px rgba(50, 50, 50, 0.5);
box-shadow: 0px 6px 9px 0px rgba(50, 50, 50, 0.5);
}
.imageholder, .menu_shadow { display:none; }
.header_wrapper_inner { padding:0px; }
#menu_button { position:relative; float:right; top:12px; left:auto; right:10px; width:30px; height:30px; background-size:30px 60px; }
#menu_button.active { background-position:0px 30px; }
#logo {
width: 240px;
margin: auto;
float: left;
top: 3px;
left: 10px;
margin-bottom: 10px;
}
.page_inner { padding:50px 10px 30px 10px; }
#page1 .page_inner { padding-top: 100px; }
#page1, #page1 .page_inner {
height:auto;
padding-left:0px;
padding-right:0px;
top:auto;
}
.teammember {
padding-left: 0;
padding-top: 0;
}
.teammember .img {
position: relative;
}
}