@media screen and (max-width: 1600px) {
    #headerEstateInfo {padding-top: 60px;}
}

@media screen and (max-width: 1380px) {
    .partNavigation.horizontal {font-size: 14px;}
    .partNavigation.horizontal ul.level-0 > li {margin-left: 20px;}
}

@media screen and (max-height: 630px) and (min-width: 374px) {
    #scrollDownButton {display: flex;}
}

@media screen and (max-width: 1280px){
    .basicContainer, #headerHome .slidePagination {padding-left: 40px; padding-right: 40px;}
    .basicContainer {padding-top: 50px; padding-bottom: 30px;}
    #aboutUsContainer + #officeContainer .basicContainer, #officeContainer .basicContainer, #officeContainer + #teamContainer .basicContainer {padding-top: 50px;}
    .basicContainer.contentContainer {padding-top: 10px;}

    #scrollToTop            {font-size: 24px; bottom: 20px; right: 40px; cursor: pointer; height: 40px; width: 40px}  

    /* footer */
    #footerMenuColumnContainer {width: calc(100% + 40px); margin-left: -20px; margin-right: -20px;}
    .footerMenuColumn          {width: calc(50% - 40px); margin-left: 20px; margin-right: 20px;}

    #estateDetailContainerLeft              {padding-right: 40px;}  

    #projectEstateList th:first-child 	{padding-left: 15px;}
    #projectEstateList td:last-child 	{padding-right: 15px;}

    #serviceDetailBlockContainer 	{margin-top: -30px;}
}

@media screen and (max-width: 1279px){
    #topBar #logo img 						{height: 35px;}

    #mobileMenuToggle {display: flex;}
    .partNavigation.horizontal {display: none;}

    #headerEstateInfo, #headerEstateImages {width: 50%;}

        /* top bar */
        #topBar #topBarLogoMenu .basicContainer {height:60px;}
        #stickyScrollGhost {height: 90px;}
}

@media screen and (max-width: 1100px){

    h1, .h1  {font-size: 40px;}
    h2, .h2  {font-size: 24px;}

    .realEstateProjectItemBlock {padding-bottom: 20px; padding-top: 15px;}
    .realEstateProjectItemBlock .location {font-size: 18px; margin-bottom: 15px;}

    .realEstateProjectItem {min-height: auto;}
    .realEstateProjectItemBlock {padding-left: 20px; padding-right: 20px;}

    /* detail page */
    #contentDetailLeft {padding-left: 0; padding-right: 40px; width: calc(100% - 300px);}
    #contentDetailRight {width: 300px;}
    #contentDetailFullWidth {padding-left: 0; padding-right: 0;}

    #breadcrumbContainer .partBreadcrumb {margin-left: 0; margin-right:0;}

    /* product/project detail */
    .product #priceContainer  {display: flex; padding-bottom: 25px;}
	.product #priceContainer #priceFrom {display: flex; margin-right: 4px;}
	.product #priceContainer #priceUpTo {display: flex;}
		.product .priceLabel {margin-right: 4px; margin-top: 0;}
        .product .priceValue {margin-top: 0;}

    #estateDetailContainerLeft  {width: calc(100% - 300px);}
    #estateDetailContainerRight {width: 300px;}

    .realEstateObjectItem {width: calc(50% - 20px);}
}	

@media screen and (max-width: 1024px){
    #breadcrumbContainer + #officeContainer .basicContainer, #newsContainer .basicContainer, #breadcrumbContainer + #servicesContainer .basicContainer {padding-top: 20px;}

    #footerMenuColumnContainer 			{width: calc(100% + 30px); margin-left: -15px; margin-right: -15px;}
    .footerMenuColumn 					{width: calc(33.3333333333% - 30px); margin-left: 15px; margin-right: 15px;}
}

@media screen and (max-width: 1023px){  
    /* various */
    #searchContainer {max-width: none;}

    .serviceDetailColumn {width: calc(50% - 20px);}

    /* news */
    .newsItemBlock {padding:25px 30px 0 30px; margin-left: -30px; width: calc(50% + 30px);}

    /* locations */
    .officeListItem {flex: 1 1 calc(100% - 20px); max-width: calc(100% - 20px);}
    .officeListItemImage .partContentFileImageGallery figure .imagePlaceholderContainer .imagePlaceholder {padding-bottom: 75%!important;}

    /* project / product detail */
    #headerEstateInfoBar {}


        #importantFeatures {height: auto;}    

        #projectEstateList  {overflow-x: auto; display: block; font-size: 14px;}
        #projectEstateList tbody tr:hover       {background-color:transparent; color: #000;}
}

