﻿

/*
	background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
*/
html {
	/*
		background: url(background_pattern2x_1.png) top center / cover no-repeat, linear-gradient(#ffffff, #e3f1fd 5%, #f3f9fe 20%);
		background: url(/css/background_pattern2x_1.png) top center / cover no-repeat, linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
	background: url(background_pattern2x_1.png) top center / cover no-repeat, linear-gradient(#ffffff, #e3f1fd 5%, #f3f9fe 10%);
	
	background: url(vaughan-road-toronto-map.jpg) top center / cover no-repeat, linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
		*/
}
body {
	min-height: 100%;
	background-color: rgb(80, 80, 80);
	/*
	background-color: rgba(255, 255, 255, .7) !important;
	
	background-position: top center;
	background-repeat: repeat;
	background-size: auto;
	background-color: rgba(255, 255, 255, 0.1);
		
	background-color: rgba(255, 255, 255, 0.5) !important;
	*/
}

.main {
	position: relative;
	min-height: calc(100vh - 46px);
}


.bg-video {
	width: 100vw;
	height: 100vh;
	object-fit: cover;
	position: fixed;
	top: 0;
	z-index: -1;
}

	.bg-video.bg-absolute {
		position: absolute;
		top: -47px;
		height: calc(100vh + 47px);
	}


.fa-shadow {
	text-shadow: 8px 6px 6px rgba(128,128,128,.45);
}

.bg-translucent-dark {
	background-color: rgba(var(--bs-tertiary-bg-rgb), .8) !important;
}

.info-footer {
	width: 100%;
	background-color: rgba(var(--bs-tertiary-bg-rgb), .8) !important;
}

.info-box .card img {
	height: 150px;
	object-fit: cover;
}

.card-hover:hover {
	/*box-shadow: 10px 5px 5px grey;*/
	transform: scale(1.04);
	transition: .4s;
}

.copyright {
	font-size: 0.7em;
	color: white;
}

.btn-bottom {
	position: absolute;
	bottom: 30px;
}

.Xxfade-init {
	visibility: hidden;
}

.Xxfade {
	visibility: visible;
	animation-delay: 2000ms;
	animation-name: fadeInUp;
	-webkit-animation-name: fadeInUp;
}


.xfade-init {
	opacity: 0;
}

.xfade {
	opacity: 1;
	transition: opacity 1s;
}


#top-nav .nav-item{
	padding-right:10px;
}
.cp-logo {
	display: inline;
}

.li-extra {
	font-size: 100%;
	padding-inline-start: 20px;
}
.li-extra ul {
	list-style-type: none;
}
.li-extra li {
	margin-top: 5px;
	position: relative;
}

.li-extra .bullet{
	position:absolute;
	left:-22px;
	top:5px;
}

.card-title{
	padding-bottom:15px;
}

.big-icon {
	font-size: 320px;
	color: #33f;
}

.info-row {
	margin-bottom: 140px;
	font-size: 100%;
}

.info-icon{
	padding-bottom:40px;
}

.info-card {
	padding: 40px;
}

.hero-row {
	position: relative;
	top: -8px;
}

.bg-contrast {
	background-color: rgba(0, 0, 0, 0.3);
	color: #fff;
}

.card-img-top {
	position: relative;
	/*top: -25px;*/
}

#hero-text {
	position: relative;
	top: -45px;
}

#vid-control {
	position: fixed;
	top: 60px;
	right: 20px;
	cursor: pointer;
	z-index: 100;
}


#text-ctlrs {
	position: fixed;
	top: 60px;
	left: 20px;
	z-index: 100;
}

#text-ctlrs div{
	cursor: pointer;
}
#text-ctlrs div:hover {
	color:firebrick !important;
}

@media (min-width: 768px) {
	.info-row {
		padding-bottom: 60px;
		font-size: 120%;
	}
	/*only show menu on home*/
	.product-menu-top:hover .product-menu {
		display: block;
	}
}

@media (max-width: 767.98px) {
	.shadow {
		box-shadow: none !important;
	}

}

.bgimg-1-light {
	background-image: url('/images/mailbox-web.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
}

.bgimg-2-light {
	background-image: url('/images/street-web.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	min-height: 400px;
}

.bgimg-3-light {
	background-image: url('/images/mailbox-2-web.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	min-height: 400px;
}

.bgimg-4-light {
	background-image: url('/images/mailbox-3-web.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	min-height: 400px;
}

.bgimg-5-light {
	background-image: url('/images/mailbox-4-web.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	min-height: 400px;
}
