@import url(../fonts/stylesheet.css);
* {margin: 0;padding: 0;box-sizing: border-box;}
img {max-width: 100%;height: auto;}
body {background: #ccc;font-size: 16px;line-height:25px;font-family: 'arialregular';font-weight: normal;color: #000000;}
ul {list-style: none;padding: 0;}
p {font-size: 25px;line-height: 30px;margin-bottom: 15px;}
a {color: #275e90;transition: 0.4s;}
a:hover{text-decoration: none;}
/* ----- Heading Font CSS ------ */

h1,h2,h3,h4,h5,h6 {font-family: 'arialregular';font-weight: normal;}
h1{font-size: 30px;}
h2{font-size: 41.827px;line-height: 50.192px;margin-bottom: 15px;}
h3 {font-size: 31.047px;line-height: 37.256px;}

a:focus,.btn:focus,button:focus,.btn-primary:not(:disabled):not(.disabled):active:focus {outline: none;box-shadow: none;}

/* global css start */
.centering{max-width: 750px;width: 100%;margin: 0 auto;}
.background_white{background: #fff;}
.wrapper{width: 100%;padding: 0 40px;}
.full_width{width: 100%;float: left;}
.blank_space{height: 80px;}
.hyper_link_box a{transition: 0.4s; font-size:20px ;line-height: 35px;font-family: 'arialitalic';text-decoration: none;}
.hyper_link_box a:hover{color: #986b23;}
.main-content{margin-top: 122.5px;}
/* global css end */

/* Main CSS */

/* header start */
.header{padding: 15px 0;border-bottom: 2px solid #ddddd8;position: fixed;z-index: 999;background: #fff;max-width: 750px;}
.header.sticky{box-shadow: 1px 1px 10px rgba(221, 221, 216, 0.9);}
.header .header_inner{display: flex;justify-content: space-between;flex-wrap: wrap;align-items: center;line-height: 1;position: relative;}
.header .menubar{position: relative;width: 40px;float: left;cursor: pointer;}
.header .logo{width:calc(100% - 80px) ;float: left;text-align: center;}
.header .logo a{width: 348px;margin: 0 auto;}
.header .logo a,.header .search_bar a{display: inline-block;}
.header .logo a img,.header .search_bar img{display: block;}
.header .search_bar{width: 40px;float: right;}

/* menu bar css */
.header .menu_hamburger{width: 40px;float: left;}
.header .mobile_bar{position: absolute;width: 40px;left: 0;top: 50%;transform: translateY(-50%);}
.header .mobile_bar span{width: 100%;height: 3px;margin-bottom: 7px;background: #006094;display: block;}
.header .mobile_bar span:last-child{margin-bottom: 0;}
/* search bar */
.search_bar  a{display: inline-block;}
.search_bar  a img{display: block;}
/* header end */
/* banner start */
.banner{margin-top: 18px;}
.banner img{display: block;}
/* banner end */
/* Campus area start  */
.campus_area{width: calc(100% - 35px); padding: 38px 0 12px;border-top: 7px solid #986b23;margin-top: -20px;background: #fff;position: relative;}
.campus_area .title{margin-bottom: 58px;}
.campus_area::after{content: "";position: absolute;bottom: 0; right: 0; width: 0; top: -6px;transition: all .15s ease;border-color: transparent transparent transparent #fff; border-width: 0 0 35px 35px;border-style: solid;transform: translateX(100%) scaleY(-1);}
/* Campus area end */
/* map area start */
.map_area{margin-bottom: 15px;}
.map_area .wrapper{overflow: hidden;position: relative;}
.map_area .map_outer{height: 500px;overflow: scroll; cursor: grab;scrollbar-width: none;}
.map_area img{display: block;max-width: unset;}
.map_area .arrow{position: absolute;width: 32px;height: 32px;cursor: pointer;z-index: 10;}
.map_area .left{left: 40px;top: 50%;transform: translateY(-50%);}
.map_area .top{left: 50%;top: 0;transform: translateX(-50%);}
.map_area .bottom{left: 50%;bottom: 0;transform: translateX(-50%);}
.map_area .right{right: 40px;top: 50%;transform: translateY(-50%);}
/* map area end */
/* Buitenruimte section start */
.buitenruimte_section{padding: 20px 0;}
.buitenruimte_section .heading{margin-bottom: 32px;}
.buitenruimte_section .map_inner_area{padding: 0 22px;display: flex;justify-content: space-between;flex-wrap: wrap;}
.buitenruimte_section .map_inner_area .map_image{width: 188px;float: left;}
.buitenruimte_section .map_inner_area .map_image a{display: block;}
.buitenruimte_section .map_inner_area .map_image img{display: block;}
.buitenruimte_section .map_inner_area .right_text{width: calc(100% - 210px);float: left;padding-top: 15px;}
.buitenruimte_section .map_inner_area .right_text p{margin-bottom: 5px;}
/* Buitenruimte section end */
/* gebouw area start */
.gebouw_area{padding: 20px 0;}
.gebouw_area .inner_section .title{margin-bottom: 20px;}
.gebouw_area .inner_section p{word-break: break-all;}
.gebouw_area .inner_section .text_box {min-height: 177px;}
.gebouw_area .inner_section h2{margin-bottom: 23px;}
.gebouw_area .inner_section p a{transition: 0.4s; display: inline-block;font-size: 20px;line-height: 24px;font-family: 'arialitalic';text-decoration: none;}
.gebouw_area .inner_section p a:hover{color: #986b23;}
.gebouw_area .map_section_repeat {padding-top: 18px;}
.gebouw_area .map_inner_area{margin-bottom: 10px; padding: 0 0px 0 20px;display: flex;justify-content: space-between;flex-wrap: wrap;align-items: center;}
.gebouw_area .map_inner_area .map_image{width: 188px;float: left;position: relative;}
.gebouw_area .map_inner_area .map_image .location_img{position: absolute;left: -28px;top: 50%;transform: translateY(-50%);}
.gebouw_area .map_inner_area .map_image a{display: block; }
.gebouw_area .map_inner_area .map_image img{display: block; }
.gebouw_area .map_inner_area .right_text{width: calc(100% - 210px);float: left;}
/* gebouw area end */

/* Responsive Css Start */

@media only screen and (min-width: 751px) {
    .centering,.header{max-width: 100%;}
    .banner img{width: 100%;}
    .wrapper{max-width: 1080px;margin: 0 auto;}
    .map_area .map_outer{height: auto;}
    .map_area .map_outer img{width: 100%;}
    .gebouw_area .map_section_repeat{display: flex;justify-content: space-between;flex-wrap: wrap;}
    .gebouw_area .map_inner_area{min-width: 48%;flex: 1;margin-bottom: 20px;}

}
@media only screen and (max-width: 1100px) {
    .wrapper{max-width: 100%;margin: 0 auto;}
    .gebouw_area .map_inner_area{min-width: auto;flex: unset;margin-bottom: 0px;width: 100%;}
}

@media only screen and (max-width: 750px) {
    .centering,.header{max-width: 100%;}
}
@media only screen and (max-width: 700px) {
    .main-content {margin-top: 96.5px;}
	.wrapper{padding: 0 20px;}
	p{font-size: 22px;line-height: 1.3;}
	h2{font-size: 36px;line-height: 1;}
	h3{font-size: 28px;line-height: 1;}
    .hyper_link_box{line-height: 1;}
    .hyper_link_box a{font-size: 18px;line-height: 1;}
    .header{padding: 10px 0;}
    .header .logo a{width: 290px;}
    .campus_area{width: calc(100% - 20px);margin-top: -10px;}
    .campus_area .title{margin-bottom: 35px;}
    .campus_area::after{border-width: 0 0 20px 20px;}
    .buitenruimte_section .heading{margin-bottom: 30px;}
    .buitenruimte_section .map_inner_area{padding: 0 20px;}
    .gebouw_area .inner_section p{word-break: unset;}
    .gebouw_area .map_inner_area .right_text,.buitenruimte_section .map_inner_area .right_text{width: calc(100% - 205px);}
    .gebouw_area .map_inner_area .right_text p,.buitenruimte_section .map_inner_area .right_text p{font-size: 21px;margin-bottom: 10px;line-height: 1.2;}
    .map_area .right{right: 20px;top: 50%;transform: translateY(-50%);}
    .map_area .left{left: 20px;top: 50%;transform: translateY(-50%);}
    .map_area .map_outer{height: 400px;}
}
		
@media only screen and (max-width: 600px) {
    h3{font-size: 25px;}
    h2{font-size: 28px;}
    p{font-size: 19px;}
    .main-content{margin-top: 70px;}
    .hyper_link_box a{font-size: 17px;}
    .header{padding: 8px 0;}
	.header .logo a{width: 224px;}	
    .header .menubar,.header .search_bar{width: 30px;}
    .header .navigation{top: 77px;width: calc(100% - 10%);height:calc(100vh + 77px);}
    .campus_area{padding-top: 30px;}
    .campus_area .title { margin-bottom: 30px;}
    .buitenruimte_section .map_inner_area{padding: 0 15px;}
    .gebouw_area .inner_section p a{font-size: 18px;}
    .gebouw_area .map_inner_area .map_image,.buitenruimte_section .map_inner_area .map_image{width: 160px;}
    .gebouw_area .map_inner_area .right_text, .buitenruimte_section .map_inner_area .right_text{width: calc(100% - 184px);}
    .gebouw_area .map_inner_area .right_text p, .buitenruimte_section .map_inner_area .right_text p{font-size: 19px;}
    .gebouw_area .map_inner_area{padding-left: 14px;}
    .gebouw_area .map_inner_area .map_image .location_img{left: -20px;width: 30px;}
    .gebouw_area .inner_section .text_box{min-height: 120px;}
    .search_bar .search input[type="search"]{padding: 14px 14px;}
    .search_bar .search{top: -22px;}
    .map_area .map_outer{height: 350px;}

}
@media only screen and (max-width: 500px) {
    h2{font-size: 25px;}
    h3{font-size: 22px;}
    p{font-size: 18px;}
	.gebouw_area .map_inner_area .map_image, .buitenruimte_section .map_inner_area .map_image{width: 130px;}
    .gebouw_area .map_inner_area .right_text, .buitenruimte_section .map_inner_area .right_text{width: calc(100% - 155px);}
    .gebouw_area .map_inner_area .right_text p, .buitenruimte_section .map_inner_area .right_text p{font-size: 18px;}
    .gebouw_area .inner_section h2{margin-bottom: 15px;}
    .gebouw_area .inner_section .text_box{min-height: 90px;}
    .map_area .map_outer{height: 300px;}

}
@media only screen and (max-width: 450px) {
    p {font-size: 16px;}
    .main-content {margin-top: 55px;}
    .header .logo a { width: 180px;}	
    .header .search_bar{width: 28px;}
    
    .gebouw_area .inner_section p a{font-size: 17px;}
    .gebouw_area .map_inner_area .map_image,.buitenruimte_section .map_inner_area .map_image{width: 100%;}
    .gebouw_area .map_inner_area .map_image .location_img{left: -28px;width: auto;}
    .gebouw_area .map_inner_area{padding-left: 20px;margin-bottom: 30px;}
    .gebouw_area .map_inner_area .right_text{width: 100%;margin-top: 20px;}
    .buitenruimte_section .map_inner_area .right_text{width: 100%;}
    .search_bar .search input[type="search"]{padding: 12px 12px;}
    .search_bar .search{top: -20px;}
    .search_bar .search input[type="submit"]{padding: 12px 0;}

    .header .mobile_bar span{margin-bottom: 6px;}
    .header .mobile_bar{width: 35px;}
}
@media only screen and (max-width: 375px) {
    h2{font-size: 22px;}
    .campus_area .title{margin-bottom: 25px;}
    .search_bar .search.active{width: 215px;}
    .search_bar .search input[type="submit"]{font-size: 11px;}
    .header .navigation{width: calc(100% - 8%);}
    .header .mobile_bar span{margin-bottom: 5px;}
    .header .mobile_bar{width: 32px;}

}

@media only screen and (max-width: 350px){
    .search_bar .search input[type="search"]{padding: 11px 8px;}
    .search_bar .search{top: -19px;}


}