@media screen and (max-width: 900px){
    #headerEstateInfo {padding-right: 0; margin-bottom: 15px;}
    #headerEstateInfo, #headerEstateImages {width: 100%;}

    #headerEstateDetailContainer {margin-bottom: 90px;}

    #realEstateLeft    {width: 100%; padding-right: 0px; position: static; padding-top: 0px;}

    #mobileFullScreenButtonContainer {display: flex;}
    #realEstateLeft .mobileFullScreenContainer {display: none;}
    .mobileFullScreenContainerActive #realEstateLeft .mobileFullScreenContainer {display: block;}
    
    #realEstateRight {width: 100%;}
    
    .imageRightContainer:nth-last-child(1), .imageRightContainer:nth-last-child(2) {display: none;}
    .imageRightContainer {width: 100%;}

    .basicContainer, #headerHome .slidePagination {padding-left: 25px; padding-right: 25px;}
    #scrollToTop            {right: 25px;}

    #contentDetailLeft {padding-right: 0; width: 100%;}
    #contentDetailRight {width: 100%;}

    #estateDetailContainerLeft  {width: 100%; padding-right: 0;}
    #estateDetailContainerRight {width: 100%;}

    ul#headerEstateContentButtonsList li {margin-right: 15px;}
    ul#headerEstateContentButtonsList {padding-left: 15px;}

    ul#headerEstateContentButtonsList li.favorite {margin-left: 0;}

    /* tean */
    .teamListItem   {width: calc(100% - 20px);}

    /* various */
    .statusLabel {font-size: 16px; padding: 12px 25px;}
}

@media screen and (max-width: 768px){
    /* various */
    h1, .h1, .homeHeaderOverlay .h1, #callToActionHeaderOverlay .h1, #headerEstateInfoBar h1 #streetAndNumber, #headerEstateInfoBar h1 #projectName  {font-size: 32px; margin-bottom: 15px;}

    h2, .h2  {font-size: 24px;}
    h3, .h3 {font-size: 20px;}

    #headerSmall .partContentFileImageGallery figure .imagePlaceholderContainer .imagePlaceholder {padding-bottom: 30%!important;}
    #aanbod #headerSmall .partContentFileImageGallery figure .imagePlaceholderContainer .imagePlaceholder, #projecten #headerSmall .partContentFileImageGallery figure .imagePlaceholderContainer .imagePlaceholder  {padding-bottom: 20%!important;}
    
    .partContentText p, .partContentText ul, .partContentText ol, .partContentText table {font-size: 16px;}
    
    .partSlider.homeHeader .slideContainer, #headerHome .partContentFileImageGallery figure .imagePlaceholderContainer .imagePlaceholder, #callToActionHeader .partContentFileImageGallery figure .imagePlaceholderContainer .imagePlaceholder {padding-bottom: 50%!important;}
}

@media screen and (max-width: 767px){
    #introContentBlock  {padding:30px; padding-bottom: 1px;}
    #introContentBlock h1:only-child {margin-bottom: 29px;}

    #callToActionHeaderOverlay .partButton 	{height:36px; font-size: 16px; padding-left: 15px; padding-right: 15px;}

    /* various */
    .basicContainer > h2 {margin-bottom: 30px;}
    .partBreadcrumb {font-size: 14px;}
    .partBreadcrumb li:after {font-size: 15px;}
    
    /* home */
    /* #homeIntroLeft {width: 100%;}
    #homeIntroRight {padding-left: 0; width: calc(100% + 20px);} */
    
    /* product detail */

    /* news */
    .newsListItem   {margin-bottom: 30px;}
    .newsItemImage  {width: 100%;}
    .newsItemBlock  {width: 100%; margin-left: 0; margin-top: 0;}

    /* search */
    #searchContainer {margin-bottom: -50px;}
        .partSearchBar                      {height: 50px;}
        .searchBarInput                     {padding-right: 50px; padding-left: 15px; font-size: 16px;}
        .searchBarButton, .searchBarReset   {width: 50px;} 
        .searchBarButton svg {width: 20px; height:20px;}

        #scrollDownButton {width: 50px; height: 50px;}
        #scrollDownButton span {font-size: 24px;}
}

