/*
Theme Name:     Jupiter Child Theme
Theme URI: 		http://demos.artbees.net/jupiter5
Description:    Child theme for the Jupiter theme 
Author:         Otti Ott (Ottimoto - Web and Print
Theme URI: 		http://themeforest.net/user/artbees
Template:       jupiter
Text Domain: mk_framework
Domain Path: /languages/
*/



/* ===================================================================================================================
===================================================================================================================
ADDITIONS/CHANGES CSS CHILD THEME.
===================================================================================================================
=================================================================================================================== */

/* ===================================================================================================================
   * Responsive styles for Marina Edge in addition to styles defined parent theme
   * Author: otti@ottimoto.com.au
   * Autor URL: http://www.ottimoto.com.au
   =================================================================================================================== */

/* ===================================================================================================================
Title: HTML5 Responsive styles - design dependent
   =================================================================================================================== */
   
   
	/* color: rgb(0, 0, 0); BLACK. */
	/* color: rgb(255, 255, 255); WHITE. */
	/* color: rgb(88, 89, 91); GREY (Text). */ /* #58595b */
	/* color: rgba(88, 89, 91, 0.75); GREY (Text) 75% transparency */
	/* background-color: rgb(169, 169, 169); BUTTON HOVER GREY. */
	/* color: rgb(0, 84, 139); BLUE (Nav active). */ /* #00548b */
	/* color: rgb(209, 18, 66); RED. */
	
	/* Gradient Blues Button Nav. */
	/* rgb(0, 65, 105); */
	/* rgb(71, 165, 216); */
	
	/* Light grey gradient popup. */
	/* rgb(247, 247, 248); LIGHT GREY */
	/* rgb(220, 220, 220); LIGHTER GREY */
	/* rgb(235, 235, 235); VERY LIGHT GREY */
	
	/* color: rgb(0, 174, 239); Middle Blue for header on Plans & Views. */


/* FONTS. */
/* Roboto selected in Jupiter Theme Options. 
Thin = 100
Light = 300
Regular = 400
Medium = 500
Bold = 700
*/
   

/* OWN CSS FILES.
====================================================================================================================== */
/*  @import 'mediaquery-reporter.css';  Add media reporter to see bar for breakpojnt changes. DELETE!!! */


/* HELPER CLASSES.
====================================================================================================================== */
/* Add the .visuallyhidden class to hide text from browsers but make it available for screen readers. Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden 
{ 
	border: 0; 
	clip: rect(0 0 0 0); 
	height: 1px; 
	margin: -1px; 
	overflow: hidden; 
	padding: 0; 
	position: absolute; 
	width: 1px; 
}

/* HELPER CLASSES.
====================================================================================================================== */


/* GENERAL.
====================================================================================================================== */
/* Remove the top and bottom padding on the theme content throughout - works because first item is slider. */
#theme-page .theme-page-wrapper .theme-content {
	padding: 0 0 !important;
}

