@charset "utf-8";
/* CSS Document */

/* ----- Global Styles ----- */
/* Styles the floating contact button */
.float-btn {
	position: fixed;
	width: 60px;
	height: 60px;
	bottom: 40px;
	right: 40px;
	background-color: #FF4444;
	color: #FFFFFF;
	border-radius: 50px;
	text-align: center;
	transition: all 0.6s ease-in-out;
	box-shadow: 3px 3px 5px black; 
}

/* Sets floating button to get larger when hovered over */
.float-btn:hover {
	transform: scale(1.4);
	color: #FFFFFF;
}

/* Sets sizing and position of phone icon within floating button */
.float-icon {
	margin-top: 15px;
	font-size: 1.8em;
}



/* ----- Rent & Buy Page ----- */
/* ----- Sets up transition for card images on the rent and buy pages ----- */
a .property-img {
	max-width: 100%;
	-moz-transition: all 0.3s;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

/* Sets scale to 1.1 on hover for card images on the rent and buy pages*/
a:hover .property-img {
	-moz-transform: scale(1.1);
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}



/* ----- Contact Page ----- */
/* Narrows the forms on larger screens */
.responsive-form {
	margin-left: 20%;
	margin-right: 20%;
}



/* ----- Services Page ----- */
/* Styles the range slider - height colour, opacity and transition */
.slider {
	-webkit-appearance: none;
	height: 25px;
	border-radius: 3px;
	background-color: #D9D9D9;
	outline: none;
	opacity: 0.8;
	-webkit-transition: .2s;
	transition: opacity .2s;
}

/* Removes range slider's opacity on hover */
.slider:hover {
	opacity: 1;
}

/* Styles the slidable part of range slider - width, height, colour, custom mouse pointer */
.slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 10px;
	height: 25px;
	border-radius: 5px;
	background: #DC3545;
	cursor: pointer;
}

/* Styles the slidable part of range slider - width, height, colour, custom mouse pointer */
.slider::-moz-range-thumb {
	width: 10px;
	height: 25px;
	border-radius: 5px;
	background: #DC3545;
	cursor: pointer;
}



/* ----- Example Property Page ----- */
/* Make embedded iframe responsive - set positioning/padding of video container */
.prop-video {
	position: relative;
	padding-bottom: 56.25%; /* Maintains 16:9 aspect ratio */
	padding-top: 25px;
	height: 0;
}

/* Removes margins and padding from the iframe and sets h/w to 100% of parent container*/
.prop-video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Sets sizing of map */
#map {
	height: 300px;;
}



/* ----- MEDIA QUERY <=1199px ----- */
@media only screen and (max-width: 1199px) {
	/* ----- Contact Page ----- */
	/* Makes contact form wider*/
	.responsive-form {
		margin-left: 0;
		margin-right: 0;
	}
}
	

	
/* ----- MEDIA QUERY <=767px ----- */
@media only screen and (max-width: 767px) {
	/* ----- Global Styles ----- */
	/* Hides floating button */
	.float-btn {
		display: none;
	}
	
	
	
	/* ----- Index & Services Page */
	/* Reverses flex direction to place img above text */
	.reversible-content {
		flex-direction: column-reverse;
	}
}