/* ----------------------------------------------------------------

    ** Style CSS

    ** BB-remarkable 2020

    ** www.perfectkeukens.nl

-----------------------------------------------------------------*/


/* -- Defaults -- */

/*05-01-2021*/
#navigation .navbar .navbar-custom .navbar-nav>li{padding-bottom:0!important;}
.dropdown-menu>li>a {padding:7px 14px;;font-size:18px;transition:.3s ease-in-out;}
#navigation .navbar .dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover {background-color:#01051e;}
#navigation .navbar .dropdown-menu {padding:0;}
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {background-color:unset;}
ul.dropdown-menu.list-unstyled {padding-left:20px;margin-right:-32px;}
.dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover {background-color:#c9ccdf;}

body {

    font-family: 'Sen', sans-serif;

    overflow-x: hidden;

    transition: all 0.3s ease;

}

h1 {

    font-weight: 700;

    color: #fff;

    font-size: 80px;

    margin-bottom: 30px;

    line-height: 80px;

}

h2 {

    color: #0083CA;

    font-size: 30px;

    font-weight: 600;



    line-height: 35px;

}

h3 {

    color: #252525;

    margin: 0px;

    font-size: 14px;

    font-weight: 700;

}

p {

    line-height: 26px;

    color: #01051E;

    font-family: 'Sen', sans-serif;

    font-size: 18px;

}

body #button.button {

    background-color: #FFCF00;

    border-radius: 5px;

    box-shadow: 0px 1px 2px rgba(0, 30, 46, 0.30196078431372547);

    color: #282E31;

    font-weight: 600;

    font-size: 18px;

    text-decoration: none;

    padding: 17px 25px;

    display: inline-block;

    line-height: 26px;

}

.button {

    background-color: #FFF;

    padding: 10px 15px;

    color: #01051E;

    opacity: 1;

    transition: 0.2s;

    font-weight: 700;

}

.button:hover,

.button:focus {

    text-decoration: none;

    opacity: 0.7;

    color: #01051E;

    font-weight: 700;

}



/* -- Navbar -- */

#navigation .navbar-custom {

    background-color: transparent;

    border-radius: 0PX;

    border: none;

    position: absolute;

    border-bottom: none;

    z-index: 9999;

    width: 100%;

}

#navigation .navbar-brand {

    height: 100px;

    padding: 0px;

    margin-left: 15px;

    line-height: 29px;

}

#navigation .logo-text {

    float: right;

    margin-top: 25px;

    height: 50px;

}

#navigation .navbar-brand img {

    height: 50px;

    float: left;

    display: inline;

    margin-top: 15px;

}

#navigation .navbar-custom .navbar-brand .bold {

    font-size: 30px;

    font-weight: 700;

    color: #e17b2b;

}

#navigation .navbar {

    margin: 0px;

}

#navigation .navbar-custom .navbar-brand .small {

    font-size: 15px;

    font-weight: 700;

    color: #e17b2b;

}

#navigation .navbar-custom .navbar-nav>li>a:hover {

    border: 1px solid rgba(255, 255, 255, 0.33);

}

#navigation .navbar-custom .navbar-nav>li {

    padding: 20px 0px;
    padding-bottom:0;

}

#navigation .navbar-custom .navbar-nav>li>a {

    color: #ffffff;

    font-size: 18px;

    padding: 20px;

    border: 1px solid transparent;

    transition: 0.3s;

    font-weight: 600;

    line-height: 26px;

    padding: 2px 10px;

    margin-left: 50px;

}

#navigation .navbar-custom .navbar-nav>li:first-child a {

    margin-left: 0px;

}

#navigation .navbar-custom .navbar-nav>.active>a {

    border: 1px solid #fff;

    background-color: transparent;

}



/* -- Header -- */

.header {

    height: 100vh;

    width: 100%;

    background-size: cover;

}

.header-img {

    width: 100%;

    height: 100%;

    background-color: rgba(1, 5, 30, 0.33);

    z-index: 2;

    position: relative;

}

.header .align {

    height: 100vh;

    display: table-cell;

    vertical-align: middle;

}

.header p {

    color: #fff;

}

.header .afspraak-maken {

    background-color: rgba(1, 5, 30, 0.8);

    padding: 60px 0px;

    height: 145px;

    margin-top: -145px;

    float: left;

    width: 71%;

}