/* COLUMNS. */
/* Remove padding for nested columns (i.e. Architecture page) */
.inlineButtons .vc_column_container .vc_column-inner {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Remove the margin (white space) below the image slider. */
.wpb_layerslider_element {
	margin-bottom: 0 !important;
}

/* Remove the margin below the large single images and buttons over transparneny (over large images). */
.noMargBot {
	margin-bottom: 0 !important;
}

/* Images to vertical align bottom instead of top to avoid thin spaces between. */
.wpb_single_image img {
	vertical-align: bottom;
}

/* BUTTONS. */
/* General all buttons. */
.vc_btn3.vc_btn3-style-outline-custom,
.vc_btn3.vc_btn3-style-outline, .vc_btn3.vc_btn3-style-outline-custom, .vc_btn3.vc_btn3-style-outline-custom:focus, 
.vc_btn3.vc_btn3-style-outline-custom:hover, .vc_btn3.vc_btn3-style-outline:focus, .vc_btn3.vc_btn3-style-outline:hover {
	font-size: 14px;
	font-weight: 300;
	border-width: 1px;
}
/* Make button less in height. */
.vc_btn3.vc_btn3-size-sm.vc_btn3-style-outline-custom {
	padding-top: 4px;
	padding-bottom: 4px;
}

/* Buttons on white with grey border. */
.butOnWhite .vc_general.vc_btn3-left:hover, .butOnWhite .vc_general.vc_btn3-left:active, .butOnWhite .vc_general.vc_btn3-left:focus {
	border: 1px solid rgb(88, 89, 91) !important; /* GREY (Text). */
}
/* Mobile first: Button on white align centered first -> later left aligned above main breakpoint. */
.butOnWhite.vc_btn3-container.vc_btn3-left {
	text-align: center;
}


/* Buttons on backgrounds with white border and remove margin bottom. */
.butOnBackground .vc_general.vc_btn3:hover, .butOnBackground .vc_general.vc_btn3:active, .butOnBackground .vc_general.vc_btn3:focus {
	border: 1px solid rgb(255, 255, 255) !important; /* WHITE. */
}
/* Margin for button container to be zero. */
.butOnBackground.vc_btn3-container {
	margin: 0;
}
/* Mobile first. Some of the button son backgrounds will stack and therefor need margin bottom below breakpoint. */
.butOnBackground.margBotMobile.vc_btn3-container {
	margin-bottom: 10px;
}


/* END GENERAL.
====================================================================================================================== */


/* TYPOGRAPHY.
====================================================================================================================== */
/* Set p font-size and font-weight unless found in theme where to set. */
p {
	font-weight: 400; /* Regular. */
	margin-bottom: 15px;
}
/* Blue and red price points in thicker font and different colours. */
p .priceBlue {
	font-weight: 500; /* Medium. */
	color: rgb(0, 84, 139); /* BLUE (Nav active). */
}
p .priceRed {
	font-weight: 500; /* Medium. */
	color: rgb(209, 18, 66); /* RED. */
}
/* The disclaimer text under the main text on the Home page. */
p.disclaimer {
	font-size: 12px !important;
}

/* Medium font i.e. span inside panel heading h3. */
.mediumFont {
	font-weight: 500; /* Medium. */
}

/* Heading inside main content on Home page. */
.master-holder h2.contenth2  {
	font-size: 16px !important;
	font-weight: 500; /* Medium. */
	color: rgb(88, 89, 91) !important; /* GREY (Text). */
	text-transform: capitalize !important; 
	margin-bottom: 0;
}
/* When heading requires margin. */
.master-holder h2.contenth2.withMargin  {
	margin-bottom: 17px;
}

/* Mobile first: Text on slim panel as h3. Font size adjusted for different devices. */
.master-holder .panelHeading h3 {
	font-size: 18px;
	font-weight: 300;
	margin-bottom: 0;
	text-transform: none !important; 
}
/* Text on table panel as h3. */
.master-holder .tableHeading h3 {
	font-size: 17px;
	font-weight: 500;
	margin-bottom: 0;

}


/* END TYPOGRAPHY.
====================================================================================================================== */

/* HEADER.
====================================================================================================================== */
/* Change the padding of the heading wrapper to 1px less than header height. This not only eliminates the small gap between header and slider/hero, but also the thin grey line. */
.header-style-1 .mk-header-padding-wrapper {
	padding-top: 138px !important;
}

/* Retina logo in standard header to be sized down to suit. */
.mk-header .header-logo.fit-logo-img.add-header-height {
	width: 263px;
	height: 89px;
}



/* END HEADER.
====================================================================================================================== */


/* NAVIGATION.
====================================================================================================================== */
/* MOBILE. */
.mk-responsive-nav li a {
	font-size: 15px;
	font-weight: 300;
}
.mk-responsive-nav li a:hover, .mk-responsive-nav li a:active, .mk-responsive-nav li a:focus {
	background-color: rgb(255, 255, 255); /* WHITE. */
	color: rgb(0, 84, 139) !important; /* BLUE (Nav active). */
	font-weight: 500;
}

/* Enquire button mobile - same styles as desktop button. */
.mk-header .mk-responsive-nav li.menu-item-type-custom a.menu-item-link {
	color: rgb(255, 255, 255) !important; /* WHITE. */
	background: rgb(0,65,105); /* Old browsers */
	background: -moz-linear-gradient(top, rgb(71,165,216) 0%, rgb(0,65,105) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgb(71,165,216) 0%,rgb(0,65,105) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgb(71,165,216) 0%,rgb(0,65,105) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#004169', endColorstr='#47a5d8',GradientType=0 ); /* IE6-9 */
}

/* DESKTOP. */
/* Change font for current menu item to be medium font weight. */
.menu-hover-style-2 .main-navigation-ul > li.current-menu-item > a.menu-item-link {
	font-weight: 500;
}
/* Change menu item on hover to be medium font weight. Must include fix - next declaration - to avoid jump. */
.menu-hover-style-2 .main-navigation-ul > li.menu-item > a.menu-item-link:hover {
	font-weight: 500;
}
/* Fix of bold hover effect on hover navigation item. Add title for each nav item in WP. */
.menu-hover-style-2 .main-navigation-ul > li.menu-item > a.menu-item-link::after {
	display: block;
	content: attr(title);
	font-weight: 500;
	height: 1px;
	color: transparent;
	overflow: hidden;
	visibility: hidden;
}

/* ENQUIRE button. */
/* To create a button appearance set height and line height, and calculate margin top. 139 header height minus button height = 100, divided by 2 and subtract the border thickness = 49px. */
/* Same transition as for sticky header. */
.mk-header .menu-hover-style-2 .main-navigation-ul li.menu-item-type-custom a.menu-item-link {
	height: 39px;
	line-height: 39px;
	margin-top: 49px;
	color: rgb(255, 255, 255); /* WHITE. */
	border: 1px solid rgb(88, 89, 91); /* GREY (Text). */
	transition: all 0.3s ease;
	
	background: rgb(0,65,105); /* Old browsers */
	background: -moz-linear-gradient(top, rgb(71,165,216) 0%, rgb(0,65,105) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgb(71,165,216) 0%,rgb(0,65,105) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgb(71,165,216) 0%,rgb(0,65,105) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#004169', endColorstr='#47a5d8',GradientType=0 ); /* IE6-9 */
}
/* Use Specificity. */
.mk-header .menu-hover-style-2.menu-hover-style-2 .main-navigation-ul li.menu-item-type-custom a.menu-item-link:hover {
	color: rgb(255, 255, 255) !important; /* WHITE. */
	background-color: rgb(88, 89, 91); /* GREY (Text). */
}
/* When hover outside of button but still inside li (top of button). Make sure the text inside button is not blue as other menu item text. */
.mk-header .menu-hover-style-2 .main-navigation-ul > li.menu-item-type-custom:hover > a.menu-item-link {
	color: rgb(255, 255, 255) !important; /* WHITE. */
	font-weight: 500;
}
/* 90-39 = 51/2 = 25-1 = 24. */
.mk-header.a-sticky .menu-hover-style-2 .main-navigation-ul li.menu-item-type-custom a.menu-item-link {
	height: 39px !important;
	line-height: 39px !important;
	margin-top: 24px;
	color: rgb(255, 255, 255); /* WHITE. */
	border: 1px solid rgb(88, 89, 91); /* GREY (Text). */
	transition: all 0.3s ease;
	
	background: rgb(0,65,105); /* Old browsers */
	background: -moz-linear-gradient(top, rgb(71,165,216) 0%, rgb(0,65,105) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgb(71,165,216) 0%,rgb(0,65,105) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgb(71,165,216) 0%,rgb(0,65,105) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#004169', endColorstr='#47a5d8',GradientType=0 ); /* IE6-9 */
}
/* Distance to the left to other nav items. */
.mk-header .menu-hover-style-2.menu-hover-style-2 .main-navigation-ul li.menu-item-type-custom {
	padding-left: 20px;
}



/* END NAVIGATION.
====================================================================================================================== */


/* HERO SLIDER & HERO IMAGES.
====================================================================================================================== */
/* Slider navigation buttons to be changed form small round to rectangles. v6 selected in theme. Use specificity. */
.ls-v6 .ls-bottom-slidebuttons.ls-bottom-slidebuttons a {
	border: 1px solid rgb(88, 89, 91) !important; /* GREY (Text). */
	border-radius: 0;
	width: 90px !important;
	height: 6px;
	margin: 0;
}
.ls-v6 .ls-bottom-slidebuttons.ls-bottom-slidebuttons a.ls-nav-active {
	background-color: rgb(88, 89, 91); /* GREY (Text). */
}
/* Change the nav buttons flink states using again specificity and importnat. Also active buttons. */
.ls-v6 .ls-bottom-slidebuttons.ls-bottom-slidebuttons a:hover, .ls-v6 .ls-bottom-slidebuttons.ls-bottom-slidebuttons a.ls-nav-active:hover {
	border: 1px solid rgb(0, 84, 139) !important; /* BLUE (Nav active). */
	background-color: rgb(0, 84, 139) !important; /* BLUE (Nav active). */
}

/* Format text on top of sliders. */
.master-holder h1, .master-holder h2 { 
	text-transform: capitalize !important; 
}

/* Mobile first: Hide the navigation buttons for mobile first. */
.ls-v6 .ls-bottom-slidebuttons.ls-bottom-slidebuttons {
	display: none !important;
}


/* END HERO SLIDER & HERO IMAGES.
====================================================================================================================== */


/* HOME.
====================================================================================================================== */
/* New sticker bar with text 10/2019. */
.stickerBar {

}

.stickerBarColumn {
	padding-left: 100px;
}

.stickerBarText {
	animation-name: textMoves;
    animation-delay: 2s;
    animation-duration: 4s; /* Duration of the animation. */
    animation-iteration-count: 1; /* Duration as number or in infinite. */
    animation-delay: 1s; /* Defines when the animation starts. */
    /* transform-origin: 50% 50%; Change the origin. */
    transform-origin: 50% 50%; /* Change the origin. */
}
@keyframes textMoves {
	0%   { transform: translate(1000px, 0); opacity: 0; }
	1%   { opacity: 1; }
	50%  { transform: translate(50% 50%); opacity: 1; }
	100% { transform: translate(0, 0); opacity: 1; }
}




/* END HOME.
====================================================================================================================== */

/* PAGES.
====================================================================================================================== */
/* PANELS. */
/* Mobile first as taller image required for mobiles when buttons are stacked. Also different padding. */
.darkPanel {
	background-image: url(images/dark-panel-skinny.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	padding-top: 7px;
	padding-bottom: 7px;
}
.lightPanel {
	background-image: url(images/light-panel-skinny.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	padding-top: 7px;
	padding-bottom: 7px;
}

/* WIDE IMAGES. */
/* Absolute positioned row on top of large images with transparency. */
.relPosRow {
	position: relative;
}
/* Mobile first: Absolute positioned text with background. Also different padding for devices. */
.absPosRow {
	position: absolute;
	bottom: -1px; /* 0px show small gap on mobile - negatove 1 px does not harm on other devices as it cant be seen. */
	width: 100%;
	padding-top: 7px;
	padding-bottom: 7px;
}
/* Mobile first: For some pages the transparent box with the button needs to sit on top instead of bottom. Also set height. */
.absPosRow.topPos {
	position: absolute;
	top: -1px; /* 0px show small gap on mobile - negatove 1 px does not harm on other devices as it cant be seen. */
	width: 100%;
	height: 40px;
}
/* Full width images make sure they really stretch full width. */
.fullStretch .wpb_single_image .vc_figure,
.fullStretch .wpb_single_image .vc_single_image-wrapper,
.fullStretch .wpb_single_image img {
	width: 100%;
}


/* LOCATION. */
/* The map itself with vertical alignment corrected. */
.locationMap .wrap_svl_center {
	vertical-align: bottom;
	line-height: 1;
}

/* The points on the location map. */
/* First the animation. */
.pins_animation {
	width: 30px !important;
	height: 30px !important;
	box-shadow: 0 0 30px rgba(255,255,255,1)
}

/* As per https://www.sitepoint.com/scroll-based-animations-jquery-css3/
JS inserted into theme options with one line commented out to avoid animation every time scroll downwards is happening. */
/* Move in from right. */
.locMapIcon01 .point_style img, .locMapIcon02 .point_style img, .locMapIcon18 .point_style img,
.locMapIcon19 .point_style img, .locMapIcon20 .point_style img {
  opacity: 0;
  -moz-transition: all 800ms linear;
  -webkit-transition: all 800ms linear;
  -o-transition: all 800ms linear;
  transition: all 800ms linear;
  -moz-transform: translate3d(2000px, 0px, 0px);
  -webkit-transform: translate3d(2000px, 0px, 0px);
  -o-transform: translate(2000px, 0px);
  -ms-transform: translate(2000px, 0px);
  transform: translate3d(2000px, 0px, 0px);
}
.locMapIcon01 .point_style img.in-view, .locMapIcon02 .point_style img.in-view, .locMapIcon18 .point_style img.in-view,
.locMapIcon19 .point_style img.in-view, .locMapIcon20 .point_style img.in-view {
  opacity: 1;
  -moz-transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}
/* Move in from left. */
.locMapIcon03 .point_style img, .locMapIcon04 .point_style img, .locMapIcon05 .point_style img, .locMapIcon06 .point_style img, 
.locMapIcon07 .point_style img, .locMapIcon08 .point_style img, .locMapIcon09 .point_style img, .locMapIcon10 .point_style img,
.locMapIcon11 .point_style img, .locMapIcon12 .point_style img, .locMapIcon13 .point_style img, .locMapIcon14 .point_style img,
.locMapIcon15 .point_style img, .locMapIcon16 .point_style img, .locMapIcon17 .point_style img {
  opacity: 0;
  -moz-transition: all 800ms linear;
  -webkit-transition: all 800ms linear;
  -o-transition: all 800ms linear;
  transition: all 800ms linear;
  -moz-transform: translate3d(-1000px, 0px, 0px);
  -webkit-transform: translate3d(-1000px, 0px, 0px);
  -o-transform: translate(-1000px, 0px);
  -ms-transform: translate(-1000px, 0px);
  transform: translate3d(-1000px, 0px, 0px);
}

.locMapIcon03 .point_style img.in-view, .locMapIcon04 .point_style img.in-view, .locMapIcon05 .point_style img.in-view, .locMapIcon06 .point_style img.in-view,
.locMapIcon07 .point_style img.in-view, .locMapIcon08 .point_style img.in-view, .locMapIcon09 .point_style img.in-view, .locMapIcon10 .point_style img.in-view,
.locMapIcon11 .point_style img.in-view, .locMapIcon12 .point_style img.in-view, .locMapIcon13 .point_style img.in-view, .locMapIcon14 .point_style img.in-view,
.locMapIcon15 .point_style img.in-view, .locMapIcon16 .point_style img.in-view, .locMapIcon17 .point_style img.in-view     {
  opacity: 1;
  -moz-transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}


/* Location map legend. */
.mapLegendRow p {
	font-size: 14px;
	margin-bottom: 5px;
}
.mapLegendRow p span {
	font-size: 10px;
	font-weight: 500;
	width: 20px;
	height: 20px;
	display: inline-block;
	text-align: center;
	color: rgb(0, 84, 139); /* BLUE (Nav active). */
	background-color: rgb(255, 255, 255); /* WHITE. */
	border: 4px double rgb(0, 84, 139); /* BLUE (Nav active). */
	margin-right: 12px;
}
/* Change padding l;eft and right for column around each legend item to fit the text. */
.mapLegendRow .vc_col-sm-3 {
	padding-left: 7px;
	padding-right: 7px;
}

/* Mobile first. Location page four images in a row. Set up as two next to each other in a row. */
.fourImagesRow .vc_col-sm-3 {
	width: 50%;
	float: left;
}

/* INTERIORS. */
/* Tick panel Interiors. */
.interiorsTickRow p {
	font-size: 16px;
}


/* ARCHITECTURE. */
p.architectureLogos {
	margin-top: 4%;
	margin-bottom: 3%;
}


/* PLANS & VIEWS. */
/* The Table setup. */
/* Distance between tables. */
.supsystic-tables-wrap {
	margin-bottom: 1%;
}
/* The bottom border of the header row. Also the right border for all header table cells. */
.supsystic-tables-wrap table.dataTable thead th, .supsystic-tables-wraptable.dataTable thead td {
	border-bottom: 1px solid rgb(169, 169, 169); /* BUTTON HOVER GREY. */
	border-right: 1px solid rgb(169, 169, 169); /* BUTTON HOVER GREY. */
}
/* The right and bottom border of a body cell. */
.supsystic-tables-wrap table.dataTable.cell-border tbody th, .supsystic-tables-wrap table.dataTable.cell-border tbody td {
	border-right: 1px solid rgb(169, 169, 169); /* BUTTON HOVER GREY. */
	border-top: 1px solid rgb(169, 169, 169); /* BUTTON HOVER GREY. */
}
/* The first cell with border left inside the header. */
.supsystic-tables-wrap table.dataTable thead th:first-child, .supsystic-tables-wrap table.dataTable tfoot th:first-child {
	border-left: 1px solid rgb(169, 169, 169); /* BUTTON HOVER GREY. */
}
/* The left border of the first body cell. */
.supsystic-tables-wrap table.dataTable.cell-border tbody tr th:first-child, .supsystic-tables-wrap table.dataTable.cell-border tbody tr td:first-child {
	border-left: 1px solid rgb(169, 169, 169); /* BUTTON HOVER GREY. */
}
/* The bottom border of whole table. */
.supsystic-tables-wrap table.dataTable.no-footer {
	border-bottom: 1px solid rgb(169, 169, 169); /* BUTTON HOVER GREY. */
}

/* The font weight for the header rows. */
.supsystic-tables-wrap table.dataTable thead th, .supsystic-tables-wrap table.dataTable tfoot th {
	font-weight: 400;
}
/* The font size, text transform and colour of the header text. */
.supsystic-tables-wrap table th {
	font-size: 12px;
	text-transform: none;
	color: rgb(88, 89, 91) !important; /* GREY (Text). */
}
/* Overwrite the text colour for the first row with the level. */
.supsystic-tables-wrap table tr:first-child th {
	color: rgb(255, 255, 255) !important; /*WHITE. */
	font-weight: 500;
}
/* The font size, text transform and colour of the body text. */
.supsystic-tables-wrap table td {
	font-size: 12px;
	font-weight: 400;
	color: rgb(88, 89, 91) !important; /* GREY (Text). */
	vertical-align: middle;
}

/* Padding for header cells. */
.supsystic-tables-wrap table.dataTable thead th {
	padding: 8px 10px;
}
/* Padding for content/body cells. */
.supsystic-tables-wrap table.dataTable tbody td {
	padding: 3px 25px;
}
/* Small icons for download and view link with margin right. */
table.supsystic-table img {
	margin-right: 3px;
}

/* Links in the table to be dark and light blue accordingly. */
.supsystic-tables-wrap table.dataTable a, .supsystic-tables-wrap table.dataTable a:visited {
	color: rgb(0, 84, 139); /* BLUE (Nav active). */
}
.supsystic-tables-wrap table.dataTable a:hover, .supsystic-tables-wrap table.dataTable a:active, .supsystic-tables-wrap table.dataTable a:focus {
	color: rgb(0, 174, 239);/*  Middle Blue for header on Plans & Views. */
}

/* Mobile first: Last two columns with more padding right, due to the inserted small icon before - later change value for different sizes. */
.supsystic-tables-wrap table.dataTable tbody td:nth-child(8), .supsystic-tables-wrap table.dataTable tbody td:nth-child(9) {
	padding-right: 25px;
}

/* Empty data table not to display (Eighth Floor. */
.dataTables_empty {
	display: none;
}

/* ARCHITECTURE. */
/* Resize the double sized Iris logo (different size as footer). */
.developerText .iris {
	width: 55px;
}



/* CONSTRUCTION GALLERY. */
.mk-gallery-item:not(:first-child), 
.wpb_gallery_slides ul li:not(:first-child),
.constructionGallery .vc_grid-item.vc_clearfix.vc_col-sm-4.vc_visible-item:not(:first-child) {
	/* display: none; */
}


/* 404 PAGE. */
.not-found-title {
	font-size: 40px;
	color: rgb(88, 89, 91); /* GREY (Text). */
}
.not-found-subtitle {
	font-size: 80px;
	color: rgb(0, 84, 139); /* BLUE (Nav active). */
	font-weight: 500;
	line-height: 110%;
}
.textAndButton {
	font-size: 20px;
	color: rgb(88, 89, 91); /* GREY (Text). */
	line-height: 1.8em;
}


/* WEBCAM - New iFRame code 13.02.2018 */
.webcamImage p {
	margin-bottom: 0;
}


/* END PAGES.
====================================================================================================================== */


/* LIGHBOX/GALLERY IMAGES.
====================================================================================================================== */


/* END LIGHBOX/GALLERY IMAGES.
====================================================================================================================== */


/* FOOTER.
====================================================================================================================== */
/* Style the content inside the footer. */

/* Mobile first as taller image required for mobiles when content is stacked. */
/* Background for footer. */
#mk-footer {
	background-image: url(images/footer-bg-mobile.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}


/* Use Specificity. All footer widgets with less margin bottom. */
#mk-footer .widget.widget {
	margin-bottom: 20px;
}

/* Mobile first: Marina Edge logo inside footer. Later back to 100%. */
#mk-footer .marinaEdgeLogoFooter img {
	max-width: 80%;
}

/* Following styles for footer agents and also for agents inside POPUP added later. */
.pum-theme-187 .vc_col-sm-6 {
	padding-left: 0;
	padding-bottom: 20px;
}
.pum-theme-187 .agentDetailsPopup a, .pum-theme-187 .agentDetailsPopup a:visited {
	color: rgb(88, 89, 91); /* GREY (Text). */
}
.pum-theme-187 .agentDetailsPopup a:hover, .pum-theme-187 .agentDetailsPopup a:active, .pum-theme-187 .agentDetailsPopup a:focus {
	color: rgb(169, 169, 169); /* BUTTON HOVER GREY. */
}
/* Remove margin bottom for all p styled lines inside footer. */
#mk-footer p, .pum-theme-187 .agentDetailsPopup p {
	margin-bottom: 0;
}

/* The sales agent name. Alos the heading Display Open.  */
#mk-footer p.salesName, #mk-footer p.displayOpen, .pum-theme-187 .agentDetailsPopup p.salesName, .pum-theme-187 .agentDetailsPopup p.displayOpen {
	font-size: 18px !important;
	font-weight: 700; /* Bold. */
}

/* The sales company name. */
#mk-footer p.salesCompany,.pum-theme-187 .agentDetailsPopup p.salesCompany {
	font-size: 11px !important;
}

/* The phone number of the agents. */
#mk-footer p.salesNumber, .pum-theme-187 .agentDetailsPopup p.salesNumber {
	font-size: 30px !important;
	font-weight: 700; /* Bold. */
	line-height: 1em !important;
	letter-spacing: -1px;
	padding-top: 0.1em;
}

