/* Extra small devices (phones, 600px and down) */
@media all and (max-width: 600px) and (orientation:landscape) {
#ContactBanner {
	line-height:5vh;
	.Email {a {font-size:4.5vh;}}
	.Phone, .Messenger {a {font-size:5vh;sup {font-size:3vh;}}}
}
#Menu > .Button, #Menu > .Button > .Sub > .Button, #Menu > .Button > .Service > .Button {line-height:6.0vh;min-width:25vw;padding:1vh 0.1vw 1vh 1vw;a {font-size:5.5vh;img {height:5.5vh;vertical-align:middle;padding:0 0.1vw 0vh 0;}}}
#Menu > .Button:hover > .Sub {position:absolute;display:block;}
#Menu > .Button:hover > .Service {position:absolute;display:block;}
#Menu > .Button > .Service > .Button:hover {.Block { position:absolute;display:inline-block;height:fit-content;}}
#Name {font-size:6vh;}
#Tag1 {font-size:5vh;}
#Tag2 {font-size:4vh;a {img {vertical-align:middle;height:3.5vh;width:2.7vw;padding:0 0.2vw 0.2vh 0;}}}
.LogoLeft, .LogoRight {a {img {height:17vh;width:13vw;}}}
.Block {
	margin-left:2vw;
	width:30vw;
	.Title {line-height:4vh;font-size:3vh;}
	.TagLine {line-height:2.9vh;font-size:2.9vh;}
	.Desc {line-height:2.8vh;font-size:2.8vh;}
	}
}
@media all and (max-width: 600px) and (orientation:portrait) {
#ContactBanner {line-height:3.0vh;.Email {a {font-size:1.5vh;}}.Phone, .Messenger {a {font-size:2vh;sup {font-size:1vh;}}}}
#Menu > .Button {line-height:4.0vh;width:32%;a {font-size:2.1vh;img {height:2.1vh;vertical-align:middle;}}}
#Menu > .Button > .Service > .Button {position:relative;line-height:4.0vh;a {font-size:2.1vh;img {height:2.1vh;vertical-align:middle;}}}
#Menu > .Button:hover > .Sub {position:absolute;display:block;width:32%;}
#Menu > .Button:hover > .Service {position:absolute;display:block;}
#Menu > .Button > .Service > .Button:hover {.Block { position:absolute;display:inline-block;height:fit-content;}}
#Menu > .Button > .Sub > .Button:hover {.Sub { position:absolute;display:inline-block;right:1vw;}}
#Name {font-size:3.5vh;}
#Tag1 {font-size:2.5vh;}
#Tag2 {font-size:2.0vh;a {img {vertical-align:middle;height:1.5vh;width:1.5vw;padding:0 0.2vw 0.6vh 0;}}}
.LogoLeft, .LogoRight {a {img {height:13vh;width:13vw;}}}
.Block {
	margin-left:0;
	width:45vw;
	.Title {line-height:3.5vh;font-size:2.5vh;}
	.TagLine {line-height:2.4vh;font-size:2.4vh;}
	.Desc {line-height:2.3vh;font-size:2.3vh;}
	}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media all and (min-width: 600px) {
#ContactBanner {
	line-height:3vh;
	.Email {a {font-size:3vh;}}
	.Phone, .Messenger {a {font-size:3vh;sup {font-size:1.5vh;}}}
}
#Menu > .Button, #Menu > .Button > .Sub > .Button, #Menu > .Button > .Service > .Button {line-height:3.5vh;min-width:25vw;a {font-size:3vh;img {height:3vh;vertical-align:middle;}}}
#Menu > .Button:hover > .Sub {position:absolute;display:block;}
#Menu > .Button:hover > .Service {position:absolute;display:block;}
#Menu > .Button > .Service > .Button:hover {.Block { position:absolute;display:inline-block;height:fit-content;}}
#Name {font-size:6vh;}
#Tag1 {font-size:5vh;}
#Tag2 {font-size:3.5vh;a {img {vertical-align:middle;height:3.5vh;width:2.7vw;padding:0 0.2vw 0vh 0;}}}
.LogoLeft, .LogoRight {a {img {height:13vh;width:9vw;}}}
.Block {
	margin-left:2vw;
	width:30vw;
	.Title {line-height:4vh;font-size:3vh;}
	.TagLine {line-height:2.9vh;font-size:2.9vh;}
	.Desc {line-height:2.8vh;font-size:2.8vh;}
	}
}

