/* *** html/body: 640px breedte van card garanderen i.c.m. 640 viewport *** */
@font-face {
font-family: "nunito";
src: url('fonts/nunito.ttf') format('truetype');
}
body, html
{
max-width: 640px;
width: 640px;
padding: 0px;
margin: 0px auto;
}
html
{
background-color: #ececec;
}
ul, menu, dir {
display: block;
list-style-type: disc;
margin-block-start: 0em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 24px;
}
li{
color: #395279;
text-decoration: none;
font-weight: normal;
}
body
{
background-color: #ececec;
margin: 0 auto;
padding: 0px;
font-family: 'nunito', sans-serif;
font-size: 12px;
}
/* *** Global *** */
img
{
border: 0px;
}
a, a:visited, a:active
{
color: #c60e3b;
}
a:active, a:focus
{
outline:none;
}
a:hover
{
color: #000000;
}
hr
{
margin: 0px;
margin-top: 10px;
margin-bottom: 10px;
padding: 0px;
}
h1
{
color: #c60e3b;
font-weight: normal;
font-size: 24px;
}
/* *** Card *** */
.company_color, .company_color:active, .company_color:visited
{
color: #c60e3b;
}
.nopasfoto {
background-color:#93031d;
width: 640px;
height: 400px;
position: absolute;
top: 100px;
left: 0;
z-index: -2;
}
.pasfoto
{
position: absolute;
left: 220px;
top: 100px;
width: 473px;
height: 315px;
padding: 0px;
z-index: -1;
}
.pasfoto_fg
{
display: none;
/*
position: absolute;
background-image: url('../images/layout/fg_pasfoto.png'); background-repeat: no-repeat; background-position: left top;
left: 446px;
top: 435px;
padding: 0px;
width: 159px;
height: 159px;
*/
}
.pasfoto img
{
width: 100%;
}
span.quote {
font-size: 32px;
color: #fff;
position: absolute;
top: 150px;
left: 50px;
width: 300px;
hyphens: auto;
}
.canvas
{
position: absolute;
background-color: #FFFFFF;
width: 640px;
height: 1165px;
}
.canvas_bg
{
position: absolute;
background-image: url('../images/layout/bg.png'); background-repeat: no-repeat; background-position: left top;
width: 640px;
height: 1165px;
overflow: hidden;
}
.header, .header2
{
position: absolute;
background-color: #ffffff;
width: 640px;
text-align: right;
}
.header, .header img
{
height: 343px;
}
.header2, .header2 img
{
height: 155px;
}
/* bovenste tekst met naam/functie */
.header_text
{
width: 520px;
color: #000000;
font-weight: normal;
font-size: 36px;
line-height: 40px;
}
.list_link{
color: #000000 !important;
text-decoration: none;
font-weight: normal;
}
.header_text b
{
color: #000000;
font-weight: bold;
font-size: 38px;
line-height: 50px;
}
/* alle tekst onder naam/functie */
.info
{
position: absolute;
left: 50px;
top: 430px;
width: 540px;
color: #1d1d1b;
font-size: 23px;
line-height: 30px;
font-weight: normal;
}
.info img
{
width: 20px;
height: 14px;
}
.info a, .info a:visited, .info a:active, .info a:hover
{
font-weight: bold;
color: #1d1d1b;
text-decoration: none;
}
.info .link_website, .info .link_website:active, .info .link_website:visited, .info .link_website:hover
{
color: #395279;
text-decoration: none;
font-weight: normal;
}
.mspan{
margin-right: 13px !important;
}
.espan{
margin-right: 17px !important;
}
.info span
{
color: #C1092B;
margin-right: 18px;
font-weight: bold;
}
.info_bedrijf
{
color: #C1092B !important;
}
.link_adres
{
text-decoration: none;
}
.info .textLink a {
font-size: 26px;
font-weight: bold;
color: #000000;
}
.info .textLink span {
color:#C1092B;
margin: 0px;
}
.info .textlink a:hover {
font-weight: bold;
color: #000000;
}
/* iconen en buttons behorende bij iconen */
.icons
{
position: absolute;
left: 50px;
top: 950px;
width: 520px;
}
.icons a {display:inline-block; margin-right: 20px; margin-top: 10px;}
.icons img
{
width: 64px;
height: 64px;
}
a.icon_qrcode {
top: -20px;
position: absolute;
left: 435px;
}
a.icon_qrcode img {
width: 110px;
height:110px;
}
.button_contact, .button_deel
{
position: absolute;
z-index: 11;
width: 64px;
height: 64px;
}
.button_deel
{
left: 460px;
top: 20px;
}
.button_contact
{
left: 540px;
top: 20px;
}
.button_contact img, .button_deel img
{
width: 64px;
height: 64px;
}
/* Custom buttons (zet background-color aan om ze te zien) */
#subLink1, #subLink1:active, #subLink1:visited,
#subLink2, #subLink2:active, #subLink2:visited,
#subLink3, #subLink3:active, #subLink3:visited,
#subLink4, #subLink4:active, #subLink4:visited,
#subLink5, #subLink5:active, #subLink5:visited
{
/* background-color: #FF0000; */
position: absolute;
display: block;
width: 150px;
height: 150px;
}
#subLink1 { left: 33px; top: 845px; }
#subLink2 { left: 236px; top: 845px; }
#subLink3 { left: 444px; top: 845px; }
#subLink4 { display: none; left: 257px; top: 887px; }
#subLink5 { display: none; left: 405px; top: 887px; }
/* vervolgpagina's */
.page
{
position: absolute;
left: 0px;
top: 150px;
width: 640px;
height: 649px;
}
.page2
{
position: absolute;
left: 0px;
top: 150px;
width: 560px;
height: 809px;
padding-left: 40px;
padding-right: 40px;
font-size: 15px;
}
/* Harmonica lijst van deel opties op /deel pagina */
.deel_list, .deel_list:visited, .deel_list:active
{
display: block;
margin-bottom: 20px;
color: #272727;
font-size: 22px;
text-decoration: none;
}
.deel_list img
{
width: 55px;
height: 55px;
margin-right: 8px;
vertical-align: middle;
}
.deel_link
{
display: block;
margin-bottom: 16px;
}
.extrabuttons
{
background-color: #FF0000;
position: absolute;
z-index: 13;
left: 155px;
top: 753px;
}
.extrabuttons img
{
margin-bottom: 16px;
margin-right: 5px;
height: 52px;
width: 110px;
}
/* Niet card specifieke css */
.mobicard_i
{
position: absolute;
left: 612px;
top: 1137px;
}
.mobicard_i img
{
width: 24px;
height: 24px;
}
.scrollbuttons
{
position: fixed;
z-index: 1000;
left: 96%;
top: 615px;
}
.company_titel
{
}
.company_titel img
{
width: 296px;
height: 63px;
}
.ruler
{
}
.ruler img
{
width: 296px;
height: 34px;
}
.spacer
{
height: 16px;
}
.spacer2 {
height: 5px;
}
.footer, .footer2
{
position: absolute;
left: 0px;
width: 600px;
padding: 20px;
color: #272727;
text-align: center;
font-size: 16px;
}
.footer
{
top: 810px;
}
.footer2
{
top: 950px;
}
.footer a, .footer a:visited, .footer2 a, .footer2 a:visited
{
color: #272727;
}
/* *** Forms *** */
.input_text
{
width: 100%;
margin-bottom: 16px;
margin-top: 6px;
padding: 5px;
font-size: 22px;
border: 1px solid #000000;
}
.input_textarea
{
border: 1px solid #000000;
width: 100%;
height: 100px;
margin-bottom: 16px;
margin-top: 6px;
padding: 5px;
font-size: 22px;
font-family: 'nunito', sans-serif;
}
.input_submit, .input_submit:visited, .input_submit:hover
{
display: inline-block;
background-color: #000000;
border: 1px solid #000000;
padding: 6px;
padding-left: 20px;
padding-right: 20px;
color: #FFFFFF;
font-size: 22px;
font-weight: normal;
text-decoration: none;
}
/* *** CV *** */
.cv_icons
{
position: absolute;
left: 20px;
top: 175px;
}
.cv_icons img
{
width: 55px;
height: 55px;
}
.icon_linkedin_cv
{
display: block;
width: 55px;
height: 55px;
/* border: 1px solid #ab8640; */
}
.cv_header
{
top: 156px;
width: 550px;
height: 77px;
padding-left: 90px;
padding-top: 17px;
font-size: 20px;
position: absolute;
background-repeat: no-repeat; background-position: left top;
color: #272727;
background-color: #ececec;
}
.cv_header b
{
font-size: 30px;
line-height: 30px;
font-weight: normal;
color: #c60e3b;
}
.cv_page
{
position: absolute;
background-color: #FFFFFF;
left: 0px;
top: 255px;
width: 600px;
padding: 20px;
color: #272727;
font-size: 20px;
line-height: 28px;
}
.cv_page h1
{
color: #272727;
padding: 0px;
padding-top: 5px;
margin: 0px;
margin-bottom: 12px;
font-weight: normal;
font-size: 30px;
line-height: 36px;
}
.cv_page h2
{
border-top: 2px solid #c60e3b;
padding: 0px;
margin: 0px;
margin-top: 20px;
padding-top: 20px;
color: #272727;
font-size: 18px;
}
.cv_ruler
{
border-bottom: 2px solid #c60e3b;
margin-bottom: 10px;
}
.button_cv
{
position: absolute;
z-index: 10;
left: 44px;
top: 386px;
}
.button_cv img
{
width: 77px;
height: 77px;
}
.arrow
{
background-image: url('../images/layout/cv_arrow.png'); background-repeat: no-repeat; background-position: left top;
margin-top: 5px;
padding-top: 0px;
padding-right: 0px;
padding-left: 24px;
}