/* The email of the agents. */
#mk-footer p.salesEmail, .pum-theme-187 .agentDetailsPopup p.salesEmail {
	font-size: 12px !important;
	font-weight: 700; /* Bold. */
}

/* The opening hours. */
#mk-footer p.openingHours {
	font-size: 13px !important;
	font-weight: 700; /* Bold. */
}

/* The address. */
#mk-footer p.salesAddress {
	font-size: 12px !important;
	font-weight: 300; /* Light. */
}

/* Resize the double sized footer logos. */
#mk-footer .trg {
	width: 65px;
	height: 59px;
}
#mk-footer .translinq {
	width: 123px;
	height: 31px;
}

/* Buttons inside footer to have distance between each other and als set width four all four the same. */
#mk-footer .vc_btn3.vc_btn3-size-sm.vc_btn3-style-outline-custom {
	margin-bottom: 34px;
	width: 200px;
}

/* Back to top. Use Specificity to overwrite theme for smaller devices. */
.mk-go-top.mk-go-top {
	background-color: transparent;
	border-radius: 50%;
	border: 1px solid white;
	width: 30px; /* was 45px. */
	height: 30px;
	right: 49%; /* Same as later when it is active. */
	bottom: 1% !important;
}
/* Adjust arrow inside due to the size change. */
.mk-go-top.mk-go-top svg {
	width: 20px !important;
	height: 25px !important;
	font-size: 20px;
	top: 1px;
	left: 5px;
}
/* Link states. */
.mk-go-top:hover {
	background-color: rgba(88, 89, 91, 0.75); /* GREY (Text) 75% transparency */
}
/* Move it roughly in the center of the viewport. */
.mk-go-top.is-active.mk-go-top.is-active {
	right: 49%;
}