.header .afspraak-maken:before {

    content: "";

    background-color: rgba(1, 5, 30, 0.8);

    display: block;

    height: 145px;

    width: 50%;

    width: 100%;

    margin-left: -100%;

    position: absolute;

    margin-top: -60px;

}

.header .second-img {

    background-size: cover;

    opacity: 1;

    animation: fade 7s;

    height: 100vh;

    margin-bottom: -100vh;

}

@keyframes fade {

  0% {opacity: 0;}

   50% {opacity: 0;}

    100% {opacity: 1;}

}

.header .afspraak-maken .content {

    float: left;

}

.header .afspraak-maken .right {

    float: right;

}

.header .afspraak-maken .button {

    margin-right: 50px;

}

.header video {

    width: 100%;

}

.header .video-container {

    width: 100%;

    height: 100vh;

    overflow: hidden;

    margin-bottom: -100vh;

    animation: mymove 1s ;

    opacity: 1;

}



@keyframes mymove {

  from {opacity: 0;}

  to {opacity: 1;}

}



/* -- Content 1 -- */

.content1 {

    margin: 150px 0px;

}

.content1 h2,

.content2 h2,

.content3 h2,

h2.main {

    color: #01051E!important;

    line-height: 50px!important;

    font-size: 40px!important;

    max-width: 400px!important;

}

.content1 img,

.content2 img,

.content3 img {

    max-width: 100%;

}

.project.content2 img {

    margin-bottom: 50px;

}

.content1, .content2, .content3 {

    z-index: 9999;

    position: relative;

}

.content2 .align,

.content3 .align {

    vertical-align: middle;

    height: 390px;

    display: table-cell;

}



/* -- Content 2 -- */

.content3 img {

    float: right;

}



/* -- Slider-- */

.slider {

    margin: 150px 0px;

}

.slider .item.row {

    min-height: 150px;

    transition: 1s;

}

.slider .item.row .col-sm-9 {

    background-color: #01051E;

}

.slider .content {

    padding: 100px 0px;

    margin-left: 274px;

    max-width: 590px;

    height: 450px;

}

.slider .content h3 {

    color: #FFFFFF;

    font-size: 40px;

    line-height: 40px;

    margin-bottom: 30px;

    font-weight: 700;

}

.slider .content p,

.slider .content a,

.slider .content li,

.slider .content  {

    color: #fff;

}

#slider .carousel-inner .button {

    color: #01051e;

    margin-top: 5px;

    display: inline-block;

}

section.header.stripe .container {

    border-left: 1px solid rgba(255, 255, 255, 0.15);

    border-right: 1px solid rgba(255, 255, 255, 0.15);

}

section.header.stripe .container:before {

    border-right: 1px solid rgba(255, 255, 255, 0.15);

    height: 400px;

    width: 390px;

    margin-bottom: -400px;

    display: block;

}

section.header.stripe.home .container:after {

    height: 100vh;

    margin-top: -100vh;

}

section.header.stripe.home .container:before {

    height: 100vh;

    margin-bottom: -100vh;

}

section.header.stripe .container:after {

    border-left: 1px solid rgba(255, 255, 255, 0.15);

    height: 400px;

    width: 390px;

    margin-top: -400px;

    display: block;

    float: right;

}

.slider .image-box {

    height: 350px;

    width: 500px;

    background-size: cover;

    background-position: center;

    z-index: 999;

    position: relative;

}

.slider .container #slider:after {

    content: "";

    background-color: #01051e;

    width: 100%;

    height: 450px;

    margin-left: 97%;

    position: absolute;

    top: 0px;

}

.slider  {

    overflow: hidden;

}

.slider .carousel-inner .item,

.slider2 .carousel-inner .item {

  -webkit-transition-property: opacity;

  transition-property: opacity;

}

.slider .carousel-inner .item .image-box,

.slider .carousel-inner .active.left .image-box,

.slider .carousel-inner .active.right .image-box,

.slider2 .carousel-inner .item .image-box,

.slider2 .carousel-inner .active.left .image-box,

.slider2 .carousel-inner .active.right .image-box {

  opacity: 0!important;

}

.slider .carousel-inner .active .image-box,

.slider .carousel-inner .next.left .image-box,

.slider .carousel-inner .prev.right .image-box,

.slider2 .carousel-inner .active .image-box,