/* Medium devices (landscape tablets, 768px and up) */
@media all and (min-width: 768px) {}

/* Large devices (laptops/desktops, 992px and up) */
@media all and (min-width: 992px) {}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media all and (min-width: 1200px) {}

/* Banner */
.Banner {width:100%;}
.CompanyInfo > table {width:100%;}
.CompanyInfo {width:80%;}
.Contact {height:2vh;}
.Email, .Phone, .Messenger {text-align:center;}
.InnerBanner {width:100%;}
.LogoLeft, .LogoRight {width:10%;}
.LogoLeft {padding-left:1vw;}
.LogoRight {padding-right:1vw;}
#ContactBanner {
	border:0;
	margin:0;
	padding:0;
	background-color:red;
	color:white;
	font-weight:bold;
	a {color:white;}
	a:hover, a:focus {color:yellow;}
	.ContactInfo {width:33%;}
}
#Name {
	margin:0;
	padding:0;
	color:#ff0000;
	text-align:center;
	a {color:#ff0000;}
	a:link {text-decoration: none;}
}
#Tag1 {
	margin:0;
	padding:0;
	color:blue;
	text-align:center;
	a {color:blue;text-decoration:none;}
	a:hover {color:black;}
}
#Tag2 {
	margin:0;
	padding:0;
	color:blue;
	text-align:center;
	a {color:black;}
	a:hover {color:blue;}
}
/* Menu */
#Menu {
	width:100%;
	background-color: rgba(0,0,0,0);
	z-index:4;
	text-align:center;
}
.Block {
	z-index:4;
	display:none;
	text-align:left;
	vertical-align:top;
	background-color:white;	
	border:3px solid black;
	.Emoji {display:inline;}
	.Title {
		display:inline-block;
		top:0;
		a {line-height:1vh;padding:0;margin:0;}
		text-decoration:underline;
		color:blue;
	}
	.TagLine {
		display:block;
		vertical-align:top;
		font-weight:bold;
		color:black;
	}
	.Desc {
		display:block;
		font-weight:normal;
		color:black;
	}
}
/* Buttons */
#Menu .Button {
font-weight:500;
text-decoration:none;
vertical-align:middle;
a { 
	vertical-align:middle;
	display:inline-block; /* have anchor fill button */
	width:100%;
	height:100%;
	color: #FFFFFF;
	text-decoration:none;
}
text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
border-color:#3A4C7D;
border-width: 0px 0px 1px 0px;
border-style: solid;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
background-color: #a90329;
background-image: -webkit-gradient(linear, left top, left bottom, from(#a90329), to(#6d0019));
background-image: -webkit-linear-gradient(top, #a90329, #6d0019);
background-image: -moz-linear-gradient(top, #a90329, #6d0019);
background-image: -ms-linear-gradient(top, #a90329, #6d0019);
background-image: -o-linear-gradient(top, #a90329, #6d0019);
background-image: linear-gradient(to bottom, #a90329, #6d0019);
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#a90329, endColorstr=#6d0019);
}
/* Button Hover Format */
#Menu .Button:hover,
#Menu .Button > a:hover,
#Menu .Button > a:focus {
font-weight:900;
border-color:#3A4C7D;
border-width: 0px 1px 1px 0px;
border-style: solid;
background-color: #77021d; 
background-image: -webkit-gradient(linear, left top, left bottom, from(#77021d), to(#3a000d));
background-image: -webkit-linear-gradient(top, #77021d, #3a000d);
background-image: -moz-linear-gradient(top, #77021d, #3a000d);
background-image: -ms-linear-gradient(top, #77021d, #3a000d);
background-image: -o-linear-gradient(top, #77021d, #3a000d);
background-image: linear-gradient(to bottom, #77021d, #3a000d);
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#77021d, endColorstr=#3a000d);
}
/* Main Menu */
#Menu .Inline {display:inline-block;}
/* Sub levels */
#Menu .Sub, #Menu .Service {z-index:3;display:none;} /* Hide Sub Menus */
/* Background image */
.container .container-background {
	background:url("/graphics/banner.jpg");
    opacity: 0.15;
}
.container .InnerBanner {
    position: relative;
    z-index: 1;
}