/* FOOTER.
====================================================================================================================== */


/* FORM - REGISTER YOUR INTEREST.
====================================================================================================================== */
/* The popup form. The popup itself is an id - not a class as the trigger. */

/* Mobile first: Padding 20px as per popup theme first -> later more to suit design. Background gradient. Overwrite whats set in the popup theme. */
.pum-theme-187 .pum-container {
	padding: 20px;
	background-color: rgb(247,247,248);
	background-image: url(images/popup-gradient-bg.jpg);
	background-repeat: no-repeat;
	background-position: center bottom;
}


/* The close button. */
.pum-theme-187 .pum-content + .pum-close {
	font-weight: 300;
}

/* Labels above input fields in black text. */
#contact_form0 label, #contact_form1 label, #contact_form2 label
{
	color: rgb(0, 0, 0); /* BLACK. */
	margin-top: 1em;
    margin-bottom: 0;
}

/* Mobile first: Set input filed width to 100% for mobiles and percentages later above main breakpoint. */
input[type="text"].nameField {
    width: 100%;
}
input[type="text"].phoneField {
    width: 100%;
}
input[type="email"].emailField {
    width: 100%;
}
input[type="text"].postcodeField {
    width: 100%;
}


/* Make input fields ??? wide. Remove border and box shadow from input fields (normal and focus). allow for bg colour transition on focus. 
Set colour to black and margin top for all states. */
input[type="text"], input[type="password"], input[type="date"],
input[type="datetime"], input[type="datetime-local"], input[type="month"],
input[type="week"], input[type="email"], input[type="number"], input[type="search"],
input[type="tel"], input[type="time"], input[type="url"], textarea
{
    font-size: 14px;
	font-weight: 300;
    background-color: rgb(255, 255, 255); /* WHITE. */
    
    /* border: 1px solid rgb(0, 0, 0); */ /* BLACK. */
    border-bottom: 1px solid rgb(255, 255, 255); /* WHITE. */
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    
    margin-top: 1em;
    margin-bottom: 0em;
    color: rgb(0, 0, 0); /* BLACK. */
    
    -webkit-transition: background-color 150ms ease-out;
	-moz-transition: background-color 150ms ease-out;
	transition: background-color 150ms ease-out;
}
input[type="text"]:focus, input[type="password"]:focus, input[type="date"]:focus,
input[type="datetime"]:focus, input[type="datetime-local"]:focus,
input[type="month"]:focus, input[type="week"]:focus, input[type="email"]:focus,
input[type="number"]:focus, input[type="search"]:focus, input[type="tel"]:focus,
input[type="time"]:focus, input[type="url"]:focus, textarea:focus
{
   	background-color: rgb(220, 220, 220) !important; /* LIGHTER GREY */
   	
   	/* border: 1px solid rgb(0, 0, 0); */ /* BLACK. */
   	border-bottom: 1px solid rgb(255, 255, 255); /* WHITE. */
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    
    margin-top: 1em;
    margin-bottom: 0em;
    color: rgb(0, 0, 0); /* BLACK. */
    
    background: rgb(255, 255, 255);
}
/* Some form elements are defined with padding left and right -> needs to be removed. */
input[type=email], input[type=password], input[type=search], input[type=tel], input[type=text], textarea {
	padding: 10px 0px 10px 12px;
	box-sizing: border-box;
}
/* Creates anchor for user in field (Standard Browsers). Also remove blue border around (FF etc). */
input:focus
{
	outline: none;
	border-width: 0px;
    -webkit-box-shadow: none;
    box-shadow: none;
}

