/* We like off-black for text. */ body, select, input, textarea { color: #555; /* height:100%; For parallax fixed backgrounds */ } /* You could turn this on to disable horizontal scrolling html, body { max-width:100%; overflow-x:hidden; } */ /* Custom text-selection colors */ ::-moz-selection{background: #ffde17; color: #fff; text-shadow: none;} ::selection {background: #ffde17; color: #fff; text-shadow: none;} /* j.mp/webkit-tap-highlight-color */ a:link {-webkit-tap-highlight-color: #ffde17;} ins {background-color: #ffde17; color: #000; text-decoration: none;} mark {background-color: #ffde17; color: #000; font-style: italic; font-weight: bold;} /* Mozilla doesn't style place holders by default */ input:-moz-placeholder { color:#a9a9a9; } textarea:-moz-placeholder { color:#a9a9a9; } /* Wrapper: which is used to center all content on the page */ .wrapper { position:relative; width:100%; margin:auto; overflow:hidden; /* To prevent any objects to be visible outside the boundaries of the wrapper */ } /* To use Rubik = font-family: 'Rubik', arial, sans-serif; */ /* Text in general, anywhere */ body p { font-family: 'Rubik', arial, sans-serif; font-size: 20px; color: #555; font-weight:300; line-height:1.4; text-decoration:none; } /* Scrolling trigger div*/ .scrolling_trigger{ position:relative; height:0px; margin:0; padding:0;} /* For in header */ .header_text { font-family: 'Rubik', arial, sans-serif; font-size: 16px; color: #555; font-weight:300; text-decoration:none; line-height:60px; } /* To make header logo float to left*/ .logo_parent_mobile { display:table; position: absolute; width: 50%; text-align: center; z-index: 1; } .logo_parent { display:table; position: absolute; width: 100%; text-align: center; z-index: 1; } .logo_parent img{ position: relative; width:120px; padding-top:15px; } .onlyLargeScreens{display:block;} .onlySmallScreens{display:none;} .onlyLargeScreens2{display:block;} .onlySmallScreens2{display:none;} /* Text and image for logo*/ .logo_text { font-family: 'Rubik', arial, sans-serif; font-size: 24px; color: #203F7D; font-weight:600; text-decoration:none; float:left; line-height:1.1; text-align:left; } .logo_text_below { font-family: 'Rubik', arial, sans-serif; font-size: 24px; color: #4089BA; font-weight:600; text-decoration:none; float:left; line-height:1.1; text-align:left; } .logo_image { position:relative; width:70px !important; height:75px !important; padding:0 !important; float:left; margin:7px 10px; } .logo_text_center { display: table-cell; vertical-align: middle; } /* For links in general */ a:visited {color: #555; text-decoration:underline;} a:hover {color: #4089BA; text-decoration:underline;} /* For links that should be clean */ .clean_link:link {text-decoration:none;color:#555;} .clean_link:visited {text-decoration:none;color: #555;} .clean_link:hover {text-decoration:none;color: #555;} .clean_link:active {text-decoration:none;color: #555;} .clean_link2:link {text-decoration:none;color: #555;} .clean_link2:visited {text-decoration:none;color: #555;} .clean_link2:hover {text-decoration:underline;color: #555;} .clean_link2:active {text-decoration:underline;color: #555;} /* For links that should be clean and lightblue or white */ .clean_link_blue:link {text-decoration:none;color: #4089BA;} .clean_link_blue:visited {text-decoration:none;color: #4089BA;} .clean_link_blue:hover {text-decoration:underline;color: #4089BA;} .clean_link_blue:active {text-decoration:underline;color: #4089BA;} .clean_link_blue2:link {text-decoration:none;color: #555;} .clean_link_blue2:visited {text-decoration:none;color: #555;} .clean_link_blue2:hover {text-decoration:underline;color: #555;} .clean_link_blue2:active {text-decoration:underline;color: #555;} .clean_link_white:link {text-decoration:none;color:white;font-weight:300;} .clean_link_white:visited {text-decoration:none;color:white;font-weight:300;} .clean_link_white:hover {text-decoration:underline;color:#4089BA;font-weight:300;} .clean_link_white:active {text-decoration:underline;color:#4089BA;font-weight:300;} .clean_link_white2:link {text-decoration:none;color:white;font-weight:300;} .clean_link_white2:visited {text-decoration:none;color:white;font-weight:300;} .clean_link_white2:hover {text-decoration:underline;color:#203F7D;font-weight:300;} .clean_link_white2:active {text-decoration:underline;color:#203F7D;font-weight:300;} .clean_link_white3:link {text-decoration:none;color:white;font-weight:300;} .clean_link_white3:visited {text-decoration:none;color:white;font-weight:300;} .clean_link_white3:hover {text-decoration:underline;color:white;font-weight:300;} .clean_link_white3:active {text-decoration:underline;color:white;font-weight:300;} /* For regular navigation buttons #nav a:link{text-decoration:none;color:white;font-weight:300;} #nav a:visited{text-decoration:none;color:white;font-weight:300;} #nav a:hover{text-decoration:underline;color:white;font-weight:300;} #nav a:active{text-decoration:underline;color:white;font-weight:300;} */ /* Fading underline */ #nav a:link { text-decoration:none;color:white;font-weight:300; border-bottom: 1px solid rgba(255,255,255,0); -webkit-transition: border 150ms ease; -moz-transition: border 150ms ease; -ms-transition: border 150ms ease; -o-transition: border 150ms ease; transition: border 150ms ease; } #nav a:visited { text-decoration:none;color:white;font-weight:300; border-bottom: 1px solid rgba(255,255,255,0); -webkit-transition: border 150ms ease; -moz-transition: border 150ms ease; -ms-transition: border 150ms ease; -o-transition: border 150ms ease; transition: border 150ms ease; } #nav a:hover { text-decoration:none;color:white;font-weight:300; border-bottom: 1px solid rgba(255,255,255,1); } #nav a:active { text-decoration:none;color:white;font-weight:300; border-bottom: 1px solid rgba(255,255,255,1); } #navL a:link { text-decoration:none;color:white;font-weight:300; border-bottom: 1px solid rgba(255,255,255,0); -webkit-transition: border 150ms ease; -moz-transition: border 150ms ease; -ms-transition: border 150ms ease; -o-transition: border 150ms ease; transition: border 150ms ease; } #navL a:visited { text-decoration:none;color:white;font-weight:300; border-bottom: 1px solid rgba(255,255,255,0); -webkit-transition: border 150ms ease; -moz-transition: border 150ms ease; -ms-transition: border 150ms ease; -o-transition: border 150ms ease; transition: border 150ms ease; } #navL a:hover { text-decoration:none;color:white;font-weight:300; border-bottom: 1px solid rgba(255,255,255,1); } #navL a:active { text-decoration:none;color:white;font-weight:300; border-bottom: 1px solid rgba(255,255,255,1); } /* Fading underlink link pre-footer */ .preFooter a:link { text-decoration:none;color:#413a11;font-weight:300; border-bottom: 1px solid rgba(65,58,17,0); -webkit-transition: border 150ms ease; -moz-transition: border 150ms ease; -ms-transition: border 150ms ease; -o-transition: border 150ms ease; transition: border 150ms ease; } .preFooter a:visited { text-decoration:none;color:#413a11;font-weight:300; border-bottom: 1px solid rgba(65,58,17,0); -webkit-transition: border 150ms ease; -moz-transition: border 150ms ease; -ms-transition: border 150ms ease; -o-transition: border 150ms ease; transition: border 150ms ease; } .preFooter a:hover { text-decoration:none;color:#413a11;font-weight:300; border-bottom: 1px solid rgba(65,58,17,1); } .preFooter a:active { text-decoration:none;color:#413a11;font-weight:300; border-bottom: 1px solid rgba(65,58,17,1); } /* Fading underline */ .footer1 a:link{ text-decoration:none;color:#231f20;font-weight:300; border-bottom: 1px solid rgba(35,31,32,0); -webkit-transition: border 150ms ease; -moz-transition: border 150ms ease; -ms-transition: border 150ms ease; -o-transition: border 150ms ease; transition: border 150ms ease; } .footer1 a:visited{ text-decoration:none;color:#231f20;font-weight:300; border-bottom: 1px solid rgba(35,31,32,0); -webkit-transition: border 150ms ease; -moz-transition: border 150ms ease; -ms-transition: border 150ms ease; -o-transition: border 150ms ease; transition: border 150ms ease; } .footer1 a:hover { text-decoration:none;color:#231f20;font-weight:300; border-bottom: 1px solid rgba(35,31,32,1); } .footer1 a:active { text-decoration:none;color:#231f20;font-weight:300; border-bottom: 1px solid rgba(35,31,32,1); } /* Fading underline */ .footer1 span a:link{ text-decoration:none;color:white;font-weight:300; border-bottom: 1px solid rgba(255,255,255,0); -webkit-transition: border 150ms ease; -moz-transition: border 150ms ease; -ms-transition: border 150ms ease; -o-transition: border 150ms ease; transition: border 150ms ease; } .footer1 span a:visited{ text-decoration:none;color:white;font-weight:300; border-bottom: 1px solid rgba(255,255,255,0); -webkit-transition: border 150ms ease; -moz-transition: border 150ms ease; -ms-transition: border 150ms ease; -o-transition: border 150ms ease; transition: border 150ms ease; } .footer1 span a:hover { text-decoration:none;color:white;font-weight:300; border-bottom: 1px solid rgba(255,222,23,1); } .footer1 span a:active { text-decoration:none;color:white;font-weight:300; border-bottom: 1px solid rgba(255,222,23,1); } /* For Verenigingen buttons */ #verenigingen_text a:link{text-decoration:none;color:#7e65a4;font-weight:300;} #verenigingen_text a:visited{text-decoration:none;color:#7e65a4;font-weight:300;} #verenigingen_text a:hover{text-decoration:underline;color:#7e65a4;font-weight:300;} #verenigingen_text a:active{text-decoration:underline;color:#7e65a4;font-weight:300;} /* For purple text link */ #horcenter_p_small a:link{text-decoration:none;color:#7e65a4;font-weight:300;} #horcenter_p_small a:visited{text-decoration:none;color:#7e65a4;font-weight:300;} #horcenter_p_small a:hover{text-decoration:underline;color:#7e65a4;font-weight:300;} #horcenter_p_small a:active{text-decoration:underline;color:#7e65a4;font-weight:300;} /* For purple text link */ .purplelink a:link{text-decoration:underline;color:#7e65a4;font-weight:300;} .purplelink a:visited{text-decoration:underline;color:#7e65a4;font-weight:300;} .purplelink a:hover{text-decoration:underline;color:#7e65a4;font-weight:300;} .purplelink a:active{text-decoration:underline;color:#7e65a4;font-weight:300;} /* For black / purple link */ #contact a:link{text-decoration:underline;color:#555;font-weight:300;} #contact a:visited{text-decoration:underline;color:#555;font-weight:300;} #contact a:hover{text-decoration:underline;color:#7e65a4;font-weight:300;} #contact a:active{text-decoration:underline;color:#7e65a4;font-weight:300;} /* For white/purple link */ .horvercenter_child2 a:link{text-decoration:none;color:white;font-weight:300;} .horvercenter_child2 a:visited{text-decoration:none;color:white;font-weight:300;} .horvercenter_child2 a:hover{text-decoration:underline;color:white;font-weight:300;} .horvercenter_child2 a:active{text-decoration:underline;color:white;font-weight:300;} /* The header of the website, in here, put logo and navigation buttons */ header { position:absolute; top:0px; width:100%; max-width:850px; height:74px; /* Set this equal to the height of the logo + its padding */ overflow:visible; z-index:5; left:50%; } #abs_header_center{ position:relative; left:-50%; } #black_gradient{ position:absolute; width:100%; height:73px; /* (Needs to be 1px less high than original image because otherwise, on mobile we get a bottom black line. */ top:0px; left:0px; background-image:url(../images/gradient_black.png); background-repeat:repeat-x; background-position:center top; z-index:4; border:0 !important; border:none !important; } /* Nav is where the navigation buttons are */ #nav { position:relative; width:auto; height:74px; /* Set this equal to the height of the logo + its padding */ float:right; display: table; z-index: 2; } /* navL is for menu items left of a centered logo*/ #navL { position:relative; width:auto; height:74px; /* Set this equal to the height of the logo + its padding */ float:left; display: table; z-index: 2; } /* Unordered List, horizontal */ #nav ul, #navL ul { list-style-type: none; display: table-cell; vertical-align: middle; } #nav ul li, #navL ul li { display: inline; list-style-type: none; padding:50px 38px; } /* For regular navigation with submenu */ /* Functionality submenu: display:none; when not hovered display:block; when hovered */ #menu li ul, #menuL li ul { position:absolute; top:85px; left:4px; width:auto; height:auto; padding:10px 10px 0 10px; background-color:white; text-align:center; border-radius:5px; display:none; } #menu li:hover ul, #menuL li:hover ul {display:block;} #menu li:active ul, #menuL li:active ul {display:block;} #menu li ul li, #menuL li ul li{ padding:0 20px; display:block; } /* 2nd submenu needs different position than 1st submenu and it needs the !important tag to overwrite the left definition in #menu li ul */ #submenu2{ left:126px !important; } /* Hero, which is an Id instead of a class for JS purposes */ #hero { position:relative; width:100%; height:700px; min-height:450px; background-position:center top; background-repeat:no-repeat; background-size:cover; box-sizing:border-box; left:0px; top:0px; } .hero_home {background-image:url(../images/photo/happy_dinner.jpg);} .hero_watch {background-image:url(../images/photo/SCURE_watch3.JPG);} .hero_app {background-image:url(../images/photo/app_hero.png);} .hero_aboutus {background:url(../images/photo/thumbs_up.jpg);} .hero_spitsbergen {background-image:url(../images/heros/hero_spitsbergen.jpg);} .hero_dag1 {background-image:url(../images/blog/small/IMG_20170329_125719.jpg);} .hero_dag2 {background-image:url(../images/blog/small/IMG_8408.jpg);} .hero_dag3 {background-image:url(../images/blog/small/glijbaan.JPG);} .hero_dag4 {background-image:url(../images/blog/small/20170402_PhotoOfTheDay-1.jpg);} .hero_dag5 {background-image:url(../images/blog/small/IMG_9191.JPG);} .hero_dag6 {background-image:url(../images/blog/small/20170403_PhotoOfTheDay-1.jpg);} .hero_dag7 {background-image:url(../images/blog/small/IMG_9357.jpg);} .hero_dag8 {background-image:url(../images/blog/small/20170408_PhotoOfTheDay-1.jpg);} .hero_dag9 {background-image:url(../images/blog/small/2017Svea_RunaS-20170406_IMG_0263.jpg);} .hero_dag10 {background-image:url(../images/blog/small/IMG_9515.jpg);} .hero_dag11 {background-image:url(../images/blog/small/20170408_PhotoOfTheDay-2.jpg);} .hero_dag12 {background-image:url(../images/blog/small/IMG_20170409_075436.jpg);} #hero_waves{ position:absolute; height:235px; width:100%; bottom:0px; background-position:right bottom; background-repeat:repeat-x; background-image:url(../images/hero_waves.png); z-index:2; } #hero_waves_white{ position:absolute; height:64px; width:100%; bottom:0px; background-position:right bottom; background-repeat:repeat-x; background-image:url(../images/hero_waves_white.png); z-index:3; } #arrow_down{ position:absolute; width:200px; height:auto; margin:0 auto; text-align:center; bottom:25px; z-index:10; left:50%; transform:translateX(-50%); } /* Transparant layer for over the hero image */ #transparant_layer{ position:absolute; left:0; right:0; top:0; bottom:0; z-index:0; /* http://angrytools.com/gradient/ */ background: -moz-linear-gradient(339deg, rgba(249,177,3,0.57) 0%, rgba(255,216,0,0.7) 100%); /* ff3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(249,177,3,0.57)), color-stop(100%, rgba(255,216,0,0.7))); /* safari4+,chrome */ background: -webkit-linear-gradient(339deg, rgba(249,177,3,0.57) 0%, rgba(255,216,0,0.7) 100%); /* safari5.1+,chrome10+ */ background: -o-linear-gradient(339deg, rgba(249,177,3,0.57) 0%, rgba(255,216,0,0.7) 100%); /* opera 11.10+ */ background: -ms-linear-gradient(339deg, rgba(249,177,3,0.57) 0%, rgba(255,216,0,0.7) 100%); /* ie10+ */ background: linear-gradient(111deg, rgba(249,177,3,0.57) 0%, rgba(255,216,0,0.7) 100%); /* w3c */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffd800',GradientType=1 ); /* ie6-9 */ } #transparant_layer2{ position:absolute; left:0; right:0; top:0; bottom:0; z-index:0; background-color:rgba(86, 78, 23, 0.46); } #transparant_layerPlus{ position:absolute; left:0; right:0; top:0; bottom:0; z-index:0; background-color:rgba(0,0,0,0.3); } .ilona_hero{ background-position:center top !important; background-image:url(../images/ilona_hero.jpg) !important; } /* Halfhero, which is an Id instead of a class for JS purposes */ #halfhero { position:relative; width:100%; height:400px; background-position:center center; background-image:url(../images/halfhero_gradient.jpg); background-repeat:no-repeat; background-size:cover; box-sizing:border-box; left:0; position:relative; text-align:center; min-height:370px; overflow:hidden; } /* Slogan in hero */ #slogan{ position: absolute; left:0px; top: 45%; transform: translateY(-50%); width:100%; height:auto; text-align:center; overflow:visible; z-index:999 !important; padding:140px 20px 0 20px; } #slogan h1 { font-family: 'Rubik', arial, sans-serif; font-size:48px; font-weight: 400; color: white; line-height:1.2; text-decoration:none; padding:0; -webkit-hyphens:manual; -moz-hyphens:manual; -ms-hyphens:manual; hyphens:manual; /* To hyphenate */ text-shadow: 0 0 5px rgba(255,255,255,0.5); } #slogan h2 { font-family: 'Rubik', arial, sans-serif; font-size: 27px; color:#231f20; font-weight:400; line-height:1.5; text-decoration:none; padding:0; -webkit-hyphens:manual; -moz-hyphens:manual; -ms-hyphens:manual; hyphens:manual; /* To hyphenate */ text-shadow: 0 0 5px rgba(255,255,255,1.0); } h3 { font-family: 'Rubik', arial, sans-serif; font-size: 35px; color:#231f20; font-weight:300; line-height:1.5; text-decoration:none; padding:0; -webkit-hyphens:manual; -moz-hyphens:manual; -ms-hyphens:manual; hyphens:manual; /* To hyphenate */ } h4 { font-family: 'Rubik', arial, sans-serif; font-size: 25px; color:#231f20; font-weight:400; line-height:1.5; text-decoration:none; padding:0; -webkit-hyphens:manual; -moz-hyphens:manual; -ms-hyphens:manual; hyphens:manual; /* To hyphenate */ } .preFooter p{ font-family: 'Rubik', arial, sans-serif; font-size:16px !important; color:#413a11 !important; font-weight:300; line-height:1.4em; text-decoration:none; } .preFooter span{ font-family: 'Rubik', arial, sans-serif; font-size:13px; color:#413a11; font-weight:300; line-height:1.4em; text-decoration:none; } .preFooter{ padding:5px 20px; } @media screen and (max-width:650px) { .preFooter{padding:5px 5px;} } /* Hero header media queries */ @media screen and (max-width:1100px) { #slogan h1 {font-size:40px;} #slogan h2 {font-size:25px;} } @media screen and (max-width:1000px) { #slogan h1 {font-size:37px;} #slogan h2 {font-size:23px;} h3 {font-size:33px;} h4 {font-size:22px;} } @media screen and (max-width:830px) { #slogan h1 {font-size:32px;} #slogan h2 {font-size:20px;} h3 {font-size:28px;} h4 {font-size:20px;} } @media screen and (max-width:710px) { #slogan h1 {font-size:28px;} #slogan h2 {font-size:20px;} h3 {font-size:26px;} } /*@media screen and (max-width:500px) { .article_fullwidth p{font-size:14px;} }*/ /* Slogan button */ #slogan_button{ position:absolute; width:165px; /* Adjust according to content, width:auto doesnt work in Chrome */ height:auto; bottom:-70px; right:0; } .youtube{ width:100%; height:500px; margin:0; padding:25px 0; text-align:center; } .blog_pic{ width:100%; height:auto; margin:0; padding:25px 0; text-align:center; } .blog_pic p{ text-align:center !important; } .blog_pic_full{ position:relative; width:100%; height:auto; padding:0; } .blog_pic_full img{width:100%;} .navi_button{ position:relative; width:100%; height:auto; padding:10px !important; -webkit-transition: background-color 150ms ease; -moz-transition: background-color 150ms ease; -ms-transition: background-color 150ms ease; -o-transition: background-color 150ms ease; transition: background-color 150ms ease; } .webwhaleLightB{background-color:#8db1d9;} .webwhaleLightB:hover{background-color:#363636;} .webwhaleMedB{background-color:#3184c0;} .webwhaleMedB:hover{background-color:#363636;} .webwhaleDarkB{background-color:#165fa8;} .webwhaleDarkB:hover{background-color:#363636;} .navi_button p{ font-family: 'Rubik', arial, sans-serif; font-size: 30px !important; font-weight:600 !important; line-height:1.0; text-decoration:none; text-align:center !important; color: white !important; } /* Blog header in hero */ #blog_header{ position: absolute; left:0; top: 50%; margin:0 auto; width:100%; height:auto; text-align:center; overflow:visible; transform: translateY(-50%); } #blog_header h1 { font-family: 'Rubik', 'Rubik', arial, sans-serif; font-size: 75px; color: white; line-height:1.0; text-decoration:none; padding:0 10%; -webkit-hyphens:manual; -moz-hyphens:manual; -ms-hyphens:manual; hyphens:manual; /* To hyphenate */ } #blog_header h4 { font-family: 'Rubik', 'Rubik', arial, sans-serif; font-size: 45px; color: white; line-height:1.2; text-decoration:none; padding:20px 10% 0 10%; -webkit-hyphens:manual; -moz-hyphens:manual; -ms-hyphens:manual; hyphens:manual; /* To hyphenate */ } #blog_header h3 { font-family: 'Rubik', arial, sans-serif; font-size:30px; font-weight:600; color: white; line-height:1.2; text-decoration:none; padding:12px 10%; -webkit-hyphens:manual; -moz-hyphens:manual; -ms-hyphens:manual; hyphens:manual; /* To hyphenate */ } #blog_header p { font-family: 'Rubik', arial, sans-serif; font-size: 20px; color: white; line-height:1.2; text-decoration:none; padding:0px 10%; -webkit-hyphens:manual; -moz-hyphens:manual; -ms-hyphens:manual; hyphens:manual; /* To hyphenate */ } .text h1 { font-family: 'Rubik', 'Rubik', arial, sans-serif; font-size: 75px; color: #3184c0; line-height:1.0; text-decoration:none; padding:10px 0; -webkit-hyphens:manual; -moz-hyphens:manual; -ms-hyphens:manual; hyphens:manual; /* To hyphenate */ } .button:link { font-family: 'Rubik', arial, sans-serif; font-size: 20px !important; font-weight:300; color: white !important; line-height:normal; text-decoration:none !important; padding:6px 17px; background-color:#3184c0; border:0; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; -webkit-transition: padding 150ms ease; -moz-transition: padding 150ms ease; -ms-transition: padding 150ms ease; -o-transition: padding 150ms ease; transition: padding 150ms ease; } .button:visited { font-family: 'Rubik', arial, sans-serif; font-size: 20px !important; font-weight:300; color: white !important; line-height:normal; text-decoration:none !important; padding:6px 17px; background-color:#3184c0; border:0; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; -webkit-transition: padding 150ms ease; -moz-transition: padding 150ms ease; -ms-transition: padding 150ms ease; -o-transition: padding 150ms ease; transition: padding 150ms ease; } .button:hover { font-family: 'Rubik', arial, sans-serif; font-size: 20px !important; font-weight:300; color: white !important; line-height:normal; text-decoration:none !important; padding:6px 22px; background-color:#165fa8; border:0; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; } .button:active { font-family: 'Rubik', arial, sans-serif; font-size: 20px !important; font-weight:300; color: white !important; line-height:normal; text-decoration:none !important; padding:6px 22px; background-color:#165fa8; border:0; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; } .button_below_p{ position:relative; width:250px; height:auto; padding:20px 0; left:0; } /* Klanten logo's */ .klant_logo{ position:relative; float:left; width:25%; height:180px; } img.grayscale { filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 3.5+, IE10 */ filter: gray; /* IE6-9 */ -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */ -webkit-transition: all .2s ease; /* Fade to color for Chrome and Safari */ -webkit-backface-visibility: hidden; /* Fix for transition flickering */ margin-top:5px; /* Below is for raise effect */ -webkit-transition: all 0.2s ease; /* Safari and Chrome */ -moz-transition: all 0.2s ease; /* Firefox */ -ms-transition: all 0.2s ease; /* IE 9 */ -o-transition: all 0.2s ease; /* Opera */ transition: all 0.2s ease; } img.grayscale:hover { filter: none; -webkit-filter: grayscale(0%); margin-top:0px; } .klant_logo a:link, a:visited, a:hover, a:active{text-decoration:none;border:0;} .klant_logo_inside{ position: absolute; top: 50%; transform: translateY(-50%); text-align:center; width:100%; padding:0 15px; } #klant_least_important{display:block;} #klanten_regular{display:block;} #klanten_mobile{display:none;} #klanten_minimobile{display:none;} #button{} /* For article containing text */ .text_home{padding:20px 20px !important;} .text{padding:50px 250px !important;} .text p{padding:7px 0 !important;} .lobster{ font-family: 'Rubik', 'Rubik', arial, sans-serif !important; font-size: 45px !important; color:#3184c0 !important; } .article a:link{text-decoration:underline;color:#165fa8;border:0;} .article a:visited{text-decoration:underline;color:#165fa8;border:0;} .article a:hover{text-decoration:none;color:#165fa8;border:0;} .article a:active{text-decoration:none;color:#165fa8;border:0;} /* Selling points style */ .sp_container{ position:relative; height:auto; width:25%; float:left; padding:0 20px; } .sp_image{ position:relative; text-align:center; margin:0px auto; } .sp_header{ position:relative; text-align:center; margin:0px auto; } .sp_header h2{ position:relative; text-align:center !important; margin:0px auto; color:#3184c0 !important; } .sp_text{ position:relative; text-align:center; margin:0px auto; } .sp_text p{ position:relative; text-align:center !important; margin:0px auto; } .sp_image img{width:60%;} #sp_regular{display:block;} #sp_mobile{display:none;} #sp_minimobile{display:none;} .sp_bg{ background-image:url(../images/sellingpoints_bg.png); background-repeat:no-repeat; background-position:center center; } /* Customer experience classes */ .exp_container{ position:relative; height:auto; width:33%; float:left; padding:0 20px; } .exp_image{ position:relative; text-align:center; margin:0px auto; } .exp_image img{width:37%;} .exp_header{ position:relative; text-align:center; margin:0px auto; } .exp_header h2{ position:relative; text-align:center !important; margin:0px auto; font-family: 'Rubik', arial, sans-serif !important; font-size:18px !important; color:white !important; font-weight:600 !important; line-height:1.4em !important; text-decoration:none !important; } #exp_bg{ position:absolute; width:400%; height:566px; top:50px; left:-140%; background-image:url(../images/exp_bg.png); background-repeat:repeat-x; background-position:right center; } .exp_text{ position:relative; text-align:center; margin:0px auto; } .exp_text p{ position:relative; text-align:center !important; margin:0px auto; color:white !important; } /* Extra padding for cool background */ .extra_padding{padding:120px 0 140px 0 !important;} /* Lobster header */ .header_lobster{ position:relative; width:100%; height:auto; text-align:center; padding:27px 0; } .header_lobster h2{ font-family: 'Rubik', 'Rubik', arial, sans-serif !important; font-size: 50px !important; color:#3184c0 !important; line-height:1.4em !important; text-decoration:none !important; padding:0 !important; font-weight:300 !important; padding:0 20px !important; } .header_lobster_ervaringen{ position:relative; width:100%; height:auto; text-align:center; padding:27px 0; } .header_lobster_ervaringen h2{ font-family: 'Rubik', 'Rubik', arial, sans-serif !important; font-size: 50px !important; color:white !important; line-height:1.4em !important; text-decoration:none !important; padding:0 !important; font-weight:300 !important; padding:0 20px !important; } /* Welcome text box */ .welcome_text { position:absolute; text-align:center; width:100%; height:auto; top:50%; left:50%; transform:translate(-50%, -50%); padding-bottom:110px; } /* welcome text box for halfhero */ .welcome_text_halfhero { position:absolute; text-align:center; width:100%; height:auto; top:50%; left:50%; transform:translate(-50%, -50%); padding-bottom:50px; } /* Hero logo (and its responsive variant) */ .hero_logo { padding:20px 0 0 0; max-width:75%; height:auto; } /* Layout for the hint arrow */ #arrow_link{ position:absolute; height:73px; width:73px; bottom:-35px; /*-35*/ left:50%; margin-left:-37px; z-index:15; } .arrow_hint { bottom:-50px; /*-50*/ height:88px; left:50%; margin-left:-37px; overflow:hidden; /* SHOULD BE HIDDEN */ position:absolute; width:74px; z-index:14; } .arrow_button{ position:absolute; left:0; top:0; width:73px; height:73px; } .icon_arrow_hint { background-repeat:no-repeat; width:32px; height:88px; position:absolute; left:21px; top:-5px; } /* The hint arrow animation code itself */ @keyframes arrow1 { 0% {background-position:0 0px; opacity:0;} 20% {background-position:0 35px; opacity:1;} 95% {background-position:0 35px; opacity:1;} 100%{background-position:0 35px; opacity:1;} } .smooth_scroll_1 { animation-name: arrow1; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function: ease-out; opacity:0; background-position:0 0px; } @keyframes arrow2 { 0% {background-position:0 35px; opacity:1;} 20% {background-position:0 70px; opacity:0;} 95% {background-position:0 70px; opacity:0;} 100%{background-position:0 70px; opacity:0;} } .smooth_scroll_2 { animation-name: arrow2; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function: ease-out; opacity:1; background-position:0 35px; } /* Layout for the CONTACT hint arrow */ .arrow_hint_contact { top:-100px; height:88px; left:50%; margin-left:-12px; overflow:hidden; /* SHOULD BE HIDDEN */ position:absolute; width:24px; } .icon_arrow_hint_contact { background-image:url(../images/arrow_stroke2.png); background-repeat:no-repeat; width:24px; height:88px; position:absolute; left:0; top:0; } /* Layout for box below hero */ #below_hero { position:relative; width:100%; height:auto; } .quarter{ position:relative; width:25%; float:left; } .quarter p{ font-family: 'Rubik', arial, sans-serif; font-size:22px !important; color:#7e65a4; font-weight:300; line-height:1.2em; text-decoration:none; text-align:center !important; padding:0px; } .quarterlogo{ position:relative; margin:auto; text-align:center; } /* 2 small rows below images below hero */ .text_below_2_rows{ clear:both; display:none; } /* For quotes and experiences by customers in a li tag*/ .quote{ font-family: 'Rubik', arial, sans-serif; font-size: 18px; color:#7e65a4; font-weight:300; line-height:1.6em; text-decoration:none; text-align:left; list-style-position:inside; background: url(../images/quote.png) no-repeat left center; padding: 15px 5% 15px 75px; } .customer{ font-family: 'Rubik', arial, sans-serif; font-size: 18px; color:#7e65a4; font-weight:300; text-decoration:none; text-align:left; height: 140px; line-height: 140px; white-space: nowrap; list-style-position:inside; padding-left:120px; } .customer img{display:none;padding:0 0 15px 0;margin:0 auto;} .ilonareindersrevet{background: url(../images/ilonareindersrevet.png) no-repeat left center;} .maxdefeber{background: url(../images/maxdefeber.png) no-repeat left center;} .blanco{background: url(../images/blanco.png) no-repeat left center;} .harriehunnekens{background: url(../images/harriehunnekens.png) no-repeat left center;} .center_fb{margin:0 auto;text-align:center;padding:20px 0;width:100%;} /* Text in article */ .article p, .article span { font-family: 'Rubik', arial, sans-serif; font-size:18px; color:#231f20; font-weight:300; line-height:1.4em; text-decoration:none; text-align:left; padding:0px; } .article_fullwidth p, .article_fullwidth span { font-family: 'Rubik', arial, sans-serif; font-size:16px; color:#231f20; font-weight:300; line-height:1.4em; text-decoration:none; padding:0px; } /* 2nd title in article */ .article h2 { font-family: 'Rubik', 'Rubik', arial, sans-serif; font-size: 30px; color:#555; font-weight:300; line-height:1.3em; text-decoration:none; padding:0; -webkit-hyphens:manual; -moz-hyphens:manual; -ms-hyphens:manual; hyphens:manual; /* To hyphenate */ } /* 2nd title in general*/ h2 { font-family: 'Rubik', 'Rubik', arial, sans-serif; font-size: 30px; color:#413a11; font-weight:300; line-height:1.4; text-decoration:none; padding:0; -webkit-hyphens:manual; -moz-hyphens:manual; -ms-hyphens:manual; hyphens:manual; /* To hyphenate */ } /* Add padding to article */ .padding {padding:20px 50px 20px 50px;} /* Article container, image and text */ .article { position:relative; width:100%; height:auto; max-width:1000px; margin:0 auto; padding:10px 0; } .article_fullwidth { position:relative; width:100%; height:auto; margin:0; padding:0; } .fullwidth_1000{ position:relative; max-width: 1000px; margin:0 auto; padding:35px 20px; overflow:hidden; /* Auto height on parent with floating children */ } .fullwidth_700{ position:relative; max-width: 700px; margin:0 auto; padding:35px 20px; } .text_center{ text-align: center; } .subHeroLogo{ position: relative; width: 80px; height: auto; margin-bottom:35px; } .YESlogo{ position: relative; width: 140px; height: auto; padding-top:20px; } .preFooterLogo{ position: relative; width: 80px; height: auto; margin-bottom:10px; } .bg_white{background-color:white;} .bg_red{background-color: red;} .bg_lightgrey{background-color:#f5f5f5;} .bg_gold{background-color:#baa624;} .bg_darkgold{background-color:#413a11;} .bg_lightgold{background-color:#eae4bd;} .bg_elderly{ background-position:center 30%; background-repeat:no-repeat; background-size:cover; background-image:url(../images/photo/happy_elderly4.jpg); } .text_white span{color:white !important;} .funcIcons{ position: relative; width: 100%; margin:0; padding:0 0 10px 0; overflow:hidden; /* Auto height on parent with floating children */ } .funcIcons div, .funcIcons button{ position:relative; float:left; width:16.6%; background-color: white; padding:0 5px; overflow:hidden; box-sizing: border-box !important; border:0; border-radius: 5px; } @media only screen and (max-width:650px) { .funcIcons div, .funcIcons button{width:33.3%; padding:0 1px;} } #box1, #box2, #box3, #box4, #box5, #box6{ max-height:0; transition: max-height 0.35s ease-out; overflow: hidden; width: 100%; padding-top:10px; } button#boxB_1:hover #box1, button#boxB_2:hover #box2, button#boxB_3:hover #box3, button#boxB_4:hover #box4, button#boxB_5:hover #box5, button#boxB_6:hover #box6{ max-height: 500px; transition: max-height 0.25s ease-in; } button#boxB_1:active #box1, button#boxB_2:active #box2, button#boxB_3:active #box3, button#boxB_4:active #box4, button#boxB_5:active #box5, button#boxB_6:active #box6{ max-height: 500px; transition: max-height 0.25s ease-in; } /*.funcIcons button:active #box1{display:inline-block;}*/ .funcIcons div img, .funcIcons button img{ width:70%; margin:10px 0 0 0; } .displayBelow650{display: none;} .funcIcons div p, .funcIcons button p{ font-family: 'Rubik', arial, sans-serif; font-size:12px; color:#231f20; font-weight:300; line-height:1.4em; text-decoration:none; } .funcIcons button span{ font-family: 'Rubik', arial, sans-serif; font-size:14px; color:#231f20; font-weight:300; line-height:1.4em; text-decoration:none; } .maxwidth700{ max-width: 700px; margin:0 auto; } .maxwidth1000{ max-width: 1000px; margin:0 auto; } .brandButton1{ position: relative; width: 250px; height:auto; background-color:#baa624; padding:16px 18px; border-radius: 3px; margin:20px auto 0; display:inline-block; /* To make href link be same width as button */ -webkit-transition: background-color 150ms ease; -moz-transition: background-color 150ms ease; -ms-transition: background-color 150ms ease; -o-transition: background-color 150ms ease; transition: background-color 150ms ease; } .brandButton2{ position: relative; width: 250px; height:auto; background-color:#413a11; padding:16px 18px; border-radius: 3px; margin:20px auto 0; display:inline-block; /* To make href link be same width as button */ -webkit-transition: background-color 150ms ease; -moz-transition: background-color 150ms ease; -ms-transition: background-color 150ms ease; -o-transition: background-color 150ms ease; transition: background-color 150ms ease; } .brandButton3{ position: relative; width: 250px; height:auto; background-color:#ffde17; padding:16px 18px; border-radius: 3px; margin:20px auto 0; display:inline-block; /* To make href link be same width as button */ -webkit-transition: background-color 150ms ease; -moz-transition: background-color 150ms ease; -ms-transition: background-color 150ms ease; -o-transition: background-color 150ms ease; transition: background-color 150ms ease; } .brandButton1 p{ font-family: 'Rubik', arial, sans-serif; font-size:22px; color:white; font-weight:400; line-height:1.4em; } .brandButton2 p{ font-family: 'Rubik', arial, sans-serif; font-size:22px; color:white; font-weight:400; line-height:1.4em; } .brandButton3 p{ font-family: 'Rubik', arial, sans-serif; font-size:22px; color:white; font-weight:400; line-height:1.4em; } .brandButton1_link:link .brandButton1{background-color:#baa624;} .brandButton1_link:visited .brandButton1{background-color:#baa624;} .brandButton1_link:hover .brandButton1{background-color:#ffde17;} .brandButton1_link:active .brandButton1{background-color:#baa624;} .brandButton2_link:link .brandButton2{background-color:#413a11;} .brandButton2_link:visited .brandButton2{background-color:#413a11;} .brandButton2_link:hover .brandButton2{background-color:#baa624;} .brandButton2_link:active .brandButton2{background-color:#413a11;} .brandButton3_link:link .brandButton3{background-color:#ffde17;} .brandButton3_link:visited .brandButton3{background-color:#ffde17;} .brandButton3_link:hover .brandButton3{background-color:#baa624;} .brandButton3_link:active .brandButton3{background-color:#baa624;} button.brandButton4 { -webkit-transition: all 0s ease-out; -moz-transition: all 0s ease-out; -o-transition: all 0s ease-out; -ms-transition: all 0s ease-out; transition: all 0s ease-out; height: auto; display: block; font-family: 'Rubik', arial, sans-serif; font-size: 22px; font-weight: 400; line-height: 1.4em; color:#3c3c3c; text-decoration: none; text-align: center; text-shadow: 0px -1px 0px rgba(255,255,255,0.4); padding: 13px 50px 10px; margin: 25px auto 10px; position: relative; cursor: pointer; border: none; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; display:inline-block; /* To make href link be same width as button */ } button.brandButton4 { background: #ffde17; -webkit-box-shadow: 0px 5px 0px 0px #baa624; box-shadow: 0px 5px 0px 0px #baa624; } button.brandButton4:active { top: 3px; } button.brandButton4:active { -webkit-box-shadow: 0px 2px 0px 0px #baa624; box-shadow: 0px 2px 0px 0px #baa624; } @media only screen and (max-width:650px) { .brandButton1{width: 220px;padding:14px 16px;} .brandButton1 p{font-size:18px;} .brandButton2{width: 220px;padding:14px 16px;} .brandButton2 p{font-size:18px;} .brandButton3{width: 220px;padding:14px 16px;} .brandButton3 p{font-size:18px;} button.brandButton4{padding: 13px 50px 10px;font-size:18px} } .fullwidth_1000 table { width: 100%; border-collapse: separate; height: auto; } .fullwidth_1000 table td { padding: 1px; vertical-align: middle; } .tableText td p{ padding:12px 30px; } @media only screen and (min-width: 650px) { .tableText td{width:50%;} } @media only screen and (max-width: 650px) { .tableText td p{padding:12px 5px;} } .text_bgImg_left{ position:relative; width:45%; left:0; } .text_bgImg_right{ position:absolute; width:50%; float:left; top:0; left:50%; right:0; bottom:0; background-position:right top; background-repeat:no-repeat; background-size:cover; background-image:url(../images/photo/SCURE_watch3.JPG); z-index:3; } @media only screen and (max-width: 650px) { .text_bgImg_left{width:100%;} .text_bgImg_right{ position:relative; width:100%; left:0; float:none; height:200px; } } .watchTwo{ width:60%; padding:0 0 20px 0; margin:0 20%; } .appPadding{ width:auto !important; margin:0 auto !important; display: block; } .appImage{ padding:20px; margin:0 auto; display: block; max-width: 650px; width:100%; } .maxwidth410{max-width: 410px;} .article_maxwidth{ position:relative; width:100%; height:auto; padding:37px 5%; margin:0 auto; max-width:1100px; } .article_timeline { position:relative; width:100%; height:auto; padding:37px 10% 0px 10%; overflow:visible; } /* Article without any padding / margin */ .article_clean { position:relative; width:100%; height:auto; padding:0px; margin:0px; } .text_in_clean_article{ padding:37px 5%; margin:0 auto; max-width:1100px; } .article_lesspadding { position:relative; width:100%; height:auto; padding:15px 2%; } /* Div with impression on the bg */ .bg_impression{ background-image:url(../images/impressie.jpg); background-repeat:no-repeat; background-position:center center; width:100%; height:250px; position:relative; } .bg_impression2{ background-image:url(../images/impressie2.jpg); background-repeat:no-repeat; background-position:center center; width:100%; height:250px; position:relative; } .bg_impression3{ background-image:url(../images/impressie3.jpg); background-repeat:no-repeat; background-position:center center; width:100%; height:250px; position:relative; } .bg_impression4{ background-image:url(../images/impressie4.jpg); background-repeat:no-repeat; background-position:center center; width:100%; height:250px; position:relative; } .bg_impression5{ background-image:url(../images/impressie5.jpg); background-repeat:no-repeat; background-position:center center; width:100%; height:250px; position:relative; } /* Decorative beam between header and hero / content */ #purple_beam{ position:absolute; top:136px; left:0; width:100%; height:8px; background-image:url(../images/balk.jpg); background-repeat:no-repeat; background-position:center center; } .vertical_space{ position:relative; height:100px; } /* Multiple boxes, automatically stacked */ .stacked_box_home{ position:relative; margin:0px; padding:0px; float:left; width:25%; height:325px; overflow:hidden; } .stacked_box_home div { position:absolute; top:60%; left:50%; transform:translateX(-50%); /* Center both horizontally and vertically */ z-index:2;/* For zoom-in effect of img */ width:100%; height:auto; padding:0 20px; } .stacked_box_home div h3{ font-family: 'Rubik', arial, sans-serif; font-size: 18px; color:#555; font-weight: 300; line-height: 1.4em; text-decoration: none; text-align: center; padding: 0px; -webkit-hyphens:manual; -moz-hyphens:manual; -ms-hyphens:manual; hyphens:manual; /* To hyphenate */ } .stacked_box_home img{ padding:0px; width:55%; height:auto; display:block; /* To prevent auto-bottom-padding at each image*/ margin:0 auto; position:absolute; top:2%; left:50%; transform:translateX(-50%); /* Center both horizontally and vertically */ /* Below is for raise effect */ -webkit-transition: top 0.2s ease; /* Safari and Chrome */ -moz-transition: top 0.2s ease; /* Firefox */ -ms-transition: top 0.2s ease; /* IE 9 */ -o-transition: top 0.2s ease; /* Opera */ transition: top 0.2s ease; } .stacked_box_home:hover img{ /* Below is for raise effect */ top:0%; } /* Multiple boxes, automatically stacked */ .stacked_box{ position:relative; margin:0px; padding:0px; float:left; width:25%; height:auto; overflow:hidden; } .stacked_box div { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); /* Center both horizontally and vertically */ z-index:2;/* For zoom-in effect of img */ } .stacked_box div h3{ font-family: 'Rubik', 'Rubik', arial, sans-serif; font-size:60px; color:white; line-height:1.0em; text-decoration:none; text-align:center; padding:0px; -webkit-hyphens:manual; -moz-hyphens:manual; -ms-hyphens:manual; hyphens:manual; /* To hyphenate */ } .stacked_box div p{ font-family: 'Rubik', arial, sans-serif; font-size:22px; font-weight:600; color:white; line-height:1.2em; text-decoration:none; text-align:center; padding-top:12px; -webkit-hyphens:manual; -moz-hyphens:manual; -ms-hyphens:manual; hyphens:manual; /* To hyphenate */ } .stacked_box img{ padding:0px; margin:0px; width:100%; height:auto; display:block; /* To prevent auto-bottom-padding at each image*/ -webkit-filter: brightness(80%); filter: brightness(80%); /* Below is for zoom-in effect */ -webkit-transition: all 0.2s ease; /* Safari and Chrome */ -moz-transition: all 0.2s ease; /* Firefox */ -ms-transition: all 0.2s ease; /* IE 9 */ -o-transition: all 0.2s ease; /* Opera */ transition: all 0.2s ease; } .stacked_box:hover img{ /* Below is for zoom-in effect */ -webkit-transform:scale(1.1); /* Safari and Chrome */ -moz-transform:scale(1.1); /* Firefox */ -ms-transform:scale(1.1); /* IE 9 */ -o-transform:scale(1.1); /* Opera */ transform:scale(1.1); } /* Textbox boven klachten op homepage */ #intro_text{ position:relative; max-width:800px; width:auto; height:auto; } #intro_text p{ font-family: 'Rubik', arial, sans-serif; font-size:18px; color:white; font-weight:300; line-height:1.4em; text-decoration:none; text-align:left; padding:0 0 10px 0; } .purplebackground{background-color:#7e65a4;} .purplebackground_light{background:#dcd7eb;} /* Bottom of Ilona page styles */ .horcenter{ position:relative; width:100%; height:auto; text-align:center; padding:15px 0 50px 0; } #currentyear{ font-family: 'Rubik', arial, sans-serif; font-size:100px; color:white; font-weight:600; line-height:1.2em; text-decoration:none; text-align:center; padding:0 0 0 0; } #horcenter_p_medium{ font-family: 'Rubik', arial, sans-serif; font-size:25px; color:#7e65a4; font-weight:300; line-height:1.2em; text-decoration:none; text-align:center; padding:0 0 10px 0; } #horcenter_p_small{ font-family: 'Rubik', arial, sans-serif; font-size:18px; color:#7e65a4; font-weight:300; line-height:1.2em; text-decoration:none; text-align:center; padding:0 0 0 0; } /* Verenigingen text and logos (custom to this website) */ #verenigingen_text { position:absolute; width:48%; height:auto; float:left; padding:40px 0px 40px 8%; top:50%; transform: translateY(-50%); /* For vertical centering */ } #verenigingen_text p{ font-family: 'Rubik', arial, sans-serif; font-size:18px; color:#7e65a4; font-weight:300; line-height:1.4em; text-decoration:none; text-align:left; padding:0 0 2% 0; } .verenigingen_image { position:absolute; float:left; padding:40px 0; margin:0; } .left40{ left:49%; max-width:34%; top:70%; transform: translateY(-50%); /* For vertical centering */ } .left65{ left:70%; max-width:14%; top:45%; transform: translateY(-50%); /* For vertical centering */ } .left65 img{max-height:300px;} #verenigingen_custom_height{position:relative;height:450px;} /* Abs div, float left for in splitted up hero */ .splittedhero { position:absolute; height:100%; /* Should be equal to hero's height */ min-height:400px; width:50%; top:0; bottom:0; float:left; } .splittedhero2 { /* Doesnt jump to 100% at 900px */ position:absolute; height:100%; /* Should be equal to hero's height */ width:50%; top:0; bottom:0; float:left; } .left0{left:0%;} .left0_2{ left:0%; z-index:15; top:8%; height:84% !important; border-bottom-right-radius:5px; border-top-right-radius:5px; } /* Extra class that does disappear after 900px */ .left50{left:50%;} .left50_2{left:50%;} /* Extra class that doesnt disappear after 900px */ /* Google Maps Height of this id is defined by js */ #map-canvas{ position:absolute; width:100%; border:0; z-index:1; min-height:450px; background:#CCC; } #contact h2{ font-family: 'Rubik', arial, sans-serif; font-size: 20px !important; color:#165fa8; font-weight:300; line-height:1.4; text-decoration:none; padding:0; -webkit-hyphens:manual; -moz-hyphens:manual; -ms-hyphens:manual; hyphens:manual; /* To hyphenate */ } #contact p{ font-family: 'Rubik', arial, sans-serif; font-size:14px; color:#555; font-weight:300; line-height:1.6em; text-decoration:none; text-align:left; padding:0px; } #contact2 h2{ font-family: 'Rubik', arial, sans-serif; font-size:14px !important; color:#231f20; font-weight:400; line-height:1.2; text-decoration:none; padding:0; -webkit-hyphens:manual; -moz-hyphens:manual; -ms-hyphens:manual; hyphens:manual; /* To hyphenate */ } #contact2 p{ font-family: 'Rubik', arial, sans-serif; font-size:12px; color:#231f20; font-weight:300; line-height:1.3em; text-align:left; padding:0px; } #contact2 a:link{text-decoration:underline;color:#baa624;font-weight:300;} #contact2 a:visited{text-decoration:underline;color:#baa624;font-weight:300;} #contact2 a:hover{text-decoration:underline;color:#231f20;font-weight:300;} #contact2 a:active{text-decoration:underline;color:#231f20;font-weight:300;} /* Fading underline contact page */ .contactDetails a:link { text-decoration:none;color:#231f20;font-weight:300; border-bottom: 1px solid rgba(186,166,36,0); -webkit-transition: border 150ms ease; -moz-transition: border 150ms ease; -ms-transition: border 150ms ease; -o-transition: border 150ms ease; transition: border 150ms ease; } .contactDetails a:visited { text-decoration:none;color:#231f20;font-weight:300; border-bottom: 1px solid rgba(186,166,36,0); -webkit-transition: border 150ms ease; -moz-transition: border 150ms ease; -ms-transition: border 150ms ease; -o-transition: border 150ms ease; transition: border 150ms ease; } .contactDetails a:hover { text-decoration:none;color:#231f20;font-weight:300; border-bottom: 1px solid rgba(186,166,36,1); } .contactDetails a:active { text-decoration:none;color:#231f20;font-weight:300; border-bottom: 1px solid rgba(186,166,36,1); } .siteMap a:link{text-decoration:underline;color:#231f20;font-weight:300;} .siteMap a:visited{text-decoration:underline;color:#231f20;font-weight:300;} .siteMap a:hover{text-decoration:underline;color:#baa624;font-weight:300;} .siteMap a:active{text-decoration:underline;color:#baa624;font-weight:300;} .contact_info{ position:relative; width:100%; height:600px; } .purplebackground_transparant{ background-image:url(../images/transparant_purple.png); background-repeat:repeat; } .white_gradient{ background-image:url(../images/white_gradient.png); background-repeat:repeat-x; background-position:center bottom; border:0; } .horvercenter_parent{ position:relative; width:100%; height:100%; } .horvercenter_child{ position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); width:100%; height:auto; padding:50px 40px; max-width:600px; } .horvercenter_child2{ position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); width:100%; height:auto; padding:50px 40px; max-width:800px; } .horvercenter_child h2{ font-family: 'Rubik', 'Rubik', arial, sans-serif; font-size: 30px; color:white; font-weight:300; line-height:1.4; text-decoration:none; padding:0 0 30px 0; text-align:left; } .horvercenter_child p{ font-family: 'Rubik', arial, sans-serif; font-size:18px; color:white; font-weight:300; line-height:1.6em; text-decoration:none; text-align:left; padding:0px; } .horvercenter_child2 h2{ font-family: 'Rubik', 'Rubik', arial, sans-serif; font-size: 30px; color:white; font-weight:300; line-height:1.4; text-decoration:none; padding:0 0 10px 0; text-align:left; } .horvercenter_child2 p{ font-family: 'Rubik', arial, sans-serif; font-size:18px; color:white; font-weight:300; line-height:1.6em; text-decoration:none; text-align:left; padding:0px; } .horvercenter_child2 ul{ font-family: 'Rubik', arial, sans-serif; font-size:18px; color:white; font-weight:300; line-height:1.6em; text-decoration:none; text-align:left; padding:10px 0 0 0; list-style-position:inside; } /* Each list item gets another image */ .horvercenter_child2 ul li:first-child{ background: url(../images/phone.png) no-repeat left center; padding: 3px 0px 3px 40px; } .horvercenter_child2 ul li:first-child + li{ background: url(../images/mobilephone.png) no-repeat left center; padding: 3px 0px 3px 40px; } .horvercenter_child2 ul li:first-child + li + li{ background: url(../images/mail.png) no-repeat left center; padding: 3px 0px 3px 40px; } .horvercenter_child2 ul li:first-child + li + li + li{ background: url(../images/website.png) no-repeat left center; padding: 3px 0px 3px 40px; } .horvercenter_child2 ul li:first-child + li + li + li + li{ background: url(../images/kvk.png) no-repeat left center; padding: 3px 0px 3px 40px; } /* Ilona profile with different headers inside */ #ilona_profile{ position:absolute; bottom:0; width:100%; height:auto; padding:20px 20px; margin:0 auto; } #ilona_profile h1{ font-family: 'Rubik', 'Rubik', arial, sans-serif; font-size: 36px; color:#000; font-weight:300; line-height:1.2em; text-decoration:none; padding:0; } #ilona_profile h2{ font-family: 'Rubik', arial, sans-serif; font-size: 25px; color:#7e65a4; font-weight:300; line-height:1.4em; text-decoration:none; padding:0; text-align:center; } #ilona_profile p{ font-family: 'Rubik', arial, sans-serif; font-size:12px; color:#8e7eba; font-weight:300; line-height:1.2em; text-decoration:none; text-align:center; padding:0px; } .fontsize11{ font-size:11px !important; color:#b1a7d2; } /* Articles with smaller spacing */ .article_smaller { position:relative; width:100%; height:auto; padding:70px 10%; } .article_image { position:relative; height:auto; display:inline-block; vertical-align:middle; padding:1% 0 1% 0; } .article_text { position:relative; height:auto; display:inline-block; vertical-align:middle; padding:1% 0 1% 0; } /* Article with lightblue or blue or darkblue background and white text */ .lightblue {background-color:#779EB1;} .lightblue h2 {color:white;} .lightblue p {color:white;} .blue {background-color:#4089BA;} .blue h2 {color:white;} .blue p {color:white;} .darkblue {background-color:#203F7D;} .darkblue h2 {color:white;} .darkblue p {color:white;} /* Different classes for different alignment*/ .align_left { text-align:left; } .align_right { text-align:right; } .align_center { text-align:center; } /* Background-image for article */ #go_tandarts { background-image:url(../images/implantaat_illustratie_background.jpg); background-repeat:no-repeat; background-position:bottom left; } /* Background-image for article */ #background_implants { background-image:url(../images/11.jpg); background-repeat:no-repeat; background-position:bottom right; } /* To add transparant bar behind text */ .transparant_bar { background-color:rgba(255,255,255,0.75); } /* Specifics for different content boxes */ .article_1_image { width:33%; } .article_1_text { width:59%; margin-left:5%; } .article_1_text_margin { width:59%; margin-left:40%; } .article_2_text { width:46%; } .article_2_text_2 { width:48%; margin-left:5%; top:20px; } .article_3_text { width:48%; margin-left:17%; } .article_4_text{ padding:0 0 50px 0; max-width:700px; margin:0 auto; } .article_5_text { width:95%; margin-left:5%; } .article_6_text { width:40%; margin-left:5%; } .article_6_image { width:49%; margin-left:5%; } .article_7_text { width:59%; margin-left:5%; } .article_7_image { width:33%; } /* Sum line and its white-lined variant */ .sum_line { width:100%; max-width:460px; height:20px; border-bottom:1px solid #555; margin:0px 0 10px 0; text-align:right; } .sum_line_white { width:100%; max-width:460px; height:20px; border-bottom:1px solid white; margin:0px 0 10px 0; text-align:right; color:white; } /* Specific class only for the contact page */ .contact_article { background-color:#203F7D; padding:80px 5% 90px 10%; margin-top:-5px; } .contact_list { list-style:none !important; color:white !important; margin-left:10% !important; } /* Specific classes for 2 lists next to each other */ .ul_left { list-style-type:disc; font-family: 'Rubik', arial, sans-serif; font-size: 20px; color: #555; font-weight:300; text-decoration:none; line-height:1.4; display:inline-block; } .ul_right{ list-style-type:disc; font-family: 'Rubik', arial, sans-serif; font-size: 20px; color: #555; font-weight:300; line-height:1.4; display:inline-block; margin-left:7%; } /* Tooth and screw animation */ .toothscrew { position:relative; width:200px; height:450px; left:10%; overflow:hidden; /* SHOULD BE HIDDEN */ display:inline-block; vertical-align:middle; } .tooth { position:absolute; width:200px; height:auto; left:0; top:100px; z-index:2; } .screw { position:absolute; width:40px; height:auto; left:50%; margin-left:-20px; top:32%; z-index:1; } /* The tooth screw animation code itself */ @keyframes tooth1 { 0% {top:5%;opacity:0;} 5% {top:5%;opacity:1;} 50%{top:32%;opacity:1;} 95%{top:32%;opacity:1;} 100%{top:32%;opacity:0;} } .tooth_animation { animation-name: tooth1; animation-duration: 5s; animation-iteration-count: infinite; animation-timing-function: ease-out; opacity:1; } /* For right-aligned toothscrew box */ .toothscrew_right { position:relative; width:200px; height:403px; left:10%; overflow:hidden; /* SHOULD BE HIDDEN */ display:inline-block; vertical-align:middle; } /* Inschrijfformulier button */ #form_button { position:relative; width:300px; height:auto; left:50%; margin-left:-150px; text-align:center; font-family: 'Rubik', arial, sans-serif; font-size: 35px; color:white; font-weight:600; line-height:1.29; text-decoration:none; padding:20px; background-color:#4089BA; border-radius:3px; } #form_button:hover{background-color:#203F7D;} #form_button:active{background-color:#779EB1;} /* Logo in footer */ .footer_logo { position:relative; width:190px; height:auto; left:50%; margin-left:-95px; padding:0 0 40px 0; } /* 1st title */ h1 { font-family: 'Rubik', 'Rubik', arial, sans-serif; font-size: 75px; color: white; line-height:0.5; text-decoration:none; padding:0; -webkit-hyphens:manual; -moz-hyphens:manual; -ms-hyphens:manual; hyphens:manual; /* To hyphenate */ } /* Text on white background */ /* 1st title */ .onwhitebg h1 { font-family: 'Rubik', 'Rubik', arial, sans-serif; font-size: 36px; color:#555; /* #555 #4089BA #203F7D */ font-weight:300; line-height:1.4; text-decoration:none; padding:0; -webkit-hyphens:manual; -moz-hyphens:manual; -ms-hyphens:manual; hyphens:manual; /* To hyphenate */ } .onwhitebg p{ font-family: 'Rubik', arial, sans-serif; font-size:18px; color:#7e65a4; font-weight:300; line-height:1.6em; text-decoration:none; text-align:left; padding:0px; } .onwhitebg h2 { font-family: 'Rubik', 'Rubik', arial, sans-serif; font-size: 36px; color:#555; /* #555 #4089BA #203F7D */ font-weight:300; line-height:1.4; text-decoration:none; padding:0; -webkit-hyphens:manual; -moz-hyphens:manual; -ms-hyphens:manual; hyphens:manual; /* To hyphenate */ } .onwhitebg h3 { font-family: 'Rubik', arial, sans-serif; font-size: 30px; font-weight:800; line-height:1.4; text-decoration:none; padding:0; -webkit-hyphens:manual; -moz-hyphens:manual; -ms-hyphens:manual; hyphens:manual; /* To hyphenate */ } .font_white{color:white !important;} /* Klachten pagina: full width images */ .fullwidth_img{ position:relative; width:100%; height:250px; background-repeat:repeat-x; background-position:center center; } /* Header in fullwidth_img */ .fullwidth_img h3 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* 1st title for in half-sized hero */ #halfhero h1 { font-family: 'Rubik', arial, sans-serif; color: white; /* #555 #4089BA #203F7D */ line-height:1.4; text-decoration:none; padding:0; } /* Smaller and bigger h1 titles */ .h1_small {font-size: 30px;font-weight:300;} .h1_med {font-size: 40px;font-weight:300;} .h1_big {font-size: 48px;font-weight:600;} /* Transparant background to h1 */ #transparant_h1 { background-color:rgba(255,255,255,0.6); font-weight:600; } /* Smaller subtitle above h1 */ #small_h1 { font-size:35px; background-color:rgba(255,255,255,0.6); color:#4089BA; font-weight:600; } /* Images between text boxes */ .image { position:relative; width:100%; height:500px; min-height:500px; background-position:center center; background-repeat:no-repeat; background-size:cover; box-sizing:border-box; left:0; text-align:center; overflow:hidden; } .image_smaller { position:relative; width:100%; height:360px; min-height:360px; background-position:center center; background-repeat:no-repeat; background-size:cover; box-sizing:border-box; left:0; text-align:center; overflow:hidden; } /* For bigger images */ .big_image{height:750px !important;} /* For making first photos adjusted to browser screen height */ #implantologie_image { height:auto; } #tandarts_image { height:auto; } #praktijk_image { height:auto; } /* Subscription form text box */ .subscription_form { position:relative; width:100%; height:auto; padding:20px 0 20px 0; background-color:rgb(244,244,244); } /* Cognito form container */ .form_container { position:relative; max-width:800px; height:auto; margin:0 auto; background-color:white; padding-bottom:50px; } /* Cognito form font correction */ .cognito #c-forms-form { font-family: 'Rubik', arial, sans-serif !important; font-size: 21px !important; font-weight: 300 !important; color: #555 !important; line-height: 1.4 !important; text-decoration: none !important; } /* Footer box */ footer { position:relative; width:100%; height:auto; background:white; margin-top:0px; overflow:hidden; padding-bottom:0; } .footerContent1_3{ position:relative; top:0; left:10px; float:left; } .footerContent1_3 img{ width:60px; padding:10px; vertical-align: middle; } .footerContent2_3{ position:absolute; left:50%; transform: translateX(-50%); } .footerContent2_3 img{ width:40px; padding:10px; margin:15px; } .footerContent3_3{ position:relative; float:right; padding-right:20px; top:25px; text-align: right !important; } .social_media_img{ width:40px; height:40px; padding:10px; margin:15px; } .social_media_img path {fill: #413a11;} .social_media_img:hover path {fill: #ffde17;} @media only screen and (max-width:850px) { .social_media_img{padding:10px;margin:15px 0px;} } @media only screen and (max-width:650px) { .footerContent1_3, .footerContent2_3, .footerContent3_3{ position: relative; width:100%; float:none; padding:10px 20px; margin:0; top:auto; bottom:auto; left:auto; right:auto; transform:none; text-align: center !important; } .footerContent1_3 img{display:none;} .social_media_img{margin:0;padding:0px 10px;} } /* Footer styles */ #footer_waves{ position:absolute; width:2000px !important; height:auto; top:-260px; left:50%; transform:translateX(-50%); } #footer_logo{ position:relative; height:auto; width:165px; /* width of logo */ margin:0 auto; overflow:visible; top:110px; } #footer_logo h3{ font-family: 'Rubik', arial, sans-serif; font-size:26px !important; color:#3184c0; font-weight:300; line-height:1.4em; text-decoration:none; text-align:center !important; } #footer_logo h4{ font-family: 'Rubik', arial, sans-serif; font-size:22px !important; color:#8db1d9; font-weight:300; line-height:1.0em; text-decoration:none; text-align:center !important; } #footer_social{ position:absolute; width:auto; height:auto; right:0; } #social_media_container{ position:absolute; width:100%; max-width:1300px; top:200px; margin:0 auto; left:50%; transform:translateX(-50%); } .social_img{ float:left; padding:10px 5px; } .social_img_rightmost{ float:left; padding:10px 20px 10px 5px; } .social_img img{width:auto;height:auto;} .social_img_rightmost img{width:auto;height:auto;} .footer_back{ position:absolute; left:0; right:0; width:100%; height:auto; } .maxwidth{max-width:1300px;margin:0 auto;} .footer_back_left_text{ float:left; position:relative; padding:10px 20px; } .footer_back_right_text{ float:right; position:relative; padding:10px 20px; } .footer_back p, .footer_back span { font-family: 'Rubik', arial, sans-serif; font-size:14px !important; color:#231f20; font-weight:300; line-height:1.4em; text-decoration:none; text-align:left; } /* Box in which footer menu sits */ #footer_menu{ position:relative; color:white; padding:20px 0 0 100px; height:250px; width:70%; float:left; z-index:2; overflow:visible; } /* Box in which footer media sits */ #footer_media{ position:relative; color:white; padding:20px 0 0 0; height:250px; width:30%; float:left; z-index:2; } #footer_media ul{ padding:10px 0 0 0; } #footer_media li{ display:inline; } /* Box to put footer text in */ #footer_text{ position:relative; width:100%; height:auto; padding:10px 0; float:left; z-index:1; background-color:#7e65a4; } /* Footer text */ #footer_menu ul { position:relative; float:left; padding:0 40px 0 0; } #footer_menu li { font-family: 'Rubik', arial, sans-serif; font-size: 16px; color:white; font-weight:300; line-height:1.4em; text-decoration:none; text-align:left; padding: 2px 0 2px 0; } footer p, footer span{ font-family: 'Rubik', arial, sans-serif; font-size: 12px; color:#231f20; font-weight:300; line-height:1.2em; text-decoration:none; } /* Footer hyperlinks */ footer a:link {text-decoration:none;color:white;border:0;} footer a:visited {text-decoration:none;color:white;border:0;} footer a:hover {text-decoration:underline;color:#b1a7d2;border:0;} footer a:active {text-decoration:underline;color:#b1a7d2;border:0;} /* Facebook layer */ #facebook{ position:relative; top:0; left:0; height:79px; width:100%; background-image:url(../images/facebook_bg_layer.png); background-repeat:repeat-x; overflow:hidden; margin:0 auto; } #facebook div { position:relative; height:79px; width:274px; left:50%; margin-left:-137px; top:14px; } #facebook div p{ font-family: 'Rubik', arial, sans-serif; font-size: 19px; color:white; font-weight:300; line-height:1.4em; text-decoration:none; float:left; margin-top:-10px; } #facebook div img{ position:relative; height:auto; width:auto; float:left; margin-left:25px; top:0px; } /* Navigation for mobile devices: trigger button */ #nav_mobile { display:none; position:absolute; width:49px; height:auto; padding:0; margin:0; top:12px; right:10px; z-index:2; } /* For svg images you have to define both width and height .menu_button path { fill: white !important; } /*.menu_botton:hover path {fill: white !important;} */ .close_button path { fill: #231f20 !important; } /* Navigation for mobile devices: menu */ #nav_mobile_menu { display:none; position:fixed; width:100%; height:100%; z-index:1000; background-color:white; } /* Mobile menu list */ #ul_mobile { position:absolute; top:94px; /* Set equal to height of header + some padding */ width:100%; height:auto; text-align:center; } #ul_mobile li a { font-family: 'Rubik', arial, sans-serif; font-size: 18px; color: #555; font-weight:300; text-decoration:none; line-height:2; } #ul_mobile li a:link{color:#555;text-decoration:none;} #ul_mobile li a:visited{color:#555;text-decoration:none;} #ul_mobile li a:hover{color:#3184c0;text-decoration:underline;} #ul_mobile li a:active{color:#3184c0;text-decoration:underline;} /* To make submenu items have a slight background and smaller font-size */ #ul_mobile li ul{ position:relative; background-color:#dcd7eb; } #ul_mobile li ul li a { font-size: 16px; } /* Button to close mobile nav screen */ #close_button { position:absolute; width:49px; height:auto; padding:0; margin:0; top:12px; right:30px; } /* Inschrijfformulier button for mobile devices */ #form_button_mobile { position:absolute; top:450px; width:200px; height:80px; left:50%; margin-left:-100px; text-align:center; font-family: 'Rubik', arial, sans-serif; font-size: 21px; color:#555; font-weight:600; line-height:75px; text-decoration:none; padding:0; border-radius:3px; border:2px solid #4089BA; } #form_button_mobile:hover{background-color:#4089BA;color:white;border-color:#4089BA;} #form_button_mobile:active{background-color:#203F7D;color:white;border-color:#203F7D;} /* Slider CSS styles */ .cbp-fwslider { position: relative; margin: 0 0 0px; overflow: hidden; padding: 40px 0 60px; background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; /* Only works in Chrome, Opera */ transition: background-image 0.5s ease-in-out; } .cbp-fwslider ul { margin: 0; padding: 0; white-space: nowrap; list-style-type: none; } .cbp-fwslider ul li { transform: translateZ(0); float: left; display: block; margin: 0; padding: 0; } .cbp-fwslider ul li > a, .cbp-fwslider ul li > div { display: block; text-align: center; outline: none; } .cbp-fwslider ul li > div img { border: none; display: block; margin: 0 auto; max-width: 80%; max-height:500px; } .cbp-fwslider nav span { position: absolute; top: 50%; width: 50px; height: 100px; background:#8e7eba; color: #fff; font-size: 50px; text-align: center; margin-top: -50px; line-height: 100px; cursor: pointer; font-weight: normal; } .cbp-fwslider nav span:hover { background:#7e65a4; } .cbp-fwslider nav span.cbp-fwnext { right: 0px; } .cbp-fwslider nav span.cbp-fwprev { left: 0px; } .cbp-fwdots { position: absolute; bottom: 0px; white-space: nowrap; text-align: center; width: 100%; padding-bottom:10px; } .cbp-fwdots span { display: inline-block; width: 18px; height: 18px; background: #ddd; margin: 4px; border-radius: 50%; cursor: pointer; } .cbp-fwdots span:hover { background: #999; } .cbp-fwdots span.cbp-fwcurrent { background: rgba(126,101,164,0.5); box-shadow: 0 0 0 2px rgba(126,101,164,0.5); transition: box-shadow 0.2s ease-in-out; } /* For textboxes in slider */ #cbp-fwslider ul li div {} #cbp-fwslider ul li div p { position:relative; width:auto; height:auto; top:0; left:0; margin:10px auto 0 auto; padding:10px 10% 10px 10%; white-space:normal; text-align:center; overflow:visible; background-color:rgba(126,101,164,0.5); font-family: "Open Sans",arial,sans-serif; font-size:18px; font-weight: 300; color:white; line-height: 1.4; text-decoration: none; } /* ----------------------------------------------------------------------------------------- Vertical timeline style sheet, not created myself, but taken from codyhouse It is customized by Max de Feber --------------------------------------------------------------------------------------------*/ /* -------------------------------- Modules - reusable parts of our design -------------------------------- */ .cd-container { /* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */ width: 90%; max-width: 1170px; margin: 0 auto; } .cd-container::after { /* clearfix */ content: ''; display: table; clear: both; } /* -------------------------------- Main components -------------------------------- */ #cd-timeline { position: relative; padding: 2em 0; margin-top: 2em; margin-bottom: 0; } #cd-timeline::before { /* this is the vertical line */ content: ''; position: absolute; top: 0; left: 16px; height: 100%; width: 8px; background: #7e65a4; } @media only screen and (max-width:400px) { #cd-timeline::before {display:none !important;} } @media only screen and (min-width: 1170px) { #cd-timeline { margin-top: 3em; margin-bottom: 0; } #cd-timeline::before { left: 50%; margin-left: -4px; } } .cd-timeline-block { position: relative; margin: 2em 0; } .cd-timeline-block:after { content: ""; display: table; clear: both; } .cd-timeline-block:first-child { margin-top: 0; } .cd-timeline-block:last-child { margin-bottom: 0; } @media only screen and (max-width: 1170px) { .cd-timeline-block { padding-left:15px; } } @media only screen and (min-width: 1170px) { .cd-timeline-block { margin: 4em 0; } .paddingright{padding-right:15px;} .paddingleft{padding-left:15px;} .cd-timeline-block:first-child { margin-top: 0; } .cd-timeline-block:last-child { margin-bottom: 0; } } .cd-timeline-img { position: absolute; top: 0; left: -10px; width: 60px; height: 60px; border-radius: 50%; box-shadow: 0 0 0 5px #dcd7eb, 0 0 0 9px #7e65a4, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05); } @media only screen and (max-width:400px) { .cd-timeline-img {display:none !important;} } .cd-timeline-img img { display: block; width: 40px; height: 40px; position: relative; left: 50%; top: 50%; margin-left: -20px; margin-top: -20px; } .cd-timeline-img.cd-picture { background: #7e65a4; } .cd-timeline-img.cd-movie { background: #7e65a4; } .cd-timeline-img.cd-location { background: #7e65a4; } @media only screen and (min-width: 1170px) { .cd-timeline-img { width: 60px; height: 60px; left: 50%; margin-left: -30px; /* Force Hardware Acceleration in WebKit */ -webkit-transform: translateZ(0); -webkit-backface-visibility: hidden; } .cssanimations .cd-timeline-img.is-hidden { visibility: hidden; } .cssanimations .cd-timeline-img.bounce-in { visibility: visible; -webkit-animation: cd-bounce-1 0.6s; -moz-animation: cd-bounce-1 0.6s; animation: cd-bounce-1 0.6s; } } @-webkit-keyframes cd-bounce-1 { 0% { opacity: 0; -webkit-transform: scale(0.5); } 60% { opacity: 1; -webkit-transform: scale(1.2); } 100% { -webkit-transform: scale(1); } } @-moz-keyframes cd-bounce-1 { 0% { opacity: 0; -moz-transform: scale(0.5); } 60% { opacity: 1; -moz-transform: scale(1.2); } 100% { -moz-transform: scale(1); } } @keyframes cd-bounce-1 { 0% { opacity: 0; -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); transform: scale(0.5); } 60% { opacity: 1; -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } 100% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } } .cd-timeline-content { position: relative; margin-left: 60px; background: white; border-radius: 0.25em; padding: 1em; box-shadow: 0 3px 0 #7e65a4; } @media only screen and (max-width:400px) { .cd-timeline-content {margin-left:0px !important;} } .cd-timeline-content:after { content: ""; display: table; clear: both; } .cd-timeline-content h2 { font-family: 'Rubik', 'Rubik', arial, sans-serif; font-size: 24px; color: #555; font-weight:300; line-height:1.4; text-decoration:none; padding:0; text-align:left; } .cd-timeline-content p, .cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date { font-family: 'Rubik', arial, sans-serif; font-size:18px; color:#7e65a4; font-weight:300; line-height:1.4em; text-decoration:none; text-align:left; padding:0; margin: 1em 0; -webkit-hyphens:auto; -moz-hyphens:auto; -ms-hyphens:auto; hyphens:auto; /* To hyphenate */ } .cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date { display: inline-block; } .cd-timeline-content .cd-read-more { float: right; padding: .8em 1em; background: white; color: white; border-radius: 0.25em; } .no-touch .cd-timeline-content .cd-read-more:hover { background-color: #bac4cb; } .cd-timeline-content .cd-date { float: left; padding: .8em 0; opacity: .7; } .cd-timeline-content::before { content: ''; position: absolute; top: 16px; right: 100%; height: 0; width: 0; border: 7px solid transparent; border-right: 7px solid white; } @media only screen and (min-width: 768px) { .cd-timeline-content h2 { } .cd-timeline-content p { } .cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date { font-size: 14px; font-size: 0.875rem; } } @media only screen and (min-width: 1170px) { .cd-timeline-content { margin-left: 0; padding: 1.6em; width: 45%; } .cd-timeline-content::before { top: 24px; left: 100%; border-color: transparent; border-left-color: white; } .cd-timeline-content .cd-read-more { float: left; } .cd-timeline-content .cd-date { position: absolute; width: 100%; left: 122%; top: 6px; font-size: 16px; font-size: 1rem; } .cd-timeline-block:nth-child(even) .cd-timeline-content { float: right; } .cd-timeline-block:nth-child(even) .cd-timeline-content::before { top: 24px; left: auto; right: 100%; border-color: transparent; border-right-color: white; } .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more { float: right; } .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date { left: auto; right: 122%; text-align: right; } .cssanimations .cd-timeline-content.is-hidden { visibility: hidden; } .cssanimations .cd-timeline-content.bounce-in { visibility: visible; -webkit-animation: cd-bounce-2 0.6s; -moz-animation: cd-bounce-2 0.6s; animation: cd-bounce-2 0.6s; } } @media only screen and (min-width: 1170px) { /* inverse bounce effect on even content blocks */ .cssanimations .cd-timeline-block:nth-child(even) .cd-timeline-content.bounce-in { -webkit-animation: cd-bounce-2-inverse 0.6s; -moz-animation: cd-bounce-2-inverse 0.6s; animation: cd-bounce-2-inverse 0.6s; } } @-webkit-keyframes cd-bounce-2 { 0% { opacity: 0; -webkit-transform: translateX(-100px); } 100% { -webkit-transform: translateX(0); } } @-moz-keyframes cd-bounce-2 { 0% { opacity: 0; -moz-transform: translateX(-100px); } 100% { -moz-transform: translateX(0); } } @keyframes cd-bounce-2 { 0% { opacity: 0; -webkit-transform: translateX(-100px); -moz-transform: translateX(-100px); -ms-transform: translateX(-100px); -o-transform: translateX(-100px); transform: translateX(-100px); } 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes cd-bounce-2-inverse { 0% { opacity: 0; -webkit-transform: translateX(100px); } 100% { -webkit-transform: translateX(0); } } @-moz-keyframes cd-bounce-2-inverse { 0% { opacity: 0; -moz-transform: translateX(100px); } 100% { -moz-transform: translateX(0); } } @keyframes cd-bounce-2-inverse { 0% { opacity: 0; -webkit-transform: translateX(100px); -moz-transform: translateX(100px); -ms-transform: translateX(100px); -o-transform: translateX(100px); transform: translateX(100px); } 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } /* Circle that sits on top and bottom of vertical timeline */ #circle_top{ position:absolute; height:26px; width:26px; top:60px; left:50%; margin-left:-13px; background-image:url(../images/circle.png); background-repeat:no-repeat; background-position:center center; } #circle_bottom{ position:absolute; height:26px; width:26px; bottom:-6px; left:50%; margin-left:-13px; background-image:url(../images/circle.png); background-repeat:no-repeat; background-position:center center; z-index:10; } @media screen and (max-width:1170px) { #circle_top{display:none;} #circle_bottom{left:7px;margin-left:0px;} } @media only screen and (max-width:400px) { #circle_bottom{display:none;} } /* Media queries (for responsive design) -------------------------------------------------------------------------------*/ @media screen and (max-width:1400px) { /*Arrow to go down in hero*/ #arrow_down{bottom:45px;} .stacked_box div h3{font-size:50px;} .stacked_box div p{font-size:16px;} } @media screen and (max-width:1300px) { #footer_waves{width:1300px !important;top:-170px;} } @media screen and (max-width:1200px) { .stacked_box div h3{font-size:45px;} .stacked_box div p{font-size:15px;} } @media screen and (max-width:1175px) { /* #menu li ul, #menuL li ul {left:-5px;padding:10 0 0 0;}*/ #submenu2{left:102px !important;} } @media screen and (max-width:1080px) { } @media screen and (max-width:1200px) { /* Splitted hero, make right or left box disappear, and make it re-appear below */ .splittedhero {width:100%;} .left50{display:none;} .reappear{display:block;} /*Arrow to go down in hero*/ #arrow_down{bottom:55px;} .text {padding: 50px 10% !important;} } @media screen and (max-width:1180px) { } @media screen and (max-width:1170px) { } @media screen and (max-width:1100px) { /* Stacked box place text higher (closer to image) */ .stacked_box_home div{top:50%;} } @media screen and (max-width:1020px) { } @media screen and (max-width:1000px) { /* Social media buttons smaller */ .social_img img{width:60px;} .social_img_rightmost img{width:60px;} /* Lower position of exp_bg */ #exp_bg{top:60px;} /* Automatically stacked boxes, now 3 per row instead of 4 */ .stacked_box{width:33.333%;} } @media screen and (max-width:970px) { /* Least important klant disappears to create more space */ #klant_least_important{display:none;} .klant_logo{width:25%;} } @media screen and (max-width:900px) { /* Make button smaller */ .button:link {font-size: 18px !important;padding:6px 17px;} .button:visited {font-size: 18px !important;padding:6px 17px;} .button:hover {font-size: 18px !important;padding:6px 22px;} .button:active {font-size: 18px !important;padding:6px 22px;} #slogan_button{bottom:-60px;} /* Automatically stacked boxes, now 3 per row instead of 4 .stacked_box_home{width:33.333%;}*/ /* Stacked box place text higher (closer to image) */ .stacked_box_home div{top:45%;} } @media screen and (max-width:880px) { /*Arrow to go down in hero*/ #arrow_down{bottom:45px;} } @media screen and (max-width:850px) { /* Selling points 2 rows */ #sp_regular{display:none;} #sp_mobile{display:block;} #sp_minimobile{display:none;} .sp_container{width:50%;} /* Stacked box image bigger */ .stacked_box_home img{width:65%;} } @media screen and (max-width:800px) { /* Social media 3 rows instead of 1 */ #social_media_container{top:120px;} .social_img{padding:0px 20px;float:none;} .social_img_rightmost{padding:0px 20px;float:none;} /* Lower position of exp_bg */ #exp_bg{top:70px;} .youtube{height:400px;} } @media screen and (max-width:780px) { /*Arrow to go down in hero*/ #arrow_down{bottom:35px;} /* Stacked box image bigger */ .stacked_box_home img{width:70%;} /* To make navigation buttons have less padding */ #nav ul li, #navL ul li {padding:50px 23px;} } @media screen and (max-width:760px) { /* Klant logo's become 2 rows instead of 1 */ #klanten_regular{display:none;} #klanten_mobile{display:block;padding:0px !important;} .klant_logo{width:50%;height:140px;} #blog_header h1 {font-size: 65px;} #blog_header h4{font-size:37px;} .text h1 {font-size: 65px;} } @media screen and (max-width:750px) { /* Smaller hero waves to make whale tail visible on mobile displays */ #hero_waves{height:150px;background-image:url(../images/hero_waves_mobile.png);} /* Automatically stacked boxes, now 2 per row instead of 4 */ .stacked_box{width:50%;} } @media screen and (max-width:700px) { /* Customer experiences 3 rows instead of 1 */ .exp_container{width:100%;padding:20px;} .header_lobster{padding:20px 0;} .header_lobster_ervaringen h2{color:#3184c0 !important;} /* Make exp_bg disappear and text and h2 blue */ #exp_bg{display:none;} .exp_header h2{color:#555 !important;} .exp_text p{color:#555 !important;} /* Extra padding for cool background disappear */ .extra_padding{padding:20px 0 !important;} /* Automatically stacked boxes, now 2 per row instead of 4 */ .stacked_box_home{width:50%;} /* Stacked box place text higher (closer to image) */ .stacked_box_home div{top:65%;} /* Stacked box image bigger */ .stacked_box_home img{width:60%;} } @media screen and (max-width:650px) { /* SWITCH TO MOBILE */ /* To let the navigation buttons disappear on mobile devices */ #nav, #navL {display:none;} /* To make mobile navigation trigger button visible */ #nav_mobile {display:inline;} .logo_parent img{width:90px;} /*Arrow to go down in hero*/ #arrow_down{bottom:25px;} .displayBelow650{display:block;} /* Switch logo */ .onlyLargeScreens{display:none;} .onlySmallScreens{display:block;} #hero{min-height:300px;} #map-canvas{min-height:300px;} } @media screen and (max-width:600px) { /* To make boxes below hero stack 2x2 instead of 1x4, and hide the words below the images */ .quarter{width:50%;} .hideunder600{display:none;} .text_below_2_rows{display:block;} /* Stacked box place text higher (closer to image) */ .stacked_box_home div{top:60%;} .vertical_space{height:30px;} #blog_header h3 {font-size:20px;} #blog_header p {font-size: 15px;} .blog_pic{padding:5px 0;} .youtube {width: 100%;margin:0;padding:5px 0;} .text {padding: 10px 10% !important;} .youtube{height:300px;} /* Switch logo */ .onlyLargeScreens2{display:none;} .onlySmallScreens2{display:block;} } @media screen and (max-width:560px) { /* Mobile menu open and close button more to the right */ #close_button {right:10px;} #nav_mobile {right:10px;} #ul_mobile li a{font-size: 15px;line-height:2;} #ul_mobile li ul li a {font-size: 15px;line-height:2;} /* Logo more to left .logo_image {padding: 7px 10px;} */ /* To make arrows in slider disappear */ nav {display:none;} /* To make text in slider disappear */ #cbp-fwslider ul li div p {display:none;} } @media screen and (max-width:550px) { /* Stacked box place text higher (closer to image) */ .stacked_box_home div{top:55%;} } @media screen and (max-width:525px) { /* Stacked box place text higher (closer to image) */ .stacked_box_home div{top:50%;} .stacked_box_home img{width:50%;} } @media screen and (max-width:500px) { /* Smaller hero waves to make whale tail visible on mobile displays */ #hero_waves{height:150px;background-image:url(../images/hero_waves_minimobile.png);} /*Arrow to go down in hero*/ #arrow_down{bottom:15px;} /* Automatically stacked boxes, now 2 per row instead of 4 */ .stacked_box_home{width:100%;} /* Stacked box place text higher (closer to image) */ .stacked_box_home div{top:82%;} /* Stacked box image bigger */ .stacked_box_home img{width:50%;} /* To make text smaller in stacked boxes */ .stacked_box div h3{font-size:40px;} } @media screen and (max-width:470px) { /* Stacked box place text higher (closer to image) */ .stacked_box_home div{top:75%;} } @media screen and (max-width:450px) { #blog_header h1 {font-size: 55px;} #blog_header h4 {font-size:22px;line-height: 1.2em !important;} .text {padding: 3% 5% !important;} .text h1 {font-size: 55px;} } @media screen and (max-width:440px) { /* Selling points 4 rows */ #sp_regular{display:none;} #sp_mobile{display:none;} #sp_minimobile{display:block;} .sp_container{width:96%;} } @media screen and (max-width:430px) { /* Make button smaller */ .button:link {font-size: 16px !important;padding:6px 17px;} .button:visited {font-size: 16px !important;padding:6px 17px;} .button:hover {font-size: 16px !important;padding:6px 22px;} .button:active {font-size: 16px !important;padding:6px 22px;} #slogan_button{bottom:-50px;} /* Footer text smaller */ .footer_back_left_text{padding:10px 10px;} .footer_back_right_text{padding:10px 10px;} /* Footer logo smaller */ #footer_logo{width:100px;top:95px;} #footer_logo h3{font-size:18px !important;} #footer_logo h4{font-size:14px !important;} #footer_waves{width:800px !important;top:-70px;} /* Social media buttons smaller and closer to right */ .social_img img{width:30px;} .social_img_rightmost img{width:30px;} .social_img{padding:0 10px;} .social_img_rightmost{padding:0 10px;} /* Stacked box place text higher (closer to image) */ .stacked_box_home div{top:70%;} } @media screen and (max-width:400px) { /* Klanten logos become 4 rows */ #klanten_mobile{display:none;} #klanten_minimobile{display:block;padding:0 !important;} .klant_logo{width:100%;} #button{height:80px;} /*Arrow to go down in hero*/ #arrow_down{bottom:25px;} /* Stacked box place text higher (closer to image) */ .stacked_box_home div{top:65%;} /* To make text smaller in stacked boxes */ .stacked_box div h3{font-size:30px;} .stacked_box div p{font-size:12px;} .youtube{height:200px;} } @media screen and (max-width:350px) { } @media screen and (max-width:350px) { /* Stacked box place text higher (closer to image) */ .stacked_box_home div{top:60%;} } @media screen and (max-width:320px) { /*Arrow to go down in hero*/ #arrow_down{display:none;} }