/*
Theme Name: DealerPro.io
Theme URI: https://dealerpro.io/
Machine Name: dealerpro
Author: DealerPro.io
Author URI: https://dealerpro.io/
Description: Front-end theme for DealerPro.io, powered by Aduvio.
Version: 1.1
*/

/*
	DealerPro theme - base typography

	Titles default to Montserrat and body copy to Roboto. These are only the theme
	defaults: the fonts picked in Aduvio > Front-end settings > Typography are printed
	after this file (php/includes/css-from-settings.php) and override everything here.
*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

body {
	font-family: "Roboto", sans-serif;
}

/* All titles - the headings plus the title elements that are not headings */
h1,
h2,
h3,
h4,
h5,
h6,
.home-hero-title,
.home-hero-subtitle,
.site-footer-title,
.blog-post-title,
.blog-post-sub-title,
.result-title,
.form-section-title,
.panel-title,
.modal-title {
	font-family: "Montserrat", sans-serif;
}


/*
	Theme default for the main colour. The colour picked in Aduvio > Front-end settings
	> Main theme color is printed after this file (php/includes/css-from-settings.php) with
	!important, so this only applies when no colour is set there.
*/

.primary-bg {
	background-color: #2196f3;
}


#loi-25-overlay {
    position: fixed; /* Sit on top of the page content */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5); /* Black background with opacity */
    z-index: 9999; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */
}


/*Dark Google map
The maps.google.com embed accepts no styles parameter, so the dark theme is produced by
inverting the tiles and rotating the hue back to true colours. Set on the map container by
the page that owns it (Home Page and Contact Page > Map Style in the website settings)*/

.map-dark {
    background: #1b1f24;
}

.map-dark iframe {
    filter: invert(92%) hue-rotate(180deg) brightness(0.92) contrast(1.05) saturate(0.75);
    -webkit-filter: invert(92%) hue-rotate(180deg) brightness(0.92) contrast(1.05) saturate(0.75);
}


/*Header: the menu button stays on until the desktop layout.

Bootstrap 3 lays the navbar out horizontally from 768px up, which is exactly the width of a tablet
held upright. The row it has to fit on there is the site menu, plus Sign Up / Login or My Account /
Logout, plus the phone, e-mail and social icons and the language switcher - so it wrapped onto a
second and often a third line. The navbar is fixed to the top of the page and .content clears it
with a flat 50px of padding, so every line it wrapped onto was a line of the page hidden behind it.

Below 992px the whole lot goes back behind the menu button instead. Bootstrap's own collapsed
styles only reach to 767px, so the parts of them that matter above that are repeated here.*/

@media (max-width: 991px) {

	.navbar-header {
		float: none;
	}

	.navbar-toggle {
		display: block;
	}

	.navbar-fixed-top {
		top: 0;
		border-width: 0px 0px 1px;
	}

	.navbar-collapse {
		border-top: 1px solid rgba(0,0,0,.1);
		box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
	}

	.navbar-fixed-top .navbar-collapse {
		max-height: 340px;
		overflow-y: auto;
	}

	.navbar-collapse.collapse {
		display: none !important;
	}

	.navbar-collapse.collapse.in {
		display: block !important;
	}

	.navbar-nav,
	.navbar-left,
	.navbar-right {
		float: none !important;
	}

	.navbar-nav {
		margin: 7.5px -15px;
	}

	.navbar-nav > li {
		float: none;
	}

	.navbar-nav > li > a {
		padding-top: 10px;
		padding-bottom: 10px;
		padding-left: 15px;
		padding-right: 15px;
	}

	/*Sub menus open in place rather than as a panel floating over the page*/
	.navbar-nav .open .dropdown-menu {
		position: static;
		float: none;
		width: auto;
		margin-top: 0px;
		background-color: transparent;
		border: 0px;
		box-shadow: none;
	}

	.navbar-nav .open .dropdown-menu > li > a {
		padding: 5px 15px 5px 25px;
		line-height: 20px;
		color: #9d9d9d;
	}

	.navbar-nav .open .dropdown-menu > li > a:hover,
	.navbar-nav .open .dropdown-menu > li > a:focus {
		color: #fff;
		background-image: none;
		background-color: transparent;
	}

	/*The row of contact and social icons is a single li, and the icons inside it are floated -
	  on its own line in the open menu it needs to close over them*/
	#header-nav-right > li {
		margin-right: 0px !important;
		padding-left: 15px;
		padding-right: 15px;
		overflow: hidden;
	}

	#header-language-select {
		width: auto;
		max-width: 100%;
		margin-top: 5px;
		margin-left: 15px;
		margin-bottom: 10px;
	}
}