/* Additional select filed added 25/07/2019. */
/* Style the select field with container around select field. */
.select-style {
    overflow: hidden;
    background-color: rgb(255, 255, 255); /* WHITE. */
    position: relative;
    margin-top: 1em;
    margin-bottom: 0em;
    margin-right: 4px; /* Indent as too long for whatever reason. */
}

.select-style:after
{
	top: 35%;
	left: 92%;
	border: solid transparent;
	content: " ";
	position: absolute;
	pointer-events: none;
	z-index: 100;
	background-image: url(images/black-dropdown-arrow.png);
	background-repeat: no-repeat;
	width: 20px;
	height: 20px;
}

/* Also for Contact page form. */
.select-style select {

	font-size: 14px;
	font-weight: 300;
    width: 100%;
    background-color: rgb(255, 255, 255); /* WHITE. */
    color: rgb(0, 0, 0); /* BLACK. */
    border-radius: 0;

    padding: 13px 8px 9px 8px;

    border: 1px solid #e3e3e3;
    border-bottom: 1px solid #e3e3e3;
    
    box-shadow: none;
    background-color: transparent;
    background-image: none;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}



/* Textarea 100%w wide. */
textarea {
	width: 100%;
}

/* Distance above required text and button. */
.submission
{
	margin-top: 1em;
	margin-bottom: 1em;
}