.slider2 .carousel-inner .next.left .image-box,

.slider2 .carousel-inner .prev.right .image-box {

  opacity: 1!important;

}

.slider .carousel-inner .next .image-box,

.slider .carousel-inner .prev .image-box,

.slider .carousel-inner .active.left .image-box,

.slider .carousel-inner .active.right  .image-box,

.slider2 .carousel-inner .next .image-box,

.slider2 .carousel-inner .prev .image-box,

.slider2 .carousel-inner .active.left .image-box,

.slider2 .carousel-inner .active.right  .image-box  {

    left: 0!important;

    -webkit-transform: translate3d(0, 0, 0)!important;

    transform: translate3d(0, 0, 0)!important;

}

.slider .carousel-indicators li {

    border: 2px solid #01051E;

    border-radius: 0px;

    width: 13px!important;

    height: 13px!important;

    margin: 1px!important;

}

.slider .carousel-indicators li.active {

    background-color: #01051E;

}

.slider  .carousel-control {

  z-index: 2;

}

.slider .carousel-control {

  z-index: 2;

}

.slider2 .item,

.slider .item {

    width: 100%!important;

    padding-right: 0px;

}

.slider .carousel-indicators {

    left: 37px;

    bottom: 0px;

}

.slider2 {
    margin: 150px 0px;
}
.slider2 .image-box {
    width: 100%;
    height: 500px;
    margin-left: 25px;
    background-size: cover;
}
.slider2 .content {
    height: 500px;
    vertical-align: middle;
    display: table-cell;
}
.slider2 h3 {
    margin-bottom: 30px;
    font-size: 40px;
    line-height: 50px;
    color: #01051E;
}
.slider2 .control {
    position: absolute;
    width: calc(100% - 25px);
    margin-top: -373px;
    right: 0px;
}
.slider2 .carousel-inner {
    height: 600px;
}
.slider2 .thumb {
    cursor: pointer;
}
.slider2 .control .left {
    float: left;
    display: inline-block;
}
.slider2 .control .right {
    float: right;
    display: inline-block;
}
.slider2 span.material-icons {
    background-color: rgb(1 5 30 / 43%);
    color: #ffffff;
    width: 34px;
    padding: 5px;
}
.slider2 .carousel-indicators .active,
.slider2 .thumb {
    height: 100px;
    width: 100px;
    background-size: cover;
    display: inline-block;
}

.slider2 .carousel-indicators {
    width: calc(100% - 45px);
    right: 0px;
    left: unset;
    top: 502px;
}



/* -- Projecten -- */

section.header.content {

    background-color: #01051E;

    height: auto;

    height: unset;

    overflow: hidden;

}

section.header.content h1 {

    margin-top: 125px;

}

section.header.content p {

    padding-bottom: 125px;

}

section.header.content .container:before {

    left: 40%;

}

section.header.content .container:after {

    right: 40%;

}

textarea {

    max-width: 100%;

}

.projecten {

    margin: 150px 0px;

}

.projecten .col-project {

    padding-right: 1px;

    padding-left: 1px;

}

.projecten .block {

    height: 390px;

    transition: 0.3s;

    margin-top: 2px;

    background-size: cover;

}

.project span.imagecontent {

    background-color: rgba(1, 5, 30, 0.8);

    position: absolute;

    left: 15px;

    color: #fff;

    padding: 10px 30px;

    bottom: 70px;

}

.content3 span.imagecontent {

    background-color: rgba(1, 5, 30, 0.8);

    position: absolute;

    right: 15px;

    color: #fff;

    padding: 10px 30px;

    bottom: 30px;

}

#slider  span.imagecontent {

    background-color: rgba(1, 5, 30, 0.8);

    position: absolute;

    right: -10px;

    color: #fff;

    padding: 10px 30px;

    bottom: 30px;

}



.projecten a {

    transition: 0.3s;

}

.projecten a:hover .block .gradient  {

    background-color: rgba(1, 5, 30, 0.50);

}

.projecten .block .gradient {

    background-color: rgba(1, 5, 30, 0.33);

    height: 100%;

    transition: 0.3s;

}

.projecten .project .row,

.projecten .row.spec {

    padding: 0 15px;

}

.projecten h2.main {

    margin-bottom: 40px;

}

