/* ------------------------------------------------
  Project:   AllYounity
  Author:    G. Wiersma
------------------------------------------------ */

html,body{height: 100%;}

.right-nav ul.list-inline li { margin-right: 20px; text-transform: capitalize; display: inline-block; color: #fff; padding-top: 5px;}
.right-nav ul.list-inline li:last-child { margin-right: 0; position:relative; top: -15px;}
.right-nav ul.list-inline li a {font-size: 16px; font-weight: 300; font-family: Merriweather; color: rgba(255,255,255,0.8); position: relative; padding-bottom: 10px; overflow: hidden;}
.right-nav ul.list-inline li a:hover {color: #0088B2; }

.right-nav ul.list-inline li a::before, .right-nav ul.list-inline li a::after { content: ""; width: 100%; height: 3px; bottom: 0; position: absolute; left: 0; -webkit-transition: width 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) 0s; -o-transition: width 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) 0s; transition: width 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) 0s; background: rgba(255,255,255,0.3); }
.right-nav ul.list-inline li a::after {width: 10%; background: #0088B2}
.right-nav ul.list-inline li a:hover::after { width: 100%;}

#slider{width: 100%;float: left;}

#slider .mainslider img{width: 100%;}

#slider-nav{width: 100%;float: left; margin-top: -76px !important; position: relative; z-index: 10;}

#slider-nav .mainslider-nav .nav-button{width: 100%; display: inline-block; padding-right: 45px;}
#slider-nav .mainslider-nav .nav-button h6{font-weight: 500; color: #222; font-family: Merriweather; font-size: 1.22rem;}
#slider-nav .mainslider-nav .nav-button h6:before{width: 10%; height: 4px; display: block; position: relative; background: #ededed; content: ""; margin: 5px 0; top: 54px; left: 0; z-index: 3;}
#slider-nav .mainslider-nav .nav-button h6:after{width: 100%; height: 4px; display: block; position: relative; background: #fff; content: ""; margin: 5px 0; left: 0; z-index: 2;}
#slider-nav .mainslider-nav .nav-button p{font-family: Open Sans; font-size: 1.100rem;}

#slider-nav .mainslider-nav .slick-current .nav-button h6{color: #2c88b2;}
#slider-nav .mainslider-nav .slick-current .nav-button h6:before{width: 100%; transform: width: 100%; transition: 0.3s; z-index: 3; background: #2c88b2;}

#slider-nav .slick-counter {width: 70px;height: 70px;background: white;text-align: center;line-height: 70px;display: block;position: absolute;right: -15px;top: -70px; }

#slider-nav .carousel-next{width: 70px; height: 70px; display: block; position: absolute;right: -70px; top: 0; border: 0px; background: #302f2d; color: #fff;}

#slider-nav .description{line-height: 2.5rem; font-family: Open Sans; font-size: 1.100rem; padding-right: 30px;}

.slick-initialized .slick-slide { outline: none !important;}

#services{width: 100%;float: left; position: relative;}
#services:before{width: 100%; height: 50%; display: block; position: absolute; content: ""; margin: 0; top: 0px; left: 0; z-index: 3;}
#services .services{width: 100%; float: left;}
#services .slick-slide {margin-left: 60px; margin-right: 60px;}
#services .slick-list {margin-left: -60px; /* px size of slide space */width: calc(100% + 120px); /* add double the px size of slide space */}

#services button.carousel-back {
    width: 70px;
    line-height: 70px;
    top: -72px;
    border: 0;
    text-align: center;
    position: relative;
    outline: none;
    background: #302f2d;
    color: #fff;
    z-index: 100;
}

#services button.carousel-next{
    width: 70px;
    line-height: 70px;
    top: -72px;
    border: 0;
    text-align: center;
    position: relative;
    outline: none;
    background: #f7f4f1;
    color: #302f2d ;
    z-index: 100;
    left: -5px;
}

.services {width: 2000px !important; float: left !important; overflow: hidden;}
.services .service-image-wrapper{width: 100%; float: left !important; overflow: hidden; position: relative;}
.services .service-image-wrapper .service-image-box{width: 100%;max-height: 600px;float: left; position: relative; z-index: 10;}
.services .service-image-wrapper .service-image{width: 100%;height: 600px;display: inline-block;overflow: hidden;text-align: center;position: relative;}
.services .service-image-wrapper .service-image img{width: 100%;height: 100%;object-fit: cover;overflow: hidden;display: block;}