@media screen and (max-width: 667px){ 
    /* various */
    #topBarSmall .basicContainer {font-size: 14px;}
    
    .partSlider.homeHeader .slideContainer, #headerHome .partContentFileImageGallery figure .imagePlaceholderContainer .imagePlaceholder, #callToActionHeader .partContentFileImageGallery figure .imagePlaceholderContainer .imagePlaceholder {padding-bottom: 80%!important;}

    /* spacing 20px */
    #introContentBlock {padding:20px; padding-bottom: 1px;}
    .officeListItemBlock {padding:20px; padding-bottom: 0;}
    .contactIconListBlank {padding-bottom: 5px;}

    .teamListItemSummary {padding:0 20px;}

    .teamListItem .contactIconListBlank {padding: 0px 20px 5px 20px;}

    #randomEstateAgent {padding: 0 20px;}
    #randomEstateAgentText .partButton {margin-bottom: 20px;}
    #randomEstateAgent .partContentFileImageGallery.single {width: 80px;}
    .teamListItemPhoto {width: 80px;}

    .partContentText p, .partContentText ul, .partContentText ol, .partContentText table, .partContentVideo, .partContentFileAdmin, .iFrameContainer {margin-bottom: 20px;}

    /* home */
    .homeRightItem {padding-top: 15px; padding-bottom: 20px;}
    .homeRightItemNumber {font-size: 30px;}
    .homeRightItemText {font-size: 12px;}

    .partSlider .slideContainerViewport {margin-bottom: 0;}

    /* team */
    .officeListItemImage, .officeListItemBlock {width: 100%;}

    /* services */
    .serviceListItem 		{width: calc(50% - 20px); min-height: auto;}

    .footerMenuColumn {width: calc(100% - 30px); margin-left: 15px; margin-right: 15px;}

    #footerMenu .basicContainer {padding-top: 30px;padding-bottom: 0;}

    /* product / project */

   
    #headerEstateInfoBar h1 #zipcodeAndCity {font-size: 16px;}
    .priceLabel {font-size: 16px;}
    .priceValue {font-size: 16px;}
    #importantFeatures li span.material-icons {font-size: 24px;}
    ul#headerEstateContentButtonsList {padding-left: 0;}
    #headerEstateInfo .basicContainer {padding-bottom: 15px;}

    .showMoreMainContainer {margin-bottom: 30px;}

    #estateDetailContainer .basicContainer {padding-bottom: 0;}
    
    #estateDetailProperties table td:first-child {width: auto; min-width: 150px; padding-right: 15px;}
    #estateDetailProperties table td:last-child {text-align: right;}

    #estateDetailLocationContainer .partGoogleMaps, #estateDetailLocationContainer .partGoogleMaps iframe {height: 300px;}
    
    .statusLabel {font-size: 14px;}

    .detailRightblock {padding: 20px 20px 0 20px;}
    .detailRightblock .partContentText ul {font-size: 14px; padding-bottom: 10px;}
    .detailRightblock .partContentText ul li:before {height:18px; width: 18px;}

    .serviceDetailColumn {width: calc(100% - 20px);}

    #importantFeatures li span.label {font-size: 16px;}
    #importantFeatures li span.value {font-size: 18px;}
    #importantFeatures li {margin-right: 20px;}
    #importantFeatures {padding:20px; padding-bottom: 10px;}
}

@media screen and (max-width: 550px){
    .realEstateObjectItem {width: calc(100% - 20px)}
    .realEstateProjectItemImage, .realEstateProjectItemBlock {width: 100%;}

    h3, .h3 {font-size: 18px;}

    #sortContainer {max-width: none; width: 100%; margin-top: 10px;}

    #topBarSmallMenu li#login span.label, #topBarSmallMenu li#phoneNumber span.label {display: none;}
    #topBarSmallMenu li a span.material-icons {font-size: 16px;} 
}

@media screen and (max-width: 480px){
    .serviceListItem {padding-left: 10px; padding-right: 10px;}
    
    h1, .h1, .homeHeaderOverlay .h1, #callToActionHeaderOverlay .h1, #headerEstateInfoBar h1 #streetAndNumber, #headerEstateInfoBar h1 #projectName {font-size: 24px;}
    h2, .h2  {font-size: 20px;}
    h3, .h3 {font-size: 18px;}

    .serviceListItem h3 {font-size: 14px;}

    #randomEstateAgentText span.functie {font-size: 16px;}

    #headerSmall .partContentFileImageGallery figure .imagePlaceholderContainer .imagePlaceholder {padding-bottom: 50%!important;}

    #topBarSmall #login span.label {display: none;}

    #randomEstateAgent .partContentFileImageGallery.single, .teamListItemPhoto {width: 100px;}

    #randomEstateAgent {flex-wrap: wrap;}

    #populairList {font-size: 14px;}

    /* team */
    .teamListItemSummary {flex-wrap: wrap;}
    .teamListItemNameAndFunction {padding-left: 0; width: 100%;}

    /* footer */
    #footerNavList li {width: 100%; margin-left: 0; margin-right: 0;}

    #topBarSmallMenu li#favorites span.label {display: none;}
}

@media screen and (max-width: 320px){
    .searchBarInput::-webkit-input-placeholder {color:transparent;}
}