.projecten h2.spec {

    position: absolute;

    bottom: 23px;

    margin: 0px;

    left: 30px;

    color: #fff;

    letter-spacing: 1.4px;

    text-transform: uppercase;

    font-size: 14px;

    font-weight: 300;

    line-height: 26px;

}




.projecten.second h2.main {

    max-width: unset!important;

}








.projecten {

    margin: 150px 0px;

}

.projecten .col-project {

    padding-right: 1px;

    padding-left: 1px;

}

.projecten .block {

    height: 390px;

    transition: 0.3s;

    margin-top: 2px;

    background-size: cover;

}

.project span.imagecontent {

    background-color: rgba(1, 5, 30, 0.8);

    position: absolute;

    left: 15px;

    color: #fff;

    padding: 10px 30px;

    bottom: 70px;

}


.content3 span.imagecontent {

    background-color: rgba(1, 5, 30, 0.8);

    position: absolute;

    right: 15px;

    color: #fff;

    padding: 10px 30px;

    bottom: 30px;

}

#slider  span.imagecontent {

    background-color: rgba(1, 5, 30, 0.8);

    position: absolute;

    right: -10px;

    color: #fff;

    padding: 10px 30px;

    bottom: 30px;

}



.project-slider a {

    transition: 0.3s;

}
.project-slider .owl-prev, .project-slider .owl-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}
 .project-slider button.owl-prev {
    background-color:#01051E!important;
    border: none;
    border-radius: 5px;
    color: #fff;
    padding: 12px;
    left: -70px !important;
}
.project-slider button.owl-next {
    background-color:#01051E!important;
    border: none;
    border-radius: 5px;
    color: #fff;
    padding: 12px;
    right: -70px !important;
}
.project-slider .block {
  max-height: 400px;
position: relative;
background-size: cover;
}
.project-slider a:hover .block .gradient  {

    background-color: rgba(1, 5, 30, 0.50);

}

.project-slider .block .gradient {

    background-color: rgba(1, 5, 30, 0.33);

    height: 100%;

    transition: 0.3s;

}

.project-slider .project .row,

.project-slider .row.spec {

    padding: 0 15px;

}

.project-slider h2.main {

    margin-bottom: 40px;

}

.project-slider h2.spec {

    position: absolute;

    bottom: 23px;

    margin: 0px;

    left: 30px;

    color: #fff;

    letter-spacing: 1.4px;

    text-transform: uppercase;

    font-size: 14px;

    font-weight: 300;

    line-height: 26px;

}




.project-slider.second h2.main {

    max-width: unset!important;

}
























.uspbox {

    border: 1px solid #01051E;

    max-height: 86px;

    margin-top: 30px;

}

.uspbox .usp1,

.uspbox .usp2,

.uspbox .usp3 {

    width: 33%;

    display: inline-block;

    border-right: 1px solid black;

    padding: 17px 25px;

}

.uspbox .usp3 {

    border-right: 0px;

}

.uspbox b {

    float: left;

    color: #01051E;

    font-size: 30px;

    margin-right: 30px;

    line-height: 50px;

}

.uspbox p {

    margin: 0px;

    height: 51px;

    vertical-align: middle;

    display: table-cell;

    line-height: 19px;

}



/* -- Projecten Diepte -- */

section.header.content.img {

    background-size: cover;

    background-position: center;

}

section.header.content.img .back {

    letter-spacing: 1.8px;

    text-transform: uppercase;

    color: #fff;

    margin-bottom: 10px;

    font-size: 18px;

}

section.header.content.img .gradient {

    background-color: rgba(1, 5, 30, 0.33);

}

section.header.content.img h1 {

    margin-top: 0px;

}

section.header.content.img p {

    padding-bottom: 0px;

}

section.header.content.img .align {

    display: table-cell;

    vertical-align: middle;

    height: 400px;

}

section.header.content.img .align span.material-icons {

    vertical-align: sub;

}





/* -- Contact -- */

.contact {

    margin: 100px 0px;

}

.contact li {

    font-size: 18px;

    color: #01051E;

    line-height: 26px;

}

.contact .blue {

    padding: 5px 0px;

}

.contact .blue a {

    color: #01051E;

    font-weight: bold;

}

.contact .blue a:hover {

    text-decoration: none;

}

.contact .blue span {

    width: 30px;

    vertical-align: bottom;

}

.contact .box {

    border: 1px solid #F2F2F2;

    background-color: #fff;

    padding: 30px;

    margin-top: -330px;

}

