body,html {
height: 100%;
font-family: "proxima-nova";
font-size: 15px;
font-weight: 400;
}
body {
/* padding-top: 50px; */
}
a {
text-decoration: none !important;
}
h2 {
font-size: 1.4em;
font-weight: 700;
letter-spacing: .10em;
}
h3 {
font-size: 1.9em;
line-height: 1.3em;
font-weight: 400;
}
h4 {
font-size: 1.5em;
font-weight: 400;
}
p {
line-height: 27px;
font-size: 1.1em;
}
.vacature-mothership {
position: relative;
}
.vacature-mothership .notification-getal {
width: 22px;
height: 22px;
line-height: 22px;
display:block;
color:white;
text-align:center;
font-size:10px;
font-weight:bolder;
background:red;
position: absolute;
border-radius: 50%;
right: -18px;
top:-15px;
}
.margin-right-15 {
margin-right: 15px;
}
li .symbol-badge {
display:inline-block;
border-radius:50%;
color:white;
text-align:center;
font-size:10px;
font-weight:bolder;
padding:4px 9px 3px 8px;
margin:20px 0px 0px 2px;
background:red;
}
section{
margin: 50px auto;
}
section#diensten {
margin: 0px auto 0px auto;
}
section#portfolio {
margin-top: 0px;
}
section#footer {
margin-bottom: 0px;
}
.padding-box-30 {
padding: 30px 0;
}
.margin-bottom-30 {
margin-bottom:30px;
}
.container-full {
width: 100%;
padding: 0 30px;
}
.werkblok {
position: relative;
}
.werkblok .overlay-zwart {
background: rgba (0,0,0,.85) no-repeat;
position: absolute;
display: block;
z-index: 999;
}
blockquote {
border-left: 0px !important;
text-align: center;
font-size: 17.5px;
margin: 0 0 20px;
padding: 10px 20px;
}
blockquote p{
color: #fff;
font-style: italic;
font-weight: 100;
}
.streepje {
width: 100px;
height: 1px;
background: #000;
display: inline-block;
margin: 10px auto 20px auto;
}
.streepje-invert {
width: 100px;
height: 1px;
background: #fff;
display: inline-block;
margin: 10px auto 20px auto;
}
.bg-black .title {
color: #fff;
}
.wide {
width:100%;
height:100%;
height:calc(100% - 0px);
background-image:url('../images/bg7.jpg');
background-size:cover;
background-position: center top;
position: relative;
}
.wide .scroll-for-more {
position: absolute;
width: 50px;
height: 50px;
bottom: 0px;
display: block;
margin-left:-25px;
left:50%;
color: #fff;
text-align: center;
}
.wide .scroll-for-more span{
margin-top: 30px;
display: inline-block;
font-size: .8em;
}
.margin-top-40 {
margin-top: 40px;
}
.margin-top-60 {
margin-top: 60px;
}
.margin-top-160 {
margin-top: 160px;
}
.wide-content{
position: relative;
margin:30% auto 0 auto !important;
width: 100%;
max-width: 1140px;
}
.wide-content h1 {
text-transform: uppercase;
font-size: 4.6em;
color:#fff;
font-weight: 700;
letter-spacing: .05em;
text-align: center;
margin-bottom: 20px;
}
.wide-content p {
font-size: 1.2em;
color:#fff;
font-weight: 100;
letter-spacing: .2em;
text-transform:uppercase;
}
.button {
background: #000;
padding:15px 25px;
display: inline-block;
font-size: 1.2em;
font-weight: 300;
letter-spacing: .20em;
color: #fff;
margin-top: 20px;
border: none;
border: 0px;
}
.button:hover, .button:focus {
background: #000;
color: #fff;
}
.button-small {
background: #000;
padding:10px 20px;
display: inline-block;
font-size: 1em;
font-weight: 300;
letter-spacing: .15em;
color: #fff;
margin-top: 20px;
border: none;
border: 0px;
}
.button-small:hover, .button-small:focus {
background: #000;
color: #fff;
}
.button-ghost {
background: transparent !important;
border: 1px solid #fff !important;
padding:10px 20px;
display: inline-block;
font-size: 1em;
font-weight: 300;
letter-spacing: .15em;
color: #fff;
margin-top: 20px;
border: none;
border: 0px;
}
.button-ghost:hover, .button-ghost:focus {
background: #fff !important;
border: 1px solid #fff !important;
padding:10px 20px;
display: inline-block;
font-size: 1em;
font-weight: 300;
letter-spacing: .15em;
color: #000;
margin-top: 20px;
border: none;
border: 0px;
}
.wide img {
width:100%;
}
.navbar {
border:none;
}
.navbar-right {
margin-top: 25px;
}
.navbar-default {
background: none;
}
/*
.navbar-nav > li > a {
color: #fff;
font-size: 1.2em;
letter-spacing: .20em;
font-weight: 300;
}
.navbar-toggle {
margin-top: 40px;
}
*/
.navbar-toggle .fa {
color: #fff;
font-size: 26px;
/* margin-top: 20px; */
}
.scrolled .navbar-toggle .fa {
margin-top:0px;
color: #666;
}
.navbar {
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
margin-bottom: 0px;
}
.navbar.scrolled {
background: rgb(255, 255, 255); //IE
background: rgba(255, 255, 255, 0.78); //NON-IE
}
.navbar-nav > li > a {
color: #fff;
font-size: 1.2em;
letter-spacing: .20em;
font-weight: 300;
}
.navbar-nav > li > a:focus, .navbar-nav > li > a:hover {
background: none;
}
.scrolled .navbar-nav > li > a{
color: #666;
}
.scrolled .navbar-brand {
padding-top: 8px;
}
.scrolled .navbar-right {
margin-top: 5px;
}
.navbar-brand.smaller {
height: 50px;
}
.diensten-menu {
list-style-type: none;
margin-left: auto;
margin-right: auto;
}
.diensten-menu li{
display: inline;
float:left;
width: 33%;
color: #fff;
font-size: 1.25em;
font-weight: 100;
}
.diensten-menu li i {
font-size: 60px;
margin-bottom: 20px;
}
.bg-black {
background: black;
}
.bg-light-blue {
background: #e9f3f5;
}
.over-ons-menu-holder {
padding: 20px 0;
}
.padding-box-40 {
padding: 40px 0px;
}
/* CAROUSEL */
/* carousel */
#quote-carousel
{
padding: 0 10px 30px 10px;
}
/* Control buttons */
#quote-carousel .carousel-control
{
background: none;
color: #fff;
font-size: 2.3em;
text-shadow: none;
font-weight: 100;
}
/* Previous button */
#quote-carousel .carousel-control.left
{
left: -12px;
}
/* Next button */
#quote-carousel .carousel-control.right
{
right: -12px !important;
}
/* Changes the position of the indicators */
#quote-carousel .carousel-indicators
{
right: 50%;
top: auto;
bottom: 0px;
margin-right: -19px;
}
/* Changes the color of the indicators */
#quote-carousel .carousel-indicators li
{
border: 2px solid #c1c1c1;
}
#quote-carousel .carousel-indicators .active
{
background: #fff;
border: 2px solid #fff;
}
#quote-carousel img
{
width: 250px;
height: 100px
}
/* End carousel */
.item blockquote {
border-left: none;
margin: 0;
}
.item blockquote img {
margin-bottom: 10px;
}
/*
.item blockquote p:before {
content: "\f10d";
font-family: 'Fontawesome';
float: left;
margin-right: 10px;
}
*/
/**
MEDIA QUERIES
*/
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
#quote-carousel
{
margin-bottom: 0;
padding: 0 40px 30px 40px;
}
}
/* Small devices (tablets, up to 768px) */
@media (max-width: 768px) {
/* Make the indicators larger for easier clicking with fingers/thumb on mobile */
#quote-carousel .carousel-indicators {
bottom: -20px !important;
}
#quote-carousel .carousel-indicators li {
display: inline-block;
margin: 0px 5px;
width: 15px;
height: 15px;
}
#quote-carousel .carousel-indicators li.active {
margin: 0px 5px;
width: 20px;
height: 20px;
}
.sub-footer .copyright {
display: block;
clear:both;
color: #7a7a7a;
margin-bottom: 10px;
}
.sub-footer .adres {
display: block;
clear:both;
color: #7a7a7a;
margin-bottom: 10px;
}
.sub-footer .telefoon {
display: block;
clear:both;
color: #7a7a7a;
}
}
/* EINDE CAROUSEL */
/* ///// */
header {
width: 100%;
/* height: 90px; */
overflow: hidden;
position: fixed;
top: 0;
left: 0;
z-index: 999;
-webkit-transition: height 0.3s;
-moz-transition: height 0.3s;
-ms-transition: height 0.3s;
-o-transition: height 0.3s;
transition: height 0.3s;
}
header h1#logo {
letter-spacing: .10em;
display: inline-block;
float: left;
margin-top: 25px;
font-family: "proxima-nova", sans-serif;
font-size: 28px;
color: white;
font-weight: 700;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
header .navbar-toggle {
margin-right: 0px;
}
.navbar-default .navbar-toggle {
background: transparent !important;
}
header .navbar-toggle i {
color: #fff;
}
header h1#logo i {
margin-right: 10px;
}
header h1#logo a{
color: #fff;
}
header nav ul{
list-style-type: none;
}
header nav li{
float: left;
}
header nav {
display: inline-block;
float: right;
}
header nav a {
line-height: 80px;
margin-left: 20px;
letter-spacing: .15em;
color: #fff;
color: rgba(255,255,255,.8);
font-weight: 400;
font-size: 1.0em;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
header nav a:hover, header nav a:focus {
color: #fff;
}
header.smaller {
/* height: 65px; */
background: #fff !important;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
header.smaller .navbar-fixed-top {
background: #fff;
}
header.smaller h1#logo {
/* width: 150px; */
/* height: 30px; */
line-height: 10px;
font-size: 24px;
color: #000;
text-align: left;
margin-top: 20px;
}
header.smaller h1#logo a{
color: #000;
}
header h1#logo i {
font-size: 1.2em !important;
}
header.smaller nav a {
line-height: 30px;
color: #000;
}
header.smaller nav {
margin-top: 22px;
}
header.smaller nav .symbol-badge {
margin-top:-3px;
}
@media all and (max-width: 660px) {
header {
/* height: 250px; */
height: auto;
overflow: visible !important;
}
header h1#logo {
display: block;
float: none;
margin: 0 auto;
/* height: 70px; */
line-height: 70px;
text-align: center;
}
header nav {
display: block;
float: none;
text-align: center;
margin: 0 auto;
margin-top: 22px;
}
header nav a {
line-height: 35px;
margin: 0 10px;
}
header.smaller {
/* height: 250px; */
height: auto;
}
header.smaller h1#logo {
/* height: 40px; */
line-height: 50px;
font-size: 24px;
margin-top:0px;
}
header.smaller nav {
/* height: 35px; */
margin-top: 22px;
}
header.smaller nav a {
line-height: 35px;
margin: 0 10px;
}
header.smaller .navbar-toggle i {
color: #000;
}
header.smaller .navbar-toggle {
margin-top: 2px;
}
header nav ul {
z-index: 999;
height: auto;
padding-left: 0px;
}
header nav ul li{
float: none;
}
header nav ul li a{
color: #000;
}
header nav ul li a:hover{
color: #000;
}
.navbar-collapse {
/* height: 180px; */
border-top:0;
background: #fff;
}
}
/* //// */
@media (max-width: 767px) {
.wide-content{
position: absolute;
top:25% !important;
width: 90%;
max-width: 1140px;
}
.wide-content h1{
font-size: 3em;
}
.wide-content p {
font-weight: 300;
}
}
/* FORM ELEMENTEN */
.contact-formulier p{
font-size: .8em;
}
textarea:focus, input:focus{
outline: none;
}
*:focus {
outline: none;
}
input[type="text"] {
color: #000 !important;
width: 100%;
height: 50px;
border-left: 0px;
border-right: 0px;
border-top: 0px;
border-bottom: 1px solid #000;
color: #000;
border-radius: 0;
}
textarea {
color: #000 !important;
width: 100%;
border-left: 0px;
border-right: 0px;
border-top: 0px;
border-bottom: 1px solid #000;
margin-top: 20px;
border-radius: 0;
}
.margin-top-20 {
margin-top: 20px;
}
/* EINDE FORM ELEMENTEN */
footer {
background: #000;
padding: 50px 0;
}
footer .sub-footer {
color: #7a7a7a;
}
.social-media {
list-style-type: none !important;
display: inline-block;
padding-left: 0px;
margin-bottom: 20px;
}
.social-media li {
float: left;
display: inline-block;
margin: 0 10px;
}
.social-media li i{
/* color: #fff; */
}
.social-media li .fa-twitter, .social-media li .fa-facebook, .social-media li .fa-google-plus, .social-media li .fa-instagram{
color: #fff !important;
}
/* TABS */
ul#tabs {
list-style-type: none;
padding: 0;
text-align: center;
}
ul#tabs li {
display: inline-block;
padding: 5px 20px;
margin-bottom: 4px;
color: #c1c1c1;
cursor: pointer;
}
ul#tabs li:hover {
color: #fff;
}
ul#tabs li.active {
color: #fff;
}
ul#tab {
list-style-type: none;
margin: 0;
padding: 0;
}
ul#tab li {
display: none;
}
ul#tab li.active {
display: block;
}
.margin-left-20 {
margin-left:20px;
}
.margin-right-10 {
margin-right:10px;
}
/* navbar */
.navbar-toggle {
border: 0px;
}
.navbar-default .navbar-toggle {
background: transparent
}
.text-white {
color: #fff !important;
}
.bg-white {
background: #fff;
}
.big {
font-size: 1.4em;
font-weight: 100;
}
.dienst {
margin-bottom: 30px;
}
.dienst i {
margin-bottom: 15px;
font-size: 3.1em;
clear: left;
display: inline-block;
}
.dienst-titel {
font-size: 1.3em;
font-weight: 100;
clear: left;
display: inline-block;
}
@media (max-width: 768px) {
.dienst {
min-height: 120px;
}
.dienst {
margin-bottom: 10px;
}
.dienst-titel {
line-height: 1.15em;
}
}
.animatedModal {
position: relative;
padding-bottom: 100px;
}
.close-animatedModal {
cursor: pointer !important;
position: absolute;
top: 20px;
right: 50px;
z-index: 999;
}
.close-animatedModal i {
font-size: 3em;
}
.animatedModal-on {
background: #fff !important;
}
.modal-content {
box-shadow: none !important;
border: 0px !important;
border: none !important;
}
.portfolio-sub {
font-size: 1.4em;
font-weight: 100;
}
.modal-body img {
margin-bottom: 30px;
}
.modal-body button-small{
margin-bottom: 20px;
}
.project-data {
}
.project-data p{
display: inline-block;
line-height: 20px;
clear:both;
}
.project-data .klant{
clear:both;
display: block;
font-size: 1em;
text-transform: uppercase;
letter-spacing: .10em;
margin-bottom: 0px;
}
.project-data .werkzaamheden{
clear:both;
font-size: 1em;
text-transform: uppercase;
letter-spacing: .10em;
display: block;
margin-bottom: 0px;
}
.project-data .link{
clear:both;
display: block;
vertical-align: top;
}
.intro-tekst {
font-size: 1.6em;
font-weight: 100;
line-height: 1.4em;
}
.subtext {
font-size: 1.6em;
font-weight: 100;
margin-bottom: 50px;
line-height: 1.5em;
}
/* bg half */
.bg-half {
position: relative;
}
.bg-half-left, .bg-half-right {
height: 100%;
width: 50%;
}
.bg-half-right {
background-position: left top;
right: 0;
}
.bg-half-left, .bg-half-right {
overflow: hidden;
position: absolute;
top: 0;
}
.mailerlogo img{
display: inline-block;
}
/* bootstrap modals */
#first-child
{
top:0;
left:0;
background-color: yellowgreen;
}
#second-child
{
top:0;
left:50%;
background-color: #E6537D;
color:black;
}
#third-child
{
top:50%;
left:0;
background-color: crimson;
}
#fourth-child
{
top:50%;
left:50%;
background-color: lightseagreen;
color:black;
}
.big-box
{
position: absolute;
width: 50%;
height: 50%;
color:white;
}
.big-box h2
{
text-align: center;
margin-top: 20%;
padding: 20px;
width: 100%;
font-size: 1.8em;
letter-spacing: 2px;
font-weight: 700;
text-transform: uppercase;
cursor:pointer;
}
@media screen and (max-width: 46.5em)
{
.big-box h2
{
font-size:16px;
padding-left:0px;
}
}
@media screen and (max-width: 20.5em)
{
.big-box h2
{
font-size:12px;
padding-left:0px;
margin-top:30%;
}
}
.modal-dialog {
width: 100%;
height: 100%;
padding: 0;
margin:0;
}
.modal-content {
height: 100%;
border-radius: 0;
background: transparent;
overflow:auto;
}
.modal-title
{
font-size: 3em;
font-weight: 300;
margin: 0 0 20px 0;
color:#fff !important;
}
.modal-content-one
{
/* background-color:#fff; */
}
.modal-content-two
{
background-color:#E6537D;
}
.modal-content-three
{
background-color:crimson;
}
.modal-content-four
{
background-color:lightseagreen;
}
.close i {
margin-top: 10px;
}
.close
{
font-size: 3em;
opacity:1.0;
}
.modal-header {
border:none;
}
.project-intro {
margin-bottom: 30px;
}
.modal-header h4{
margin-bottom: 0px;
line-height: 1.15em;
}
/* einde bootstrap modals */
.parallax-window {
height: auto;
background: transparent;
}
.modal-content-1 {
background: url(../images/werk/zinzi/modalbg.jpg) no-repeat center top #fafafa !important;
background-size: cover;
width: 100%;
}
.modal-content-2 {
background: url(../images/werk/sphere8/modalbg.jpg) no-repeat center top #fafafa !important;
background-size: cover;
width: 100%;
}
.modal-content-3 {
background: url(../images/werk/rotsvast/rotsvast-bg.png) no-repeat center top #fafafa !important;
background-size: cover;
width: 100%;
}
.modal-content-vacature {
background: url(../images/vacature/modalbg.jpg) no-repeat center top #f1f1f1 !important;
background-size: cover;
width: 100%;
}
.top-modal-box {
background:none;
}
.modal-content-vacature .container {
padding-left:0px !important;
padding-right:0px !important;
}
.padding-vacature {
padding-bottom:30px;
padding-top:50px;
}
.vacature-list {
font-size:1.1em;
list-style: none;
}
.modal-title {
font-size: 42px;
color: #fff;
font-weight: 700;
}
.modalsubtitle {
color: #fff;
font-weight: 300;
font-size: 2em;
text-transform: uppercase;
letter-spacing: .15em;
line-height: 1.2em;
}
.modalservices {
background: #000;
letter-spacing: .15em;
font-size: .9em;
padding: 5px 15px;
color: #fff;
margin-top: 20px;
display: inline-block;
}
.modal {
background: #fafafa;
}
.intro-large {
font-size: 2em;
line-height: 1.3em;
font-weight: 100;
padding-right: 40px;
}
.padding-top-40 {
padding-top:40px;
}
.padding-top-80 {
padding-top:80px;
}
.floating-image {
position: absolute;
top: -200px;
right: 0px;
}
.float-holder {
position: relative;
}
.cta-blok-modal i {
font-size: 3em;
margin-bottom: 20px;
}
.border-top {
border-top: 1px solid #c1c1c1;
}
.modal h4 {
text-transform: uppercase;
color: #000;
line-height: 1.4em;
font-weight: 600;
letter-spacing: .10em;
}
.modal-contact-sub {
font-size: 1.4em;
font-weight: 100;
}