::-webkit-input-placeholder {
   color: rgb(0, 0, 0); /* BLACK. */ /* overwrite browser. */
   font-weight: 300;
}
:-moz-placeholder { /* Firefox 18- */
   color: rgb(0, 0, 0); /* BLACK. */ /* overwrite browser. */
   font-weight: 300;
}
::-moz-placeholder {  /* Firefox 19+ */
   color: rgb(0, 0, 0); /* BLACK. */ /* overwrite browser. */
   font-weight: 300;
}
:-ms-input-placeholder {  
   color: rgb(0, 0, 0); /* BLACK. */ /* overwrite browser. */
   font-weight: 300;
}

/* General defined with generic button. Set width to 100%. Here more details and changes. */
#contact_form1 .button, #contact_form2 .button {
	font-weight: 400;
	margin-top: 0;
	margin-bottom: 10px;
	margin-top: 20px;
	color: rgb(255, 255, 255); /* WHITE. */
	border: 1px solid rgb(88, 89, 91); /* GREY (Text). */
	
	background: rgb(0,65,105); /* Old browsers */
	background: -moz-linear-gradient(top, rgb(71,165,216) 0%, rgb(0,65,105) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgb(71,165,216) 0%,rgb(0,65,105) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgb(71,165,216) 0%,rgb(0,65,105) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#004169', endColorstr='#47a5d8',GradientType=0 ); /* IE6-9 */
}
#contact_form1 .button:hover, #contact_form1 .button:active, #contact_form1 .button:focus,
#contact_form2 .button:hover, #contact_form2 .button:active, #contact_form2 .button:focus {
	font-weight: 500;
}

/* Small text underneath form. */
.privacyText {
	font-size: 13px;
	font-weight: 300;
	color: rgb(0, 0, 0); /* BLACK. */
	line-height: normal;
	margin-top: 10px;
}

/* Sucess and error texts. */
.form-style .success
{
	background: transparent;
	padding: 5px 10px 5px 10px;
	margin: 5px 0px 15px 0px;
	border: none;
	color: rgb(0, 0, 0); /* BLACK. */
}
.form-style .error
{
	background: transparent;
	padding: 5px 10px 5px 10px;
	margin: 5px 0px 15px 0px;
	border: none;
	color: rgb(0, 0, 0); /* BLACK. */
}

/* Agent details with space below, when stacked. */
.pum-theme-187 .agentDetailsPopup {
	margin-bottom: 20px;
}


/* END FORM - REGISTER YOUR INTEREST.
====================================================================================================================== */




/* MEDIA QUERIES
====================================================================================================================== */
/* All above is mobile first. */
/* 
320px = 20em
480px = 30em
640px = 40em
768px = 48em
940px = 58.75em
960px = 60em
992px = 62em
1024px = 64em
1440px = 90em
1920px = 120em
*/

/* Main breakpoints for Jupiter theme seem to be at 767/768px and 991px/992px */
/* Navigation breakpoint set to 1023 in theme options, so 1024 is still showing full nav. */

/* Small screens: above 320px = 20em  (inclusive 320px). */
@media only screen and (min-width: 20em) { 
	/* ------------ GENERAL. ------------ */

	/* ------------ END GENERAL. ------------ */
	
	/* ------------ TYPOGRAPHY. ------------ */

	/* ------------ END TYPOGRAPHY. ------------ */
	
	/* ------------ HEADER. ------------ */

	/* ------------ END HEADER. ------------ */
	
	/* ------------ NAVIGATION. ------------ */

	/* ------------ END NAVIGATION. ------------ */
	
	/* ------------ HERO SLIDER & HERO IMAGES. ------------ */

	/* ------------ END HERO SLIDER & HERO IMAGES. ------------ */
	
	/* ------------ HOME. ------------ */

	/* ------------ END HOME. ------------ */
	
	/* ------------ PAGES. ------------ */

	/* ------------ END PAGES. ------------ */
	
	/* ------------ LIGHBOX/GALLERY IMAGES. ------------ */

	/* ------------ END LIGHBOX/GALLERY IMAGES. ------------ */
	
	/* ------------ FOOTER. ------------ */

	/* ------------ END FOOTER. ------------ */
	
	/* ------------ FORM - REGISTER YOUR INTEREST. ------------ */

	/* ------------ END FORM - REGISTER YOUR INTEREST. ------------ */
}

/* XSmall screens: above 320px = 20em (inclusive 320px). */
@media only screen and (min-width: 20em) { 

}

/* XSmall screens: above 480px = 30em (inclusive 480px). */
@media only screen and (min-width: 30em) { 

}

/* Medium screens: above 640px = 40em (inclusive 640px). */
@media only screen and (min-width: 40em) { 

}