.back a {

    color: #fff;

}

div#myModal {

    z-index: 99999999;

}

.back a:hover {

    text-decoration: none;

}

.contact h2 {

    margin: 0px;

    color: #01051E;

    font-size: 18px;

    font-weight: 800;

}

.usp.item.aos-init.aos-animate {

    margin-top: 50px;

    margin-bottom: 100px;

}

.contact .button {

    color: #fff;

    border: none;

    background-color: #01051E;

}

.contact .icon {

    position: absolute;

    right: 15px;

    top: 20px;

}

.contact .modal-content {

    border-radius: 0px;

    border: none;

}

.contact .modal-footer {

    border: none;

}

.modal-backdrop {

    background-color: #01051e;

}





/* -- Footer -- */

footer#footer {

    background-color: #01051E;

    padding: 100px 0px;

}

footer#footer li {

    line-height: 35px;

}

footer#footer li,

footer#footer p,

footer#footer a {

    color: #fff;

    font-size: 14px;

}

footer#footer a:hover {

    text-decoration: none;

}

footer#footer .button {

    color: #01051E;

    margin-top: 30px;

    display: inline-block;

}

#footer img {

    height: 50px;

}



section.contact-blok .blok .gradient {
    width: 100%;
    height: 270px;

    background: rgb(245,245,249);
    background: -moz-linear-gradient(90deg, rgba(245,245,249,1) 0%, rgba(250,250,250,0) 60%);
background: -webkit-linear-gradient(90deg, rgba(245,245,249,1) 0%, rgba(250,250,250,0) 60%);
background: linear-gradient(90deg, rgba(245,245,249,1) 0%, rgba(250,250,250,0) 60%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f5f5f9",endColorstr="#fafafa",GradientType=1);
}
section.contact-blok {
    margin: 150px 0px;
}
section.contact-blok .content {
    margin: 50px;
}
section.contact-blok .blok {
    background-color: #F5F5F9;
    height: 270px;
    background-size: cover;
    background-position: center;
}
section.contact-blok h3 {
    font-size: 40px;
    margin-bottom: 45px;
    line-height: 45px;
}
section.contact-blok .button {
    margin-top: 45px;
}
section.contact-blok .content .button {
    background-color: #01051e;
    color: #fff;
}
 #footer .block {
    width: 100%;
    display: block;
    margin-top: 28px;
    float: left;
    margin-left: 15px;
}
#footer .block i {
    font-size: 21px;
    color: #fff;
}

.ulcustom li i {
    color: #fff;
    padding: 29px 0px;
    font-size: 21px;
}
.ulcustom {
    margin-left: 10px;
}


.orderform .panel-body {
    padding: 0px;
    border: none;
}
.orderform .panel-default {
    border: none;
    box-shadow: none;
    margin-top: 30px;
}
#myModal.modal.fade.in {
    display: block!important;
}

/* -- landingspagina -- */
section.header.home.stripe.landing {
    overflow: hidden;
    height: 700px;
}
section.header.home.stripe.landing .align {
    height: 700px;
}
.mfp-wrap {
    z-index: 9999999999;
}
.mosaic.c1, .mosaic.c2 {
    padding: 50px 0px;
}


.header.vac .afspraak-maken .content {
    width: calc(100% - 189px);
}
.header.vac .afspraak-maken {
    padding: 0px;
    height: 145px;
}
.header.vac .content p {
    height: 145px;
    vertical-align: middle;
    display: table-cell;
}
.header.vac .afspraak-maken .right {
    margin: 65px 0px;
}
.header.vac .afspraak-maken:before {
    margin-top: 0px; 
}
.col-actions {
    position: relative;
    z-index: 999999;
    color: #fff;
    opacity: 1;
}
#tab-pane-pages .col-actions  a {
    fill: #fff!important;
    opacity: 1;
}
.artikel1 h2, .artikel1 h3 {
    color: #01051e;
    margin-bottom: 20px;
}
.artikel1 {
    margin: 100px 0px;
}
.blok.sollform h3 {
    margin-bottom: 7px;
}
.blok.sollform .content {
    margin: 50px;
    margin-right: 0px;
}
.blok.sollform .content a {
    color: #01051E;
}
.blok.sollform .content .button {
    margin-top: 10px;
    color: #fff;
    display: inline-block;
}