.services .service-image-wrapper .info{width: 100%; display: block; position: absolute; z-index: 100; bottom: 0; right;}
.services .service-image-wrapper .content{width: 50%; display: inline-block; float: right; padding: 50px 50px 100px 50px; position: relative; z-index: 100; background: white; color: #222; bottom: 0; right;}
.services .service-image-wrapper .content .btn{position: absolute; bottom: 0; right: 0;}

#rental{width: 100%;float: left;}

#why{width: 100%; background: url('../img/about_img.png') no-repeat; background-size: 400px auto;}
#why .why{width: 100%; padding-right: 50px;}
#why .why img{height: 100px; float: left; margin-bottom: 20px;}
#why .why h6{width: 100%; float: left;}
#why .why p{width: 100%; float: left; font-family: Open Sans;}
#why a h6{color: #0088B2;}

#testimonial{width: 100%;}
#testimonial .image-container-hor{width: 100%; float: left !important; overflow: hidden;}
#testimonial .image-container-hor .image-container-box{width: 100%;max-height: 400px;float: left;}
#testimonial .image-container-hor .image-container-image{width: 100%;height: 400px;display: inline-block;overflow: hidden;text-align: center;position: relative;}
#testimonial .image-container-hor .image-container-image img{width: 100%;height: 100%;object-fit: cover;overflow: hidden;display: block;}

#about{width: 100%;}
#about .inner{width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 100px; bottom: 0; z-index: -1; background: url('../img/home2.jpg') no-repeat; background-size: cover;}
#about .inline-text{width: 100%; padding: 80px 30px 80px 80px; display: inline-block; background: white; margin-top: 300px;}
#about .inline-text:after{width: 100%; height: 100%; position: absolute; display: block; right: -100%; bottom: 0; content: ''; background: #fff; border: 0; z-index: 30;}

#artikelen{position: relative; width: 100%;}
#artikelen .articles{padding-right: 150px; position: relative; z-index: 50;}
#artikelen .slick-slide {margin-left: 10px; margin-right: 10px;}
#artikelen .slick-slide img{max-height: 250px;}
#artikelen .slick-list {margin-left: -10px; /* px size of slide space */width: calc(100% + 20px); /* add double the px size of slide space */}
#artikelen .container:after{width: 100%; height: 300px; position: absolute; display: block; right: 0; bottom: 0; content: ''; background: #f6f4f0; border: 0; z-index: 30;}
#artikelen div .carousel-next{width: 70px; line-height: 70px; right: -70px; top: 390px; border: 0; background: #fff; text-align: center; position: absolute; outline: none; background: #302f2d; color: #fff; z-index: 100;}
#artikelen .slick-counter{width: 70px; line-height: 70px; right: -15px; top: 248px; text-align: center; font-weight: bold; position: absolute; z-index: 100; outline: none; background: #fff; color: #302f2d; z-index: 100;}
#artikelen .slick-counter span{font-size: 14px; color: #302f2d;}

#references {width:100%; padding: 20px 0 0 0;}
#references .references-slider .reference{font-size: 2.1rem;}
#references .references-nav{width: 100%; float: left;}
#references .references-nav { width: 100%; float: left; text-align: center; padding-bottom: 40px; border-bottom: 1px solid #dadada;}
#references .references-nav .references-image {;width: 20%; height: 100px; float: left;text-align: center; cursor: pointer; position: relative;}
#references .references-nav .references-image > div{width: 100%; display: block; position: relative;}
#references .references-nav .references-image > div img{max-height: 30px; opacity: 0.4; transition: 0.3s; display: block; margin: 0 auto;}
#references .references-nav .references-image > div img:hover{ opacity: 1; transition: 0.3s; }

#login{width: 100%; }

#content{width: 100%; float: left;}

#archive{width: 100%; float: left;}
#archive .image-container-article{margin-bottom: 35px;}

.image-container-1{width: 100%; float: left !important; overflow: hidden; position: relative;}
.image-container-1 .box{width: 100%; background: red;display: block; left: 0; top: 0; right: 0;}
.image-container-1 .box .image{width: 100%; min-height: 650px; max-height: 650px; display: block;}
.image-container-1 .box .image::before{width: 100%; height: 100%; display: block; position: absolute; content: ""; left: 0; right: 0; top: 0; background: rgba(0,0,0, 0.2);}
.image-container-1 .box .title{width: 100%; display: block; position: absolute; top: 0; left: 0; right: 0; }
.image-container-1 .box .title h4{width: 100%; display: inline-block; padding: 45px 45px 25px 45px; text-align: left; color: #fff;}
.image-container-1 .box .links{width: 100%; display: block; padding: 0px 45px 25px 45px;  position: absolute; bottom: 0; left: 0; right: 0; text-align: left; color: #fff;}
.image-container-1 .box .links span{width: 100%; display: inline-block; text-align: left; color: #fff;}
.image-container-1 .box .links span a{color: #fff;}

.image-container-2{width: 85%; float: left !important; overflow: hidden; position: relative; margin-bottom: 30px;}
.image-container-2 .box{width: 100%; background: red;display: block; left: 0; top: 0; right: 0;}
.image-container-2 .box .image{width: 100%; min-height: 300px; max-height: 300px; display: block; background: #2c88b2;}
.image-container-2 .box .title{width: 100%; display: block; position: absolute; top: 0; left: 0; right: 0; }
.image-container-2 .box .title h4{width: 100%; display: inline-block; padding: 45px 45px; text-align: left; color: #fff;}
.image-container-2 .box .links{width: 100%; display: block; padding: 45px;  position: absolute; bottom: 0; left: 0; right: 0; text-align: left; color: #fff;}
.image-container-2 .box .links span{width: 100%; display: inline-block; text-align: left; color: #fff; }
.image-container-2 .box .links span a{color: #fff;}

.image-container-3{width: 100%; float: left !important; overflow: hidden; position: relative;}
.image-container-3 .box{width: 100%; display: block; left: 0; top: 0; right: 0;}
.image-container-3 .box .image{width: 100%; min-height: 320px; max-height: 320px; display: block;}
.image-container-3 .box .image::before{width: 100%; height: 100%; display: block; position: absolute; content: ""; left: 0; right: 0; top: 0; background: rgba(0,0,0, 0.5);}
.image-container-3 .box .title{width: 100%; display: block; position: absolute; top: 0; left: 0; right: 0; }
.image-container-3 .box .title h4{width: 100%; display: inline-block; padding: 45px 45px 0px 45px; text-align: left; color: #fff;}
.image-container-3 .box .title span{width: 100%; display: inline-block; padding: 0px 45px; text-align: left; color: #fff;}

.image-container-3 .box .links{width: 100%; display: block; position: absolute; bottom: 0; left: 0; right: 0; text-align: left; color: #fff; padding: 0px 45px 25px 45px;  }
.image-container-3 .box .links span{width: 100%; display: inline-block; text-align: left; color: #fff;}
.image-container-3 .box .links span a{color: #fff;}
.image-container-3 .box .links a.btn{position: absolute; right: 0; bottom: 0;}

.image-container-article{width: 100%; float: left !important; overflow: hidden;}
.image-container-article .image-container-box{width: 100%; max-height: 300px;float: left;}
.image-container-article .image-container-image{width: 100%;height: 300px;display: inline-block;overflow: hidden;text-align: center;position: relative;}
.image-container-article .image-container-image img{width: 100%;height: 100%;object-fit: cover;overflow: hidden;display: block;}
/* SEARCH */

#search{width: 100%; height: 0px; overflow: hidden; float: left; z-index: 9999; transition: 0.3s; transition: 0.3s;}
#search .zoekveld{width: 100%; height: 0.5px; position: relative; transition: 0.3s;}
#search .close {content:''; display: block; position: absolute;width: 20px;height: 20px;right: 0px;top:-50px;color: #fff;font-size: 42px; background-size: 20px 20px; background: url('../img/close.svg'); cursor: pointer;}
#search input{width: 100%; display: inline-block; padding: 15px; background: white; border: 0px; margin-bottom: 25px;}
#search input.search-submit{width: 30px;height: 30px;display: block;position: absolute;right: 15px; bottom: -15px; background: url(../img/magnifier.svg) no-repeat center center;background-size: 21px auto;cursor: pointer;}

.search-open #search{height: 55px; margin-bottom: 25px;}
.search-open #search .zoekveld{width: 100%; height: 50px; position: relative; transition: 0.3s;}
.search {position: relative;top: 0px;}

/* Navigation */
.pagnitation{width: 100%; text-align: center; margin-top: 100px;}

.navigation {width: 100%; text-align: center; margin-bottom: 40px; position: relative;}
.navigation > h2{display:none;}
.navigation a{text-decoration:none;}
.navigation > div{display: inline-block; text-align: center;}
.navigation > div .page-numbers{line-height:50px; width: 50px; height: 50px; padding: 0px 15px;display: inline-block;color: #3c3c3b;text-decoration: none;border-radius: 0;-webkit-transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;-ms-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;}
.navigation > div .page-numbers:not(.dots):hover,
.navigation > div .page-numbers.current{border-radius: 3px; background: #3188b2; color: #fff;}
/*.navigation > div .page-numbers.prev{background:url(images/arrow_blue.svg) no-repeat center center; -webkit-transform:rotate(180deg) translateX(20px);-moz-transform:rotate(180deg) translateX(20px);-ms-transform:rotate(180deg) translateX(20px);-o-transform:rotate(180deg) translateX(20px);transform:rotate(180deg) translateX(20px); } */
/* .navigation > div .page-numbers.prev:hover{background-position: 27px center; height: 21px;} */
/*.navigation > div .page-numbers.next{background:url(../img/arrow_right.svg) repeat-x center center; -webkit-transform:translateX(20px);-moz-transform:translateX(20px);-ms-transform:translateX(20px);-o-transform:translateX(20px);transform:translateX(20px);}*/
.navigation > div .page-numbers.next:hover{background-position: 27px center;}
.navigation > div .page-numbers:not(.prev):not(.next):not(.current):not(.dots):hover{background: #ccc;color:#fff;}
.navigation > div .page-numbers.prev:hover,
.navigation > div .page-numbers.next:hover{border:0px solid transparent; padding: 0 16px;}
.navigation a.btn{padding:7px 16px; background-image:none;}
.navigation a.btn:hover{background-color:#3188b2;background-image:none; color:#fff;}
.navigation > .previous_page,
.navigation > .next_page{border:1px solid transparent; padding:7px 0; display:inline-block; font-size:14px; text-decoration:none;line-height:19px;}
.navigation > .previous_page a,
.navigation > .next_page a{-webkit-transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;-ms-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;}
.navigation > .previous_page {position: absolute; left: 0;}
/*.navigation > .previous_page a{padding-left:36px; background:url(../img/arrow_left.svg) no-repeat center left;}*/
.navigation > .previous_page a:hover{background-position:center left; background-position:center left -10px;}
.navigation > .next_page {position: absolute; right: 0;} 
/*.navigation > .next_page a{padding-right:36px; background:url(../img/arrow_right.svg) no-repeat center right;}*/
.navigation > .next_page a:hover{background-position:center right; background-position:center right -10px;}

/* Mobile */
body.mobile_active section{}
body.mobile_active section{transition: 0.3s;}
body.mobile_active .trans{width: 100%;left: -300px;transition: 0.3s; z-index: 9999;}
body.mobile_active #mobile{right: 0;}
body.mobile_active {overflow: hidden;}

.toggle2{color: #fff !important;}
.toggle2:hover i{color: #1b2d75 !important;}

.toggle{position: relative; float: right; top: -30px; right: 10px;}
.toggle i{color: #fff;}

.trans{cursor: pointer; content: ''; width: -0%; height: 100%; display: block; background: rgba(8, 18, 58, 0.5); position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 450; transition: 0.3s;}
.trans:after {content:''; display: block;position: absolute;width: 20px;height: 20px;right: 25px;top: 20px;color: #fff;font-size: 42px; background-size: 20px 20px; background: url('../img/close.svg');}
.trans:hover { background: rgba(8, 18, 58, 0.4); transition: 0.3s;}

#mobile{width: 300px;height: 100%;position: fixed; overflow-y: scroll;overflow-x: hidden;z-index: 9999;top: 0;display: inline-block;background: #11131c;right: -300px;-webkit-transition: all 500ms cubic-bezier(0.600, 0, 0.735, 0.045); /* older webkit */-webkit-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);-moz-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);-o-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045); /* easeInBack */-webkit-transition-timing-function: cubic-bezier(0.600, 0, 0.735, 0.045); /* older webkit */-webkit-transition-timing-function: cubic-bezier(0.600, -0.280, 0.735, 0.045);-moz-transition-timing-function: cubic-bezier(0.600, -0.280, 0.735, 0.045);-o-transition-timing-function: cubic-bezier(0.600, -0.280, 0.735, 0.045);transition-timing-function: cubic-bezier(0.600, -0.280, 0.735, 0.045); /* easeInBack */}
#mobile nav{right: 0;-webkit-transition: all 500ms cubic-bezier(0.600, 0, 0.735, 0.045); /* older webkit */-webkit-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);-moz-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);-o-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045); /* easeInBack */-webkit-transition-timing-function: cubic-bezier(0.600, 0, 0.735, 0.045); /* older webkit */-webkit-transition-timing-function: cubic-bezier(0.600, -0.280, 0.735, 0.045);-moz-transition-timing-function: cubic-bezier(0.600, -0.280, 0.735, 0.045);-o-transition-timing-function: cubic-bezier(0.600, -0.280, 0.735, 0.045);transition-timing-function: cubic-bezier(0.600, -0.280, 0.735, 0.045); /* easeInBack */}

.address{width: 100%; display: inline-block;padding: 35px;font-size: 12px; color: #ececec !important;}
.address .footer-info li span{position: relative; left: 20px;}
.address .footer-info h5 {color: #fff;font-weight: 400;margin-bottom: 25px;}
.address .footer-info ul{margin: 0; padding: 0;}
.address .footer-info ul li{display: inline-block; margin-right: 25px;}

ul.social{width: 100%;margin: 0px 35px 45px 35px;padding: 0px;text-align: left;display: inline-block;}
ul.social li{list-style: none;display: inline-block;margin-right: 10px;}
ul.social li a{width: 50px;line-height: 50px;color: #fff;background: #d5e9ff;color: #fff;border-radius: 25px;display: inline-block;text-align: center;}
ul.social li a:hover{background: #e63027;}

#cssmenu {width: 100%;float: left;margin: 50px 0; background: #11131c;}
#cssmenu ul{margin: 0;padding: 0;}
#cssmenu li{width: 100%;display: inline-block;list-style: none;}
#cssmenu a {border: 0;font-weight: normal;text-decoration: none;line-height: 1; font-size: 1em;position: relative;}
#cssmenu a {line-height: 1.3;}
#cssmenu > ul > li a:hover {background: rgba(0, 136, 178, 0.55); color: #fff;}
#cssmenu > ul > li > a {font-size: .9em;display: block;color: #fff;border-top: none;font-size: 14px;position: relative;}
#cssmenu > ul > li > a {display: block;padding: 15px 35px;}
#cssmenu > ul > li > a:hover {text-decoration: none;}
#cssmenu > ul > li.current_page_item a{background: #0088B2;color: #fff;}
#cssmenu > ul > li.active {border-bottom: none;}
#cssmenu > ul > li.has-sub > a span:after {content:''; display: block;position: absolute;width: 20px;height: 20px;right: 25px;top: 15px; background: url(../img/down.svg) no-repeat; background-size: 20px auto; transform: rotate(-90deg); transition: 0.3s;}
#cssmenu > ul > li.has-sub.active > a span:after {content:''; display: block;position: absolute;width: 20px;height: 20px;right: 25px;top: 15px; background: url(../img/down.svg) no-repeat; background-size: 20px auto; transform: rotate(0deg); transition: 0.3s;}
#cssmenu li.has-sub.active a span {font-weight: bold;}
#cssmenu ul ul {display: none;background: #fff;}
#cssmenu ul ul li {width: 100%;padding: 0;border-bottom: 1px solid #d4d4d4;border-top: none;background: #dedede;}
#cssmenu ul ul li:last-child {border-bottom: none;}
#cssmenu ul ul a {padding: 15px 35px;display: block;color: #676767;font-size: .8em;font-weight: normal;}
#cssmenu ul ul a:hover {color: #fff;}