/* XMedium screens: above 768px = 48em (inclusive 768px). */
@media only screen and (min-width: 48em) { 
	/* ------------ GENERAL. ------------ */
	/* WRAPPER. */
	/* Above 768px remove the 20px margin top and bottom on theme page wrapper (already zeroed for handheld below 768px). */
	#theme-page .theme-page-wrapper {
		margin: 0 auto;
	}
	
	/* COLUMNS. */
	/* Change padding for left and right columns. */
	.leftCol {
		padding-right: 35px;
	}
	.rightCol {
		padding-left: 35px;
	}
	
	/* BUTTONS. */
	/* Mobile first: Button on white align centered first -> later left aligned above main breakpoint. */
	.butOnWhite.vc_btn3-container.vc_btn3-left {
		text-align: left;
	}
	
	/* Mobile first. Some of the button son backgrounds will stack and therefor need margin bottom below breakpoint. -> now remove. */
	.butOnBackground.margBotMobile.vc_btn3-container {
		margin-bottom: 0px;
	}
	/* ------------ END GENERAL. ------------ */
	
	/* ------------ TYPOGRAPHY. ------------ */
	/* Mobile first: Text on slim panel as h3. Font size adjusted for different devices. */
	.master-holder .panelHeading h3 {
		font-size: 22px;
	}
	/* ------------ END TYPOGRAPHY. ------------ */
	
	/* ------------ HERO SLIDER & HERO IMAGES. ------------ */
	/* Mobile first: Hide the navigation buttons for mobile first. */
	.ls-v6 .ls-bottom-slidebuttons.ls-bottom-slidebuttons {
		display: inline-block !important;
	}
	/* ------------ END HERO SLIDER & HERO IMAGES. ------------ */
	
	/* ------------ PAGES. ------------ */
	/* PANELS. */
	/* Mobile first as taller image required for mobiles when buttons are stacked. */
	.darkPanel {
		background-image: url(images/dark-panel.jpg);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
		padding-top: 18px;
		padding-bottom: 18px;
	}
	.lightPanel {
		background-image: url(images/light-panel.jpg);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
		padding-top: 18px;
		padding-bottom: 18px;
	}
	
	/* Mobile first: Absolute positioned text with background. Also different padding for devices. */
	.absPosRow {
		padding-top: 13px;
		padding-bottom: 13px;
	}
	/* Mobile first: For some pages the transparent box with the button needs to sit on top instead of bottom. Also set height. */
	.absPosRow.topPos {
		height: 52px;
	}
	
	/* Location map legend. */
	/* In between sizes. Location page map legend as four columns in a row. Set up as two next to each other in a row. */
	.mapLegendRow .vc_col-sm-3 {
		width: 50%;
		float: left;
	}
	/* Distance between the column blocks. */
	.mapLegendRow .vc_col-sm-3.legendColumn {
		margin-bottom: 15px;
	}
	
	/* Mobile first. Location page four images in a row. Now set back to 4 in a row with 25% width each. */
	.fourImagesRow .vc_col-sm-3 {
		width: 25%;
	}
	
	/* ------------ END PAGES. ------------ */
	
	/* ------------ FOOTER. ------------ */
	/* The footer to still be one column with 100% width above 768px -> change to 25% a bit later. */
	.mk-col-1-4 {
		width: 100% !important;
	}
	/* ------------ END FOOTER. ------------ */
	
	/* ------------ FORM - REGISTER YOUR INTEREST. ------------ */
	/* Mobile first: Padding 20px as per popup theme first -> later more to suit design. */
	.pum-theme-187 .pum-container {
		padding: 25px 40px 40px 40px !important;
	}
	
	/* Mobile first: Set input filed width to 100% for mobiles and percentages later above main breakpoint. */
	input[type="text"].nameField {
		width: 50%;
	}
	input[type="text"].phoneField {
		width: 49%;
	}
	input[type="email"].emailField {
		width: 70%;
	}
	input[type="text"].postcodeField {
		width: 29%;
	}
		
	/* Agent details stacked to avoid wrapping. */
	.pum-theme-187 .agentDetailsPopup.vc_col-sm-4 {
		width: 100%;
	}

	/* ------------ END FORM - REGISTER YOUR INTEREST. ------------ */


}

/* Change footer breakpoint at 880, so style changes in here. */
@media only screen and (min-width: 55em) { 
	/* ------------ FOOTER. ------------ */
	/* Now change the footer from one column to be 4 columns (25% each). */
	.mk-col-1-4 {
		width: 25% !important;
	}
	
	/* Mobile first: Marina Edge logo inside footer. Back to 100%. */
	#mk-footer .marinaEdgeLogoFooter img {
		max-width: 100%;
	}
	
	/* Mobile first as taller image required for mobiles when content is stacked. */
	/* Background for footer. */
	#mk-footer {
		background-image: url(images/footer-bg.jpg);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
	}
	/* ------------ END FOOTER. ------------ */
}
/* Footer breakpoint at 880. Center all below that breakpoint - 879px. */
@media only screen and (max-width: 54.9375em) { 
	/* ------------ FOOTER. ------------ */
	#mk-footer .textwidget {
		text-align: center;
	}
	#mk-footer .wpb_single_image.vc_align_left {
		text-align: center;	
	}
	#mk-footer .widget_social_networks .align-left {
		text-align: center;	
	}
	#mk-footer .vc_btn3-container.vc_btn3-left {
		text-align: center;	
	}
	/* ------------ END FOOTER. ------------ */
}

/* Header logo between 768px and 1024. */
@media handheld, only screen and (min-width: 780px) and (max-width: 1023px) {
	/* ------------ HEADER. ------------ */
	/* Increase the maximum size of the logo to be a bit larger than below 780px - before it obviously gets replaced with larger non-mobile logo at 1024px. */
	.header-logo img {
		max-width: 230px !important;
	}
	/* ------------ END HEADER. ------------ */

}

/* Overwrite the page wrapper padding for handhelds. */
@media handheld, only screen and (max-width: 960px) {

}

/* 961up screens: above 961px = 60.0625em (inclusive 961px). */
@media only screen and (min-width: 60.0625em) { 
	/* ------------ PAGES. ------------ */
	/* PLANS & VIEWS. */
	/* Mobile first: Last two columns with more padding right, due to the inserted small icon before - later change value for different sizes. */
	.supsystic-tables-wrap table.dataTable tbody td:nth-child(8), .supsystic-tables-wrap table.dataTable tbody td:nth-child(9) {
		padding-right: 20px;
	}
		
	/* Agent details stacked to avoid wrapping. */
	.pum-theme-187 .agentDetailsPopup.vc_col-sm-4 {
		width: 33.33333333%;
	}
	
	/* ------------ END PAGES. ------------ */

}

/* XXMedium screens: above 992 = 62em (inclusive 992px). */
@media only screen and (min-width: 62em) { 
	/* ------------ PAGES. ------------ */
	/* PLANS & VIEWS. */
	/* Mobile first: Last two columns with more padding right, due to the inserted small icon before - later change value for different sizes. */
	.supsystic-tables-wrap table.dataTable tbody td:nth-child(8), .supsystic-tables-wrap table.dataTable tbody td:nth-child(9) {
		padding-right: 15px;
	}
	/* ------------ END PAGES. ------------ */
}


