html                                                                    {}
body                                                                    {color:#444; font-size:18px; font-weight: 300; font-family: 'Roboto', sans-serif; -webkit-text-size-adjust: 100%; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;} 

h1, h2, h3, h4, .h1, .h2, .h3, .h4    	{word-wrap:break-word; line-height: 1.15em; font-family: 'Poppins', sans-serif;}
h1, .h1                               	{font-size: 44px; font-weight: 700; color: #213b54; margin-bottom: 15px;}
h2, .h2                               	{font-size: 32px; font-weight: 700; color: #213b54; margin-bottom: 10px;}
h3, .h3                               	{font-size: 22px; font-weight: 600; color: #213b54; margin-bottom: 10px;}
h4, .h4                               	{font-size: 20px; font-weight: 700; color: #213b54; margin-bottom: 0;}

strong                                	{font-weight: 500; font-style: inherit;}
em                                    	{font-style: italic; font-weight: inherit;}

sup    									{font-size: 0.7em; vertical-align: top; position: relative; top: -0.3em;}

/* Icon with material icons */
.buttonIcon, .material-icons, .imageRightContainer.video:before, .detailRightblock .partContentText li:before, .serviceDetailColumn .partContentText ul li:before  {
    font-family: 'Material Icons';
    font-weight: 400;
    font-style: normal;
    /* check if the icon doesn't effect the button size */
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
}

/********************************************** 
Fundementals 
**********************************************/

.basicContainer     {max-width: 1400px; margin: 0px auto; padding: 110px 80px 90px 80px;}
.basicContainer > h2 {text-align: center; margin-bottom: 50px;}

/********************************************** 
Sticky bar 
**********************************************/

/* social share */
.socialShareContainer 							{display:flex; align-items:center; flex-wrap: wrap; margin-bottom: 30px; background-color: #f5f5f5; border:solid 1px #f5f5f5; padding:30px; padding-bottom: 10px;}
	.socialShareLabel                       		{font-weight: 500; color: #000; margin-bottom: 20px; margin-right: 20px;}
	.socialShareContainer a 	             		{margin-right: 15px; margin-bottom: 20px; display: flex; justify-content: center; align-items: center; height: 16px; width: 16px;}
	.socialShareContainer a:last-child 				{margin-right: 0px;}

	.socialShareContainer a svg.partSvg             {fill:#000; flex: 1 1 auto; max-height:16px; max-width: 16px; transition:fill 0.3s ease;}  
	.socialShareContainer a:hover svg.partSvg       {fill:#213b54;}

/* top bar */
#topBar.stickyScroll              									{width: 100%; background-color: #fff; position: fixed; left: 0; top: 0; z-index: 1003; box-shadow: 4px 4px 10px 0 rgba(0,0,0,.05);}

#stickyScrollGhost   												{height:130px;}

	/* phone, email and socials */
	#topBarSmall 												{background-color: #f5f5f5;}
	#topBarSmall .basicContainer 								{height: 30px; padding-top: 0; padding-bottom: 0; font-size: 15px; display: flex; justify-content: flex-end; align-items: center;}
                
		/* social icons */
		#topBarSmall .socialContainer  								{display: flex; align-items: center; margin-left: 20px;}
			#topBarSmall .socialContainer a 							{margin-left: 10px; display: flex; justify-content: center; align-items: center; height: 12px; width: 12px;}
			#topBarSmall .socialContainer a svg.partSvg 				{fill:#213b54; flex: 1 1 auto; max-height:12px; max-width: 12px; transition: fill ease 0.3s;}
			#topBarSmall .socialContainer a:hover svg.partSvg 			{fill:#FF0055;}

        /* small menu */
        #topBarSmallMenu        {display: flex; align-items: center;}
            #topBarSmallMenu li     {margin-left: 20px;}
            #topBarSmallMenu li:first-child    {margin-left: 0;}
                #topBarSmallMenu li a   {color:inherit; text-decoration: none; display: flex; align-items: center; cursor: pointer;}
                
                #topBarSmallMenu li a span.material-icons {color:#FF0055;}
                #topBarSmallMenu li a span.label 	{font-weight: 500; margin-left: 4px; color:inherit;}
                #topBarSmallMenu li a:hover span.label 	{text-decoration: underline;}

	/* logo & navigation */
	#topBarLogoMenu 												{}
		#topBarLogoMenu .basicContainer 								{height: 100px; display: flex; align-items: center; transition: height ease 0.3s; padding-top: 0; padding-bottom: 0; font-size: 18px; font-weight: 600;}
		#topBar.scrolled #topBarLogoMenu .basicContainer     			{height:60px;}
			#logo 														{margin-right: auto;}	
				#logo img 													{display: block; height: 50px; transition: height ease 0.3s;}
				#topBar.scrolled #logo img 									{height: 35px;}


/********************************************** 
Fundementals 
**********************************************/

.statusLabel            {font-family: 'Poppins', sans-serif; line-height: 1.2em; font-weight: 600; color: #fff; background-color: #FF0055; padding:17px 40px; position: absolute; left: 0; top: 30px; box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px; text-transform: uppercase; z-index: 1;}
.statusLabelSmall       {font-family: 'Poppins', sans-serif; line-height: 1.2em; font-weight: 600; color: #fff; background-color: #FF0055; padding:10px 15px; position: absolute; right: 0; bottom: 20px; font-size: 16px; text-transform: uppercase; z-index: 1;}

#scrollToTop            {border-radius: 5px; font-size: 30px; background-color:#f5f5f5; display: flex; justify-content: center; align-items: center; box-shadow: 0 1px 3px 0 rgba(0,0,0,0.25); position: fixed; z-index: 2; bottom: 10px; right: 10px; cursor: pointer; height: 60px; width: 60px; box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px; visibility:hidden; opacity:0; transition:opacity 0.5s ease, box-shadow .15s ease-in-out;}  
#scrollToTop:hover 		{box-shadow: 0 1.3rem 1.9rem 0 rgba(19,28,77,.12);}
#scrollToTop.visible 	{visibility:visible; opacity:1;}

/* searchbar */
#searchContainer  {position: relative; top:-80px; margin-bottom: -30px; z-index: 20; width: 100%; max-width: 50%; display: flex;}
	#scrollDownButton {height:60px; width: 60px; border: none; outline:0; background-color: #fff; box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px; padding: 0; border-radius:5px; cursor: pointer; margin-left: 15px; display: none; justify-content: center; align-items: center;}
	#scrollDownButton:hover {}
	#scrollDownButton span {font-size: 30px;}

	#scrollToAnchor {top: -50px; /* padding + fixed element height */ position:relative;}

/* used for multiple pages who are using the content view */
.basicContainer.contentContainer {padding-top: 50px; display:flex; flex-wrap: wrap;}

/********************************************** 
Homepage 
**********************************************/

/* slider */
#headerHome                 {background-color:#000;}
	/* home header */
	.partSlider.homeHeader 						{}
	.partSlider.homeHeader .slideContainer   		{padding-bottom:31.25%;}
	.partSlider.homeHeader .slide img        		{width:100%;}

	#headerHome .partContentFileImageGallery.single {opacity: 0.9;}
	.homeHeaderOverlay 			{position: absolute; top:0; left:0; bottom:0; right:0; visibility: hidden; opacity: 0; transition-delay: 10s; transition: opacity 0.5s ease;} 
	.homeHeaderOverlay.ready 	{visibility: visible; opacity: 1;}
		.homeHeaderOverlay .basicContainer {display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding-top: 0; padding-bottom: 30px; height:100%; position: relative;}
			.homeHeaderOverlay .h1 		{color: #fff; text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5); margin-bottom: 30px;}
			
	#headerHome .slideContainerViewport {margin-bottom: 0;}
	#headerHome .slidePagination {max-width: 1400px; padding: 0 80px; width: 100%; position: absolute; left: 50%; bottom:60px; transform: translateX(-50%); justify-content: flex-start; margin-bottom: 0;}
	#headerHome .slidePaginationBullet {margin-left: 0; margin-right: 10px; background-color:transparent; border:solid 3px #fff;}
	#headerHome .slidePaginationBullet.selected {background-color: #FF0055; border-color: #FF0055;}

/* intro */
#intro 		{}
	#intro .basicContainer {padding-top: 0;}
		#introContentBlock 	{background-color: #213b54; padding:50px 60px 30px 60px; margin-top: -60px; position: relative; z-index: 1; max-width: 900px;}
		#introContentBlock h1 {color: #fff;}
		#introContentBlock .partContentText {font-size: 20px; font-weight: 500; color: rgba(255,255,255,0.9);}
		#introContentBlock strong {color: #ff0055; font-weight: 700;}
		#introContentBlock .price {color: #FF0055; display: inline-block; margin-bottom: 20px; font-size: 22px; font-weight: 600;}
		#introContentBlock time {color:#fff;}


#homeIntro 	{background-color: #213b54;}
	#homeIntro .basicContainer {padding-top: 50px;}
		
		/* container */
		#homeContainer 	{}
			#homeIntroText		{color: #fff;}
			#homeIntroText h1  	{color: #fff;}
			/* #homeIntroRight 	{width: calc(50% + 20px); margin-left: -10px; margin-right: -10px; padding-left: 60px; display:flex; flex-wrap:wrap; } */

				/* .homeRightItem 		{flex: 1 1 auto; background-color:rgba(255,255,255,0.2); padding:25px 20px 30px 20px; margin:0px 10px 20px 10px; text-transform: uppercase; font-family: 'Poppins', sans-serif; text-align: center; font-weight: 700;}
					.homeRightItemNumber 	{font-size: 50px; display:block; margin-bottom: 5px;line-height:1.2em; color: #fff;}
					.homeRightItemText 		{display:block; color:rgba(255,255,255,0.4); font-size:14px; line-height:1.2em;} */


#homeProductContainer 	{text-align: center;}

/********************************************** 
Services
**********************************************/

#servicesContainer 			{}
#home #servicesContainer 			{background-image: linear-gradient(#fff, #f5f5f5 );}
#home #servicesContainer:before {content: ''; display: block; margin:0px auto; height:1px; width: 80%; max-width: 600px; background-color: #e0e0e0;}

	#breadcrumbContainer + #servicesContainer .basicContainer		{padding-top: 50px; max-width: 1280px;}
	body#contentListWithReadMore #servicesContainer .basicContainer		{padding-top:0}
	#servicesContainer .basicContainer > h2 {text-align: left;}
	#home #servicesContainer .basicContainer > h2 {text-align: center;}

		.serviceList 							{display: flex; flex-wrap: wrap; margin-bottom: 10px; width: calc(100% + 20px); margin-left: -10px; margin-right: 10px; text-align:center;}
			.serviceListItem 						{width: calc(25% - 20px); flex: 1 1 auto; min-height: 200px; background-color: #FF0055; margin-left: 10px; margin-right: 10px; display: flex; justify-content: center; align-items: center; margin-bottom: 20px; padding:30px 15px; border-radius:5px; transition: background-color 0.3s ease; text-decoration: none; color:inherit;}
			.serviceListItem:hover  				{background-color: #1a2f43; box-shadow: rgba(0, 0, 0, 0.15) 0px 1px 4px;}
				.serviceListItem .partContentFileImageGallery.centerAlign .contentFileImage {margin:0 auto 10px auto; height:80px; width: 80px; background-color: rgba(255, 0, 85,0.05); border-radius:50%;}
				.serviceListItem h3 				{color:#fff; margin-bottom: 0; word-wrap: break-word; hyphens: auto; max-width: 100%; line-height: 1.3em;}
				.serviceListItem:hover h3 			{color: #fff;}
				
.readMoreList {}
	.readMoreItem h2 a {color:inherit; text-decoration: none; transition: color 0.3s ease;}
	.readMoreItem h2 a:hover {color: #FF0055;}
		
/********************************************** 
Real estate overview 
**********************************************/

#introRealEstateOverview 	{background-color: #213b54;}
	#introRealEstateOverview .basicContainer {padding-top: 50px; padding-bottom: 30px;}
	#introRealEstateOverview h1, #introRealEstateOverview .partContentText {max-width: 900px;}
	#introRealEstateOverview h1 {color: #fff;}
	#introRealEstateOverview .partContentText {color: rgba(255,255,255,0.9);}
	
#realEstateContainer            {}
    #realEstateContainer .basicContainer    {display: flex; flex-wrap: wrap; padding-top: 60px;}
        #realEstateLeft             {width: 310px; padding-right: 20px; align-self: flex-start; font-size: 18px;}
        
        #realEstateLeft .h4             {margin-bottom: 10px; font-weight: 500; display: block;}
		#realEstateLeft .partDropDown   {margin-bottom: 15px;}
		
		#realEstateRight            {width: calc(100% - 310px);}
		
            #resultAndSortContainer         {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-bottom: 20px;}
                #labelAmountResult              {font-weight: 500; color: #000; font-size: 44px; font-weight: 400;}

                #sortContainer                  {display: flex; justify-content: flex-end; max-width: 250px;}
				#sortContainer .partDropDown         {font-size: 16px; width: 100%;}
					
				#realEstateRight .partControlReset 	{margin-bottom: 10px;}
			
            /* estate */
            #realEstateObjectContainer {display: flex; flex-wrap: wrap; width: calc(100% + 20px); margin-left: -10px; margin-right: -10px; } 

                .realEstateObjectItem {background: #fff; text-align:left; margin:0px 10px 20px 10px; width: calc(33.3333333333% - 20px); transition: ease 0.3s; text-decoration: none; color:inherit; display: flex; flex-direction: column;  box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;}

                .realEstateObjectItem.advertisement {background-repeat: no-repeat; background-position: center; background-size: cover;}

                    .realEstateObjectItemImage {position: relative; flex:0 0 auto; background-color: #000; overflow: hidden;}
                    .realEstateObjectItemImage .partContentFileImageGallery.single 	{transition: all .2s ease-in-out;}
                    .realEstateObjectItemImage:hover .partContentFileImageGallery.single {transform: scale(1.05); opacity: 0.8;}

                    .realEstateObjectItemBlock  {padding:25px 30px 30px 30px; display: flex; flex-direction: column; align-items: flex-start; flex:1 1 auto; /* 0% = IE11 fix */} 

					.realEstateObjectItemBlock h2 {font-size: 20px; margin-bottom: 7px; font-weight: 600;}
					.realEstateObjectItemBlock h2 a 	{transition: color ease 0.3s; color: #213b54; text-decoration: none;}
					.realEstateObjectItem:hover h2  {text-decoration: underline;}

                        .realEstateObjectItemBlock .location {font-weight: 300; color:inherit; margin-bottom: auto; font-size: 18px; margin-bottom: 15px; color: #555;}
						
						.realEstateObjectItemBlock #priceContainer {text-align: left; align-self: flex-start; margin-top: auto; padding-bottom: 0;}
						.realEstateObjectItemBlock #priceContainer #priceUpTo {}
						.realEstateObjectItemBlock #priceContainer .priceLabel {margin-right: 6px; display: block; color:#555; margin-bottom: 5px; font-size: 18px; font-weight: 300;}
						.realEstateObjectItemBlock #priceContainer .priceValue {margin-top: 0; display: block; font-size: 18px; color: #213b54; margin-bottom: 17px;}

                        .realEstateObjectItemBlock .features {display: flex; flex-wrap: wrap; font-size: 16px; line-height: 1.2em; margin-bottom: 15px;}
                        .realEstateObjectItemBlock .features li {display: flex; align-items: center;}
                        .realEstateObjectItemBlock .features li:last-child:after {display: none;}
						.realEstateObjectItemBlock .features li:after {content: ''; height: 5px; width: 5px; background-color: #999; margin-left: 5px; margin-right: 5px; border-radius: 50%;}

						.realEstateObjectItemBlock .type 	{display: inline-block; font-family: 'Poppins', sans-serif; line-height: 1.2em; font-weight: 600; color: #fff; background-color: #213b54; padding: 10px 15px; font-size: 16px; text-transform: uppercase;}
					
						.partSlider.productsInSlider {width: calc(100% + 30px); margin-left: -15px; margin-right: -15px;}
						.partSlider.productsInSlider .slideContainer.numberOfSlidesLessThanSlidesToShow          {justify-content: center;}
						.partSlider.productsInSlider .realEstateObjectItem {width: calc(100% - 20px); height:calc(100% - 30px);}
						
					
            /* projects */
            #realEstateProjectContainer {} 

                .realEstateProjectItem          {background: #fff; box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px; margin-bottom: 30px; transition: 0.2s; text-decoration: none; color:inherit; display: flex; flex-wrap:wrap; min-height: 260px;}
                .realEstateProjectItem:hover     {box-shadow: 0 5px 10px 0 rgba(0,0,0,0.15);}
                .realEstateProjectItem:hover h2  {color: #000;}

                .realEstateProjectItem.advertisement {padding-bottom: 55.5555555556%; background-repeat: no-repeat; background-position: center; background-size: cover;}

					.realEstateProjectItemImage {width: 40%;}
					.realEstateProjectItemImage .partContentFileImageGallery.single {height:100%;}
					.realEstateProjectItemImage .partContentFileImageGallery.single *  {height: 100%;}

                    .realEstateProjectItemBlock  {width: 60%; padding:20px 30px 30px 30px; display: flex; flex-direction: column; justify-content: center;} 

                   	 	.realEstateProjectItemBlock h2 {}

						.realEstateProjectItemBlock .location {color: #999; font-size: 22px; font-weight: 400; margin-bottom: 30px;}
						
						/* price */
						.realEstateProjectItemBlock #priceContainer  {display: flex; flex-wrap: wrap; padding-bottom: 5px; width: 100%;}
						.realEstateProjectItemBlock #priceContainer #priceFrom {display: flex; align-items:center; margin-right: 4px;}
						.realEstateProjectItemBlock #priceContainer #priceUpTo {display: flex; align-items:center;}
						.realEstateProjectItemBlock .priceLabel {margin-right: 4px;}
						.realEstateProjectItemBlock .priceValue {margin-top: 0;}

						/* features */
						.realEstateProjectItemBlock .features {display: flex; flex-wrap: wrap; font-size: 14px; font-style: italic; line-height: 1.2em;}
                        .realEstateProjectItemBlock .features li {display: flex; align-items: center;}
                        .realEstateProjectItemBlock .features li:last-child:after {display: none;}
						.realEstateProjectItemBlock .features li:after {content: ''; height: 5px; width: 5px; background-color: #999; margin-left: 5px; margin-right: 5px; border-radius: 50%;}

/********************************************** 
Real estate detail 
**********************************************/ 

	#headerEstateDetailContainer 	{background-color:#1a2f43; position: relative; margin-bottom: 120px;}

	#headerEstateDetailContainer .basicContainer {display: flex; flex-wrap: wrap; align-items: flex-end; padding-top: 60px; padding-bottom: 0; z-index: 10; position: relative;}

	#headerEstateDetailContainer > .backgroundImage {position: absolute; left: 0; top: 0; right: 0; bottom: 0; opacity: 0.15;}
	#headerEstateDetailContainer > .backgroundImage .imagePlaceholder {display: none;}
	#headerEstateDetailContainer > .backgroundImage * {height: 100%;}

	#headerEstateDetail  	{}
	
	/* white info bar */
	#headerEstateInfo 		{width: 40%; padding-right: 60px; padding-bottom: 15px;}

		#headerEstateInfoBar 			{}

			#headerEstateInfoBarLeft 		{}
			
				#headerEstateInfoBar h1                   {color: #fff;}
				#headerEstateInfoBar h1 #streetAndNumber, #headerEstateInfoBar h1 #projectName 	{margin-bottom: 10px; line-height: inherit; display: block; font-weight:700; line-height: 1em; font-size: 44px;}
				#headerEstateInfoBar h1 #zipcodeAndCity  	{color:#bbb; display: block; font-family: 'Roboto', sans-serif; font-size: 26px; font-weight: 600; line-height: 1.3em; margin-bottom: 30px; font-family: 'Poppins', sans-serif;}

				#headerEstateInfoBar #priceContainer {text-align: left;}
				#headerEstateInfoBar .priceLabel, #headerEstateInfoBar #conditionLabel {color: #bbb; font-size: 20px;}


			#headerEstateInfoBarRight 		{margin-bottom: 30px;}

				#importantFeatures                      	{display: inline-flex; flex-wrap:wrap; background-color:rgba(255,255,255,0.2); padding:30px ;padding-bottom: 20px;}
				#importantFeatures li                   	{margin-right: 40px; text-align: center;}
				#importantFeatures li:last-child 			{margin-right: 0;}
				#importantFeatures li span.material-icons 	{color: #FF0055; font-size: 32px; margin-bottom: 5px; display: block;}
				#importantFeatures li span.label 			{font-size: 18px; color:inherit; display: block; margin-bottom: 5px; color: #fff;}
				#importantFeatures li span.value 			{font-size: 22px; font-weight: 500; color:#fff; display: block; margin-bottom: 8px;}

		/* media buttons */
		#headerEstateMediaButtons            			{}
			#headerEstateMediaButtons .basicContainer 	{}

				ul#headerEstateContentButtonsList  				{display: flex; flex-wrap: wrap;}
				ul#headerEstateContentButtonsList li            {margin-right: 30px; margin-bottom: 15px;}
				ul#headerEstateContentButtonsList li .partButton.naked {color: #fff; border-radius:0; font-size: 22px;}
				ul#headerEstateContentButtonsList li.favorite 	{}
				ul#headerEstateContentButtonsList li.favorite.saved {}
				ul#headerEstateContentButtonsList li.favorite.saved .buttonIcon {color: #01ac3a;}

				ul#headerEstateContentButtonsList li.map .partContentFileImageGallery 	    {display:none;}

		/* header images */
		#headerEstateImages {position: relative; width: 60%; margin-bottom: -85px;}
		#headerEstateImages .basicContainer {display: flex; flex-wrap:wrap;}
			#headerEstateImages .partContentFileImageGallery.single {margin-bottom: 25px; background-color: #1b3146; }



	/* content */
	#estateDetailContainer              {}
		#estateDetailContainer .basicContainer  {display: flex; flex-wrap: wrap; padding-top: 0; padding-bottom: 30px;}

			#estateDetailContainerLeft              {width: calc(100% - 400px); padding-right: 60px;}
			#estateDetailContainerLeft .h4           {color: #213b54;}
			
				#openHouse                          {border:solid 1px #01ac3a; margin-bottom: 30px; background-color: rgba(1, 172, 58, 0.05); padding:30px; padding-bottom: 0px;}
				#openHouse span.h3                  {color: #01ac3a; margin-bottom: 5px; display: block;}
				#openHouse .partContentText         {color: #000; font-weight: 400;}

				#estateDetailProperties h2 {margin-bottom: 20px;}
				#estateDetailProperties h3 	{}
				#estateDetailProperties table    {width: 100%; margin-bottom: 30px; line-height: 1.3em; font-size: 16px; border-top: solid 1px #e0e0e0; font-size: 18px;}
				#estateDetailProperties table td  {padding: 10px 0px; border-bottom: solid 1px #e0e0e0; vertical-align: top;}
				#estateDetailProperties table td:first-child {width: 300px; padding-right: 15px;}
				#estateDetailProperties table td:last-child {font-weight: 400; color: #000;}

				#socialShare                            {display: flex; margin-bottom: 30px;}
					#socialShare li                         {margin-right: 10px;}
					#socialShare li:last-child              {margin-right: 0px;}
						#socialShare li a                   {height: 40px; width: 40px; border-radius: 50%; background-color: #FF0055; transition: background-color 0.3s; background-position: center; background-repeat: no-repeat; display: flex; justify-content: center; align-items: center;}
						#socialShare li a:hover             {background-color: #213b54;}
						#socialShare li a svg 				{fill: #fff;}
				
				/* custom */
				.showMoreMainContainer                {position: relative; margin-bottom: 25px;}
					.showMoreContentContainer             {position: relative; overflow: hidden; height: 90px; margin-bottom: 15px;}
					.showMoreContentContainer:after       {position: absolute; width: 100%; height: 100%; bottom: 0; left: 0; content: ''; background: linear-gradient(rgba(255,255,255,0), #fff);}
								
						.showMoreMainContainerOpen .showMoreContentContainer          {height: auto; overflow: visible;}
						.showMoreMainContainerOpen .showMoreContentContainer:after  {display: none;}
						.showMoreMainContainer .showMoreButton {font-weight: 700; color: #FF0055; text-decoration: underline; cursor: pointer;}


			#estateDetailContainerRight             {width: 400px;}
				.estateDetailRightBlock                 {background: #fff; border:solid 1px #e0e0e0; margin-bottom: 30px; position: sticky; top:135px; border-radius: 5px;}
					
					.estateDetailRightBlock span#introLabel     {font-weight: 500; color: #FF0055; font-size: 20px; margin-bottom: 5px; display: block;}

					#estateDetailRightBlockContact                 {padding:30px; padding-bottom: 0;}
						#estateDetailRightBlockContact .partContentFileImageGallery.single {width: 140px; position: relative; margin-top: -45px; margin-bottom: 20px; border-radius: 50%; box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px; overflow:hidden;}
						#estateDetailRightBlockContact h3 {margin-bottom: 20px; font-size: 32px;}
						#estateDetailRightBlockContact .contactIconListBlank {font-size: 22px;}
						
					#estateDetailRightBlockButtons  				{padding:30px; padding-bottom: 15px; border-top:solid 1px #e0e0e0;}
					#estateDetailRightBlockButtons .partButton 			{width: 100%; justify-content: center; margin-bottom: 15px; height: 48px;}

	/* location */
	#estateDetailLocationContainer 	{}
		#estateDetailLocationContainer .basicContainer 	{padding-top: 0; padding-bottom: 0;}
		#estateDetailLocationContainer .basicContainer h2 {text-align: left; margin-bottom: 25px;}
			#estateDetailLocationContainer .partGoogleMaps, #estateDetailLocationContainer .partGoogleMaps iframe {height: 500px;}

    /* project detail */
    #estateDetailEstateList     				{margin-bottom: 30px; width: 100%;}
        #projectEstateList     					{width: 100%; line-height: 1.2em; font-size: 16px; box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px; border-radius: 5px; overflow: hidden;}
        #projectEstateList thead th             {color: #000; font-weight: 400; background-color: #f5f5f5; border-bottom: 1px solid #e0e0e0; }
        #projectEstateList tbody tr             {background-color: #fff; border-bottom: 1px solid #e0e0e0; cursor: pointer;}
		#projectEstateList tbody tr:hover       {background-color: rgba(0, 0, 0, 0.05); color: #000;}
		
			#projectEstateList .numeric  		{text-align: right;}
			#projectEstateList .prijs  			{white-space: nowrap;}
			#projectEstateList td.status  		{font-weight: 400; color: #000;}
			#projectEstateList .green     		{color: #01ac3a;}
			#projectEstateList .orange   		{color: #F5A623;}

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

/********************************************** 
About us
**********************************************/

#aboutUsContainer {}

/***********************************************
Service detail blocks 
***********************************************/

#serviceDetailContainer   		{}
#serviceDetailBlockContainer 	{margin-top: -80px;}
#serviceDetailBlockContainer .basicContainer {padding-top:0;}

#breadcrumbContainer + #serviceDetailBlockContainer {margin-top: 0;}
#breadcrumbContainer + #serviceDetailBlockContainer .basicContainer {padding-top: 20px;}

#serviceDetailBlockContainer 	{}
	#serviceDetailBlockContainer .basicContainer {padding-top: 0;}
		#serviceDetailBlockContainer .partContentText p {margin-bottom: 15px;}

		#serviceDetailColumnContainer { display:flex; flex-wrap:wrap; text-align:left; margin-left: -10px; margin-right: -10px; width: calc(100% + 20px); font-size: 16px; padding-bottom: 10px;}
  
			.serviceDetailColumn {background-color: #fff; font-weight: 400; box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px; display:flex; flex-direction:column; align-items:flex-start; width: calc(33.3333333333% - 20px); margin-left: 10px; margin-right: 10px; padding:30px; padding-bottom: 10px; margin-bottom: 20px;}
	
				.serviceDetailColumn h3 {margin-bottom: 5px; color: #FF0055;}
				.serviceDetailColumn h3 a {color: #213b54; text-decoration: none; font-weight: 700;}
				.serviceDetailColumn h3 a:hover {text-decoration: underline;}
				.serviceDetailColumn .price {color: #FF0055; font-weight: 600; font-size: 20px; margin-bottom: 20px;}

				.serviceDetailColumn .partContentText  {font-size: 18px;}
				.serviceDetailColumn .partContentText ul {padding-left: 0; margin-bottom: 0; padding-bottom: 15px;}
				.serviceDetailColumn .partContentText p + ul, #pricingChecklist .partContentText p + ol {margin-top: -15px;}

				.serviceDetailColumn .partContentText li {margin-bottom: 8px; display: flex; align-items: center; padding-left: 15px;}
				.serviceDetailColumn .partContentText ul li:before { width: 22px; height: 22px; border-radius: 50%; display: flex; justify-content: center; align-items: center; background-color: #1a2f43; margin-top: 6px; content: 'check'; flex: 0 0 auto; color: #fff; margin-left: 0; }

				.serviceDetailColumn .partButton {margin-top: auto;}

/********************************************** 
Offices
**********************************************/

#officeContainer 						{}
	#officeContainer .basicContainer		{max-width: 1280px; padding-top: 50px;}
	#officeContainer .basicContainer > h2 	{margin-bottom: 30px;}

		#officeList 							{display: flex; flex-wrap: wrap; width: calc(100% + 20px); margin-left: -10px; margin-right: -10px;}
			.officeListItem 						{flex: 1 1 auto; width:calc(50% - 20px); margin:0px 10px 20px 10px; background-color: #fff;  box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px; display: flex; flex-wrap: wrap;}
				.officeListItemImage 					{width: 40%;}
				.officeListItemImage *  				{height: 100%;}
				
				.officeListItemBlock 					{width: 60%; padding:30px; padding-bottom: 15px;}
					.officeListItemBlock h3 	 	 		{margin-bottom: 15px;}


			.officeListItem:only-child 			{max-width: calc(100% - 20px); flex-direction:row;}
			.officeListItem:only-child .officeListItemImage  {width: 30%;}
			.officeListItem:only-child .officeListItemBlock  {width: 70%;}

/********************************************** 
Ons team
**********************************************/
#officeContainer + #teamContainer 	{background-color:#f5f5f5;}
#officeContainer + #teamContainer .basicContainer {padding-top: 110px;}

#officeContainer .basicContainer {padding-top: 110px;}
#officeContainer:before {content: ''; display: block; margin:0px auto; height:1px; width: 80%; max-width: 600px; background-color: #e0e0e0;}

#breadcrumbContainer + #officeContainer .basicContainer {padding-top: 60px;}
#breadcrumbContainer + #officeContainer:before {display: none;}

#teamContainer 						{}
	#teamContainer .basicContainer		{max-width: 1280px; padding-top: 50px;}
	#teamContainer .basicContainer > h2 {margin-bottom: 50px;}

		#teamList 							{display: flex; flex-wrap: wrap; width: calc(100% + 20px); margin-left: -10px; margin-right: -10px;}
			.teamListItem 						{margin:0px 10px 30px 10px; width: calc(50% - 20px); background-color:#fff; display: flex; flex-direction:column; box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;border-radius: 5px;}

				.teamListItemSummary 				{display: flex; align-items:flex-start; margin-bottom: 20px; padding:0px 30px;}
					.teamListItemPhoto 					{width: 120px; margin-top: -15px;}
						.teamListItemPhoto .partContentFileImageGallery.single figure {background-color:#fff; border-radius: 50%; box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px; overflow:hidden;}

					.teamListItemNameAndFunction 		 		{width: calc(100% - 120px); padding-top: 20px; padding-left: 20px;}
						.teamListItemNameAndFunction h3 			{margin-bottom: 3px;}
						.teamListItemNameAndFunction .functie  		{color: #000; display: block; font-weight: 300; line-height: 1.4em;}

				.teamListItemText 					{padding:0px 30px;}
					.teamListItemText .partContentText {font-size: 16px;}

			.teamListItem .contactIconListBlank {display:flex; flex-wrap:wrap; padding:0px 30px 15px 30px; margin-top: auto;}
			.teamListItem .contactIconListBlank li {margin-right: 15px;}
			.teamListItem .contactIconListBlank li:last-child {margin-right:0;}

/********************************************** 
News
**********************************************/

#newsContainer {}
	#newsContainer .basicContainer {text-align: center; max-width: 1160px; padding-top: 50px;}	

		#newsTagList 				{}
			#newsTagList ul 				{display:flex; justify-content: center; width: calc(100% + 10px); margin-left: -5px; margin-right: -5px; font-size: 16px; padding-bottom: 20px;}
				#newsTagList ul li 			{margin-bottom: 10px; margin-left: 5px; margin-right: 5px;}
					#newsTagList ul li a 		{height:26px; line-height:22px; padding:0 10px; border-radius: 15px; border:solid 2px #ccc; display:block; text-decoration: none; font-size: 12px; text-transform: uppercase; font-weight: 500; color:inherit; transition: box-shadow .15s ease-in-out,transform .15s ease-in-out;}
					#newsTagList ul li.selected a {box-shadow: rgba(0, 0, 0, 0.15) 0px 1px 4px; background-color: #FF0055; border-color:#FF0055; color:#fff;}
					#newsTagList ul li a:hover 	{box-shadow: rgba(0, 0, 0, 0.15) 0px 1px 4px; text-decoration: underline;}
					

		#newsList 							{}
			.newsListItem 						{margin-bottom: 60px; background-color: #fff; display: flex; flex-wrap: wrap; align-items: flex-start;}
				.newsItemImage 					{position: relative; background-color: #000; overflow: hidden; width: 50%;}
				.newsItemImage .partContentFileImageGallery.single 	{transition: all .2s ease-in-out;}
				.newsItemImage:hover .partContentFileImageGallery.single {transform: scale(1.05); opacity: 0.8;}
				
				.newsItemBlock 					{padding:55px 60px 30px 60px; z-index: 1; margin:30px 0px 0px -60px; width: calc(50% + 60px); background-color: #f5f5f5;  display: flex; flex-direction: column; align-items: flex-start; text-align: left;}
					.newsItemBlock h3 				{margin-bottom: 10px;}
					.newsItemBlock h3 a				{color: #000; text-decoration: none; transition: color 0.3s;}
					.newsItemBlock h3 a:hover 		{text-decoration: underline;}
					.newsItemBlock .partContentText {font-size: 16px; margin-top: auto;}
					.newsItemBlock .partContentText p {margin-bottom: 15px;}
					.newsItemBlock .partButton 		{}

					.newsItemBlock > * 				{max-width: 100%; /* IE 11 fix */}

/********************************************** 
Generic 
**********************************************/

time {margin-bottom: 15px; font-weight: 400; font-size: 16px; display:inline-block;}

/* price */
#priceContainer  	{text-align: right; align-self:flex-end; padding-bottom: 27px; line-height: 1.3em;} 
	#priceContainer #priceFrom   			{}
	#priceContainer #priceUpTo  			{}
	#priceCondition #conditionLabel 		{}

		.priceLabel, #conditionLabel 			{font-family: 'Roboto', sans-serif; font-size: 18px; font-weight: 400; line-height: 1.3em; margin-top: 2px; display: block;}
		.priceValue 							{font-size: 22px; font-weight: 600; color: #fff; display: block; font-family: 'Poppins', sans-serif; margin-top: 7px; white-space: nowrap;}

	/* project */
	.project #priceContainer  {display: flex;}
	.project #priceContainer #priceFrom {display: flex; align-items:center; margin-right: 4px;}
	.project #priceContainer #priceUpTo {display: flex; align-items:center;}
		.project .priceLabel {margin-right: 4px; margin-top: 0;}
		.project .priceValue {margin-top: 0;}
		.project #conditionLabel {margin-left: 4px;}

/* news */

		#contentDetailFullWidth {padding-left: 60px; padding-right: 60px;}

		#contentDetailLeft 	{width: calc(100% - 400px); padding-left: 60px; padding-right: 60px;}
		#contentDetailLeft:only-child {width: 100%; max-width: 840px;}
			#contentDetailLeft .partContentFileImageGallery.single {margin-bottom: 30px;}
			#contentDetailLeft .partContentForm {background-color: #fff; padding:30px; padding-bottom: 1px; box-shadow: rgba(0, 0, 0, 0.15) 0px 1px 4px;}


		#contentDetailRight {width: 400px; margin-bottom: 30px;}
			#contentDetailRightStickyContainer {position: sticky; top: 135px;}

				.detailRightblock {background: #fff; box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px; margin-bottom: 30px; border-radius: 5px; padding:30px 30px 1px 30px;}
					.detailRightblock .partContentFileImageGallery.single {width: 140px; margin-top: -45px; margin-bottom: 20px; background-color: #000; border-radius: 50%; box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px; overflow:hidden;}
						
						.detailRightblock span#introLabel     {font-weight: 500; color: #999; font-size: 18px; margin-bottom: 5px; display: block;}

						.detailRightblock h3 					{margin-bottom: 20px; font-weight: 600;}

						/* share */
						#detailRightblockShare {margin: -30px; margin-bottom: 30px; padding:30px; background-color: #f5f5f5;}

						/* tags */
						.detailRightblock #newsTagList ul {justify-content: flex-start;}

						/* usp's */
						.detailRightblock .partContentText {font-size: 16px;}
							.detailRightblock .partContentText ul   	{padding-left: 0; padding-bottom: 20px; margin-bottom: 0; font-weight: 500;}
								.detailRightblock .partContentText ul li 	{display:flex; margin-bottom: 0px; padding-left: 15px;}
									.detailRightblock .partContentText ul li:before {width: 22px; height:22px; border-radius:50%; display:flex; justify-content: center; align-items:center; background-color:#FF0055; margin-top: 6px; content: 'check'; flex: 0 0 auto; color:#fff; margin-left:0;}

/* call to action header */
#callToActionHeader               {background-color: #000; position: relative; text-align: center;}
#callToActionHeader .partContentFileImageGallery.single {opacity: 0.9;}

#callToActionHeaderOverlay 			{position: absolute; top:0; left:0; bottom:0; right:0;} 
#callToActionHeaderOverlay .basicContainer {display: flex; flex-direction: column; justify-content: center; align-items: center; padding-top: 30px; padding-bottom: 0; height:100%;}
	#callToActionHeaderOverlay .h1 		{color: #fff; text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5); margin-bottom: 30px; max-width: 800px;}
	#callToActionHeaderOverlay .partButton 	{height:46px; justify-content: center; font-size: 18px; padding-left: 20px; padding-right: 20px;}

/* small header */
header#headerSmall          			{}

	#intro {}
		#intro .basicContainer {padding-bottom: 0;}

#textIntroContainer  				{}
	#textIntroContainer .basicContainer 	{margin-top: -60px; position: relative; z-index: 1;}
		#textIntro  {background-color: #f5f5f5; max-width: 900px; padding:60px 60px 30px 60px;}
		#textIntro h1 				{font-weight: 500; margin-bottom: 30px; color: #000;}
		#textIntro .partContentText {font-weight: 400; font-size: 20px; margin-top: -20px;}
		#textIntro #newsDate 		{font-weight: 700; margin-top: -15px; display: block; margin-bottom: 40px; color: #999; font-style: italic;}

/* breadcrumb */
#breadcrumbContainer {}
	#breadcrumbContainer .basicContainer {padding-top: 30px; padding-bottom: 0;}
	#breadcrumbContainer .partBreadcrumb {margin-left: 60px; margin-right: 60px;}

/* offices and team */
.contactIconListBlank 			{line-height: 1.3em; font-weight: 500; font-size: 16px; padding-bottom: 15px;}
	.contactIconListBlank li 		{margin-bottom: 15px;}
	.contactIconListBlank li a 		{text-decoration: none; color: #1a2f43; display: inline-flex; align-items: center;}
	.contactIconListBlank li a span.icon   {margin-right: 10px; color: #FF0055; font-size: 15px; width: 22px; height:22px; background-color:rgba(255, 0, 85,0.1); border-radius:5px; display:flex; align-items:center; justify-content:center;}
		.contactIconListBlank li a span.icon svg 		{fill:#FF0055; flex: 1 1 auto; max-width:12px;}
	.contactIconListBlank li a span.label  	{word-break:break-all; transition: color 0.3s;}
	.contactIconListBlank li a:hover span.label {text-decoration: underline; color: #000;}

/* sharing */
#shareButtonListContainer 		{columns: 2 200px;}
#shareButtonListContainer li 	{margin-bottom: 20px; break-inside: avoid;}

#shareButtonListContainer li#facebook a {background-color: #3b5998;}
#shareButtonListContainer li#email a {}
#shareButtonListContainer li#twitter a {background-color: #1da1f2;}
#shareButtonListContainer li#whatsapp a {background-color: #25d366;}
  
#shareButtonListContainer li a {padding: 15px; display: flex; align-items:center; border-radius: 5px; background-color:#213b54; color:#fff; text-decoration:none; transition: box-shadow .15s ease-in-out,transform .15s ease-in-out;}
#shareButtonListContainer li a:hover {transform: scale(1.01); z-index: 1; box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;}
	#shareButtonListContainer li a .icon {margin-right: 10px;}  
	#shareButtonListContainer li a .icon svg.partSvg {flex: 1 1 auto; fill: #fff; max-height: 18px; width: 18px;}
	#shareButtonListContainer li a .label {font-weight: 700;}

/* favorite */
#favoriteListContainer 		{}
#favoriteListContainer li 	{margin-bottom: 20px;}
#favoriteListContainer li a {padding: 15px; border-radius: 5px; background-color: #FF0055; color:#fff; text-decoration:none; transition: box-shadow .15s ease-in-out,transform .15s ease-in-out; display: block; font-weight: 700;}
#favoriteListContainer li a:hover {transform: scale(1.01); z-index: 1; box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;}

.messageContainer p {line-height: 1.3em; font-size: 18px; margin-bottom: 30px; font-weight: 400;}

/* logos mortgage */

#logoMortgageContainer                {}
#logoMortgageContainer .basicContainer 	{}
#logoMortgageContainer:before {content: ''; display: block; margin:0px auto; height:1px; width: 80%; max-width: 600px; background-color: #e0e0e0;}

	.partSlider.logoMortgage .slideContainerViewport {margin-left: 30px; margin-right: 30px;}
	.partSlider.logoMortgage .sliderButton {padding:0;}
	.partSlider.logoMortgage .sliderButton svg {fill: #999;}

	.partSlider.logoMortgage .slide {padding:0px 20px;}

/* Form inschrijven huurwoning */
.partContentText.zoekopdrachtHuurText {font-size:14px;}

/********************************************** 
Footer 
**********************************************/

/* logos */
#footerLogos                {}
	#footerLogos .basicContainer 	{}
	#footerLogos:before {content: ''; display: block; margin:0px auto; height:1px; width: 80%; max-width: 600px; background-color: #e0e0e0;}

	.partSlider.footerLogos .slideContainerViewport {margin-left: 30px; margin-right: 30px;}
	.partSlider.footerLogos .sliderButton {padding:0;}
	.partSlider.footerLogos .sliderButton svg {fill: #999;}

	.partSlider.footerLogos .slide {padding:0px 20px;}

/* menu */
#footerMenu                         {background-color: #213b54}
    #footerMenu .basicContainer         {padding-top: 60px; padding-bottom: 30px;}
		#footerMenuColumnContainer 			{display: flex; flex-wrap: wrap; align-items: flex-start; width: calc(100% + 60px); margin-left: -30px; margin-right: -30px;}
		.footerMenuColumn 					{flex: 1 1 auto; width: calc(33.3333333333% - 60px); display:flex; flex-direction:column; margin-left: 30px; margin-right: 30px;}
		.footerMenuColumn h3 				{color: #fff; margin-bottom: 15px;}

			/* contact info */
			#footerContactContainer 		{flex: 1 1 auto; display: flex;}
			#footerContactContainer .contactIconListBlank {font-size: 18px;}
			#footerContactContainer .contactIconListBlank li a span.icon {background-color: #1b3146; width: 30px; height:30px; font-size: 20px;}
			#footerContactContainer .contactIconListBlank li a {color: rgba(255,255,255,0.9);}
			#footerContactContainer .contactIconListBlank li a:hover span.label {color: #fff;}

			/* service list */
            #footerServiceList                       {line-height: 1.4em; font-size: 16px; font-weight: 400; padding-bottom: 20px;}
            #footerServiceList li                    {margin-bottom: 10px; position: relative; padding-left: 15px;}
            #footerServiceList li a                  {color: rgba(255,255,255,0.9); text-decoration: none;}
			#footerServiceList li a:hover            {color: #fff; text-decoration: underline;}
			#footerServiceList li:before 			 {content:'\2022'; color: #FF0055; font-size: 18px; position: absolute; left:0; top:1px;}

			/* populair link list */
			#populairList                      	 	{line-height: 1.4em; font-size: 16px; font-weight: 400; padding-bottom: 20px;}
			#populairList li                    	{margin-bottom: 10px; position: relative; padding-left: 15px;}
            #populairList li a                  	{color: rgba(255,255,255,0.9); text-decoration: none;}
			#populairList li a:hover            	{color: #fff; text-decoration: underline;}
			#populairList li:before 			 	{content:'\2022'; color: #FF0055; font-size: 18px; position: absolute; left:0; top:1px;}

			/* onze makelaars */		
			#randomEstateAgent             			{flex: 1 1 auto; padding: 0 30px; background-color: #1b3146; border-radius: 5px; display: flex; align-items:flex-start; flex-wrap: wrap; margin-top: 15px; margin-bottom: 30px;}           
			#randomEstateAgent .partContentFileImageGallery.single {margin-top: -15px; margin-right: 20px; background-color: #000; border-radius: 50%; box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px; overflow:hidden; flex: 0 0 auto;}
			#randomEstateAgentText                      {margin-top: 20px;}
				#randomEstateAgentText span.h3        	{display: block; margin-bottom: 3px; color:#fff;}
				#randomEstateAgentText span.functie         {color:rgba(255,255,255,0.9); display: block; font-weight: 300; line-height: 1.4em; font-size: 16px; margin-bottom: 15px;} 
				#randomEstateAgentText .partButton.underline {color: #fff;}
		
			
/* links */		
#footerMenuLinks 	{font-size: 14px; font-weight: 400; background-color:#1b3146; color: #fff;}
	#footerMenuLinks .basicContainer {padding-top: 0px; padding-bottom: 0px;}		
		#footerNavList 	{display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 10px; padding-top: 30px;}
		#footerNavList li {margin: 0px 20px 20px 20px;}
		#footerNavList li a {color:#fff; text-decoration: none; display: flex; align-items: center;}
		#footerNavList li a:hover {text-decoration: underline;}
		#footerNavList li svg 	{margin-left: 3px; height:14px; fill:#fff;}

		/* social media */
		#footerNavList li#socialMedia {display: flex; align-items: center;}
		#footerNavList li#socialMedia a {margin-left: 10px;}
		#footerNavList li#socialMedia a svg 	{margin-left: 0; height:14px; fill:#fff;}

/***********************************************
Popup
***********************************************/


.popupCustomContainer h2 {} 


/***********************************************
360 
***********************************************/
#popupContainer360 {} /* Used for ajax */
    #container360 {position:fixed;top:0px;left:0px;width:100%;height:100%;background-color:#fff; z-index: 1004; overflow:hidden;}

        #panoTopContainer                                       {height: 50px; background-color: #213b54; line-height: 1.4em; display: flex; align-items: center; font-weight: 600;}
        #panoTopContainer li                                    {margin-left: 25px; margin-bottom: 5px;}
        #panoTopContainer li a                                  {padding: 3px 0px; display: block; text-decoration: none; color: #fff; transition: 0.3s; border-bottom: solid 2px transparent;}
        #panoTopContainer li.selected a                         {border-color: #000}
        #panoTopContainer li a:hover                            {border-color: #000}

        #panoTopContainer #close {width: 50px; height: 50px; background:#fff url(/images/style/icon-close-black.svg) no-repeat center; background-size: 25px 25px; transition: 0.3s; cursor: pointer; margin-left: auto;}
        #panoTopContainer #close:hover {}

        #panoBottomContainer {height: calc(100% - 50px); width: 100%;}

/***********************************************
Mobile toggle menu
***********************************************/

body.mobileMenuToggleActive                               {position: fixed; /* prevents scrolling bug at the bottom of the screen  */ }

#mobileMenuToggle                                         {font-size: inherit; font-weight: inherit; font-family: inherit; position:relative; z-index: 1002; display:none; align-items:center; cursor: pointer; background-color: transparent; text-decoration: none; outline: 0; -webkit-appearance: none; align-items: center; white-space: nowrap; overflow: hidden; border: none; padding:0px;}

#mobileMenuToggle .mobileMenuButtonLabel                        {margin-left:5px;}
#mobileMenuToggle .mobileMenuButtonHamburger 					{width: 20px; height:20px; display:flex; flex-direction:column; justify-content:center;}
#mobileMenuToggle .mobileMenuButtonHamburger span 				{width: 20px; height: 2px; background-color: #000; margin: 2px 0px; transition: all 0.3s ease-in-out;}
#mobileMenuToggle .mobileMenuButtonHamburger span:nth-child(2) 	{width: 15px;}

#mobileMenuToggle.active .mobileMenuButtonHamburger span 				      {background-color: #FF0055;}
#mobileMenuToggle.active .mobileMenuButtonHamburger span:nth-child(1) {transform: translateY(6px) rotate(45deg);}
#mobileMenuToggle.active .mobileMenuButtonHamburger span:nth-child(2) {opacity: 0;}
#mobileMenuToggle.active .mobileMenuButtonHamburger span:nth-child(3) {transform: translateY(-6px) rotate(-45deg);}

	/* menu overlay */
	#mobileMenuToggleContainer 			{left: 0%; top: 90px; width: 100%; height: 100%; position: fixed; background-color:#fff; z-index: 1002; display: none;}
	body.mobileMenuToggleActive #mobileMenuToggleContainer 	{display: block;} 

	#mobileMenuToggleContainerScroll                      {overflow-y: auto; height: calc(100% - 90px);}

	@media screen and (min-width: 1279px){
		body.mobileMenuToggleActive 							{position: static;}
		body.mobileMenuToggleActive #mobileMenuToggleContainer  {display: none;}
	}

	@media (max-width: 1279px){
		#mobileMenuToggleContainerScroll {overflow-y:scroll; -webkit-overflow-scrolling: touch;}
	}

/***********************************************
Mobile fullscreen container
***********************************************/

body.mobileFullScreenContainerActive {
	position: fixed; /* prevents scrolling bug at the bottom of the screen  */
}

body.mobileFullScreenContainerActive nav {z-index: 1;}

/* Menu overlay */
.mobileFullScreenContainer {

}

.mobileFullScreenContainer.active {
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	position: fixed;
	background-color: #fff;
	z-index: 1004;
	height: calc(100% - 56px);
}

.mobileFullScreenContainer.active .mobileFullScreenContainerScroll {
	overflow-y: auto;
	padding: 25px;
	padding-bottom: 5px;
	height: 100%;
}

/* menu's */
#mobileFullScreenButtonContainer {
	padding: 0px 25px;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: #f5f5f5;
	display: none;
	align-items: center;
	z-index: 1004;
	height: 56px;
	box-shadow: 0 5px 30px 0 rgba(0,0,0,0.20);
	border-top:solid 1px #e0e0e0;
}

.mobileFullScreenButtonOpen {
	background-color: transparent;
	text-decoration: none;
	cursor: pointer;
	outline: 0;
	-webkit-appearance: none;
	padding: 0px 15px;
	font-weight: 600;
	font-size: inherit;
	font-size: 16px;
	height: 36px;
	line-height: 36px;
	border:none;
	border-radius: 5px;
	font-weight: 600;
	color: #fff;  
	background-color: #FF0055; 
	/*  background: #009F92 url('/images/style/icon-filter-white.svg') no-repeat left 15px center; background-size: 15px 15px;*/
	width: 100%;
	font-family: 'Poppins', sans-serif;
}

/* close menu */
.mobileFullScreenContainer.active .mobileFullScreenContainerFooter {
display: block;
}

.mobileFullScreenContainer .mobileFullScreenContainerFooter {
	display: none;
	padding: 10px 20px;
	background-color: #F1F2F2;
	position: fixed;
	height: 56px;
	left: 0;
	bottom: 0;
	right: 0;
	box-shadow: 0 5px 30px 0 rgba(0,0,0,0.20);
	border-top: solid 1px #e0e0e0;
}

.mobileFullScreenButtonClose {
	background-color: #213b54;
	text-decoration: none;
	cursor: pointer;
	outline: 0;
	-webkit-appearance: none;
	padding: 0px 15px 0px 15px;
	font-weight: 500;
	font-size: inherit;
	font-size: 16px;
	height: 36px;
	line-height: 36px;
	border:none;
	border-radius: 5px;
	font-weight: 600;
	color: #fff;   
	width: 100%;
	font-family: 'Poppins', sans-serif;
	text-align: center;
}

@media (max-width: 667px) {
	.mobileFullScreenContainer.active .mobileFullScreenContainerScroll {
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
	}
}

/***********************************************
Login 
***********************************************/
#customLoginContainer {display: flex; flex-wrap: wrap;}
    #customLoginContainerLeft {width: 50%; padding-right: 30px;}
	#customLoginContainerRight {width: 50%; padding-left: 30px;}
	
/***********************************************
Iframes 
***********************************************/

.iFrameContainer 		{margin-bottom: 30px;}
.iFrameContainer iframe {height: 800px;}
.iFrameContainer #rekentool {height: 1300px;}

.iFrameContainer #energie {height: 1300px;}

/***********************************************
Whatsapp floating button 
***********************************************/

#whatsappFloatingButton {
	position: fixed;
	bottom: 25px;
	left: 25px;
	width: 60px;
	height: 60px;
	background-color: #25d366;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	z-index: 1000;
	animation: whatsappButtonAnimation 0.5s;
}
  
#whatsappFloatingButton svg {
	width: 36px;
	fill: #fff;
}
  
@-webkit-keyframes whatsappButtonAnimation {
	0% {
		transform: scale3d(0, 0, 0);
		transition: transform 0.3s ease-in-out;
	}
	100% {
		transform: scale3d(1, 1, 1);
		transition: transform 0.5s cubic bezier(0.18, 0.89, 0.32, 1.28);
	}
}

@media screen and (max-width: 768px) {
	#whatsappFloatingButton {
		width: 36px;
		height: 36px;
	}

	#whatsappFloatingButton svg {
		width: 20px;
	}
}