@media handheld, only screen and (max-width: 1023px) { 	
	/* ------------ BUTTON BAR. ------------ */
	.mk-header:not(.header-style-4) .mk-header-holder.mk-header-holder {
		position: fixed !important;
	}
	.buttonBar {	
		margin-top: 90px;
		height: 40px;
		position: fixed !important;
		z-index: 100000;
		width: 100% !important;
		left: 0px !important;
	}
	.vc_btn3-container.vc_btn3-center.buttonBarButton .vc_btn3-block.vc_btn3-size-sm {
		padding: 0;
		height: 40px;
		line-height: 40px;
		border: 0px solid white;
		transition: all 0.3s ease;
		
		font-size: 18px;
		font-weight: 300;
		
		color: rgb(255, 255, 255) !important; /* WHITE. */
		background: rgb(0,65,105); /* Old browsers */
		background: -moz-linear-gradient(top, rgb(71,165,216) 0%, rgb(0,65,105) 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top, rgb(71,165,216) 0%,rgb(0,65,105) 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom, rgb(71,165,216) 0%,rgb(0,65,105) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#004169', endColorstr='#47a5d8',GradientType=0 ); /* IE6-9 */
	}
	.vc_btn3-container.vc_btn3-center.buttonBarButton .vc_btn3-block.vc_btn3-size-sm:hover, .vc_btn3-container.vc_btn3-center.buttonBarButton .vc_btn3-block.vc_btn3-size-sm:active, .vc_btn3-container.vc_btn3-center.buttonBarButton .vc_btn3-block.vc_btn3-size-sm:focus {
		font-weight: 500;
	}
	.sliderHolder {
		margin-top: 130px;
	}
	.sliderHolder.webcam {
		margin-top: 90px;
	}
	/* ------------ END BUTTON BAR. ------------ */
	
	/* ------------ NAVIGATION. ------------ */
	/* Nav transparency below main breakpoint. */
	.mk-header-bg {
		background-color: rgba(255, 255, 255, 0.9) !important; /* WHITE WITH TRANSPARENCY. */
	}
	/* ------------ END NAVIGATION. ------------ */
}


/* Large screens: above 1024 = 64em (inclusive 1024px). */
@media only screen and (min-width: 64em) { 	
	/* ------------ TYPOGRAPHY. ------------ */
	/* Mobile first: Text on slim panel as h3. Font size adjusted for different devices. */
	.master-holder .panelHeading h3 {
		font-size: 24px;
	}
	/* ------------ END TYPOGRAPHY. ------------ */
	
	/* ------------ HEADER. ------------ */
	.mk-header .header-logo img {
		margin-top: 20px;
		transition: all 0.5s ease;
	}
	.mk-header.a-sticky .header-logo img {
		margin-top: 0px;
	}
	/* ------------ END HEADER. ------------ */
	
	/* ------------ NAVIGATION. ------------ */
	/* Use Specificity. Reduce padding of navigation items left and right, just for a bit -> set back to standard again in next size. */
	.main-navigation-ul.main-navigation-ul > li.menu-item > a.menu-item-link {
		padding-right: 15px !important;
		padding-left: 15px !important;
	}
	/* ------------ END NAVIGATION. ------------ */
	
	/* ------------ BUTTON BAR. ------------ */
	.buttonBar {
		display: none;
	}
	/* ------------ END BUTTON BAR. ------------ */
	
	/* ------------ PAGES. ------------ */
	/* PANELS. */
	/* Mobile first as taller image required for mobiles when buttons are stacked. */
	.darkPanel {
		padding-top: 23px;
		padding-bottom: 23px;
	}
	.lightPanel {
		padding-top: 23px;
		padding-bottom: 23px;
	}
	
	/* Mobile first: Absolute positioned text with background. Also different padding for devices. */
	.absPosRow {
		padding-top: 20px;
		padding-bottom: 20px;
	}
	/* Mobile first: For some pages the transparent box with the button needs to sit on top instead of bottom. Also set height. */
	.absPosRow.topPos {
		height: 66px;
	}
	
	/* Location map legend. */
	/* In between sizes. Location page map legend as four columns in a row. Now set back to 4 in a row with 25% width each. */
	.mapLegendRow .vc_col-sm-3 {
		width: 25%;
	}
	/* Remove distance between the column blocks. */
	.mapLegendRow .vc_col-sm-3.legendColumn {
		margin-bottom: 0px;
	}
	
	/* PLANS & VIEWS. */
	/* Mobile first: Last two columns with more padding right, due to the inserted small icon before - later change value for different sizes. */
	.supsystic-tables-wrap table.dataTable tbody td:nth-child(8), .supsystic-tables-wrap table.dataTable tbody td:nth-child(9) {
		padding-right: 10px;
	}

	/* ------------ END PAGES. ------------ */
	
	/* ------------ FORM - REGISTER YOUR INTEREST. ------------ */
	/* Make the percentage of width less when larger screen. */
	.pum-container.pum-responsive.pum-responsive-medium {
		margin-left: -45%;
		width: 90%;
	}
	/* ------------ END FORM - REGISTER YOUR INTEREST. ------------ */
	
}

/* BETWEEN screens: above 1081 = 73.8125em (inclusive 1081px). */
@media only screen and (min-width: 73.8125em) { 	

}

/* XLarge screens: above 1200 = 75em (inclusive 1200px). */
@media only screen and (min-width: 75em) { 	
	/* ------------ NAVIGATION. ------------ */
	/* Use Specificity. Reduce padding of navigation items left and right, just for a bit -> set back to standard again in next size. */
	.main-navigation-ul.main-navigation-ul > li.menu-item > a.menu-item-link {
		padding-right: 20px !important;
		padding-left: 20px !important;
	}
	/* ------------ END NAVIGATION. ------------ */
	
	/* ------------ FORM - REGISTER YOUR INTEREST. ------------ */
	/* Make the percentage of width less when larger screen. */
	.pum-container.pum-responsive.pum-responsive-medium {
		margin-left: -40%;
		width: 80%;
	}
	/* ------------ END FORM - REGISTER YOUR INTEREST. ------------ */
}

/* BETWEEN screens: above 1300 = 81.25em (inclusive 1300px). */
@media only screen and (min-width: 81.25em) { 	

}

/* XXLarge screens: above 1440 = 90em (inclusive 1440px). */
@media only screen and (min-width: 90em) { 	
	/* ------------ FORM - REGISTER YOUR INTEREST. ------------ */
	/* Make the percentage of width less when larger screen. */
	.pum-container.pum-responsive.pum-responsive-medium {
		margin-left: -30%;
		width: 60%;
	}
	/* ------------ END FORM - REGISTER YOUR INTEREST. ------------ */
}

/* Mega screens: above 1921 = 120.0625em (inclusive 1921px). */
@media only screen and (min-width: 120.0625em) { 	

}

/* MEDIA QUERIES FOR STANDARD DEVICES - PORTARIT AND LANDSCAPE. */
/* ----------- iPhone 4 and 4S ----------- */
/* Landscape and from iPhone 4 UP TO iPhone 6S+*/
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 736px) 
  and (orientation: landscape) { 

}

/* Landscape and iPhone 4 and 4S. */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

/* Landscape iPhone 5 and 5S */
@media only screen 
  and (min-device-width: 481px) 
  and (max-device-width: 568px)
  and (orientation: landscape) {

}

/* Landscape iPhone 6 */
@media only screen 
  and (min-device-width: 569px) 
  and (max-device-width: 667px) 
  and (orientation: landscape) { 

}

/* Landscape iPhone 6+*/
@media only screen 
  and (min-device-width: 668px) 
  and (max-device-width: 736px) 
  and (orientation: landscape) { 

}

/*END MEDIA QUERIES
====================================================================================================================== */