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


*{
	margin: 0;
	padding: 0;	
}
@font-face {
    font-family: Ubuntu-B;
 	src: url('Ubuntu-B.ttf');
	
	font-weight: normal;
	font-style: normal;
}
@font-face {
    font-family: Ubuntu-M;
 	src: url('Ubuntu-M.ttf');
	font-weight: normal;
	font-style: normal;
}
@font-face {
    font-family: Ubuntu-R;
 	src: url('Ubuntu-R.ttf');
	font-weight: normal;
	font-style: normal;
}
::selection
{
	background:#758fc8;
	color: #fff;
}
::-moz-selection
{
	background:#758fc8;
	color: #fff;
} 

body{
	overflow-x: hidden;
	background: #000;
	color: #fff;
	font-family: Ubuntu-R;
	font-size: 15px;
	height: 100%;
	background: #000 /* url(../images/background1.jpg) no-repeat */;
}
h1{
	color: #758fc8;
	font-size: 26px;
	font-family: Ubuntu-B;	
	font-weight: normal;
	margin-bottom: 20px;
}
h3{
	color: #000;
	font-size: 20px;
	font-family: Ubuntu-B;	
	font-weight: normal;
	margin-bottom: 20px;
	line-height: 22px;
}
p{
	margin-bottom: 20px;	
}
.wrapper{
	width: 1940px;
	float: left;
	
}


/* main right col */
.main{
	width: 440px;
	float: left;	
}
.main-top{
	width: 440px;
	float: left;	
}
.logo{
	float: left;
	margin-left: 26px;	
}
.emerg{
	background: url("../images/blue_rectangle_emerg.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    float: left;
    font-size: 12px;
    height: 36px;
    margin-left: 10px;
    padding: 7px 10px;
    width: 110px;
    display: none;
}
.emerg span{
    font-size: 17px;
}
.mail{
	width: 57px;
	height: 50px;
	background: url(../images/Icon_mail.png);
	float: left;
	margin-left: 30px;
}
.mail:hover{
	background: url(../images/Icon_mail_over.png);
}
.quotes{
	padding: 30px 0;
}
.quote-text{
	height: 170px;	
}
.main h1{
	font-size: 30px;
	font-family: Ubuntu-R;	
	font-weight: normal;
}
.main .text{
	padding: 80px;	
}
#quote2, #quote3{
	display: none;	
}
.quote-dot{
	color: #758fc8;
	text-decoration: none;	
	font-size: 40px;
	margin-right: 5px;
}
#menu, #drop-menu {
	display:none;
}
.contact{
	font-size: 18px;
}
.contact p{
	line-height: 150%;
	color: #fff;
}
.phone{
	color: #fff;	
}
a[href^=tel]{
    color:#fff;
    text-decoration:none;
}
.contact h2{
	font-size: 18px;
	font-family: Ubuntu-B;	
	font-weight: normal;
	color:	#758fc8;
}
.contact a.email{
	color: #fff;
	text-decoration: none;
	font-size: 16px;
}
.contact a.email:hover{
	color:	#758fc8;
}
.seperator{
	width: 25px;
	height: 5px;
	background:	#758fc8;
	margin: 10px 0;
}
#open-address{
	width: 26px;
	height: 26px;
	background: url(../images/plus.png) no-repeat;
	cursor: pointer;
	margin: 13px 0;	
	z-index: 100000;
	position: relative;

}
#address{
	font-size: 16px;
	/* display: none; */
}
/* cols */
.cols{
	position: absolute;
	height: 100%;
	left: 440px;
	width: 100%;
	/* overflow-x: hidden;	*/
}
.col{
	width: 450px;
	margin-right: 25px;
	float: left;

	height: 100%;
	overflow-y: hidden;	
	
}
.col-hover{
	overflow-y: scroll;	
	background: #3b4050;
}
.col .scrollbar-handle{
	display: none;
	-webkit-transition: display 300ms;
    -moz-transition: display 300ms;
    -o-transition: display 300ms;
    transition: display 300ms;	
}
.col:hover .scrollbar-handle{
	display: block;
}
.col .scrollbar-path-vertical{
	background: none;
	-webkit-transition: background 300ms;
    -moz-transition: background 300ms;
    -o-transition: background 300ms;
    transition: background 300ms;	
}
.col:hover .scrollbar-path-vertical{
	background: #7790c6;
}
.col .down-arrows{
	float: right;
	right: 30px;
	top: 45px;
	border: 0;
	width: 5%;
	display: none;
	
	-webkit-transition: display 300ms;
    -moz-transition: display 300ms;
    -o-transition: display 300ms;
    transition: display 300ms;	
}
.col:hover .down-arrows{
	display: block;
}
.col h1{
	line-height: 120%;	
	font-family: Ubuntu-M;
	color: #fff;
}
/* scrollbars and col hover */
#move-it{
	position: absolute;
	height: 100%;
	width: 3190px;	
	left: 0;
}

.text{
	padding: 30px;	
	background: rgba(93, 112, 158, .7);
		-webkit-transition: background 300ms;
    -moz-transition: background 300ms;
    -o-transition: background 300ms;
    transition: background 300ms;	
}
.text:hover{
	background: rgba(93, 112, 158, 1);
}
.first-text, .first-text:hover{
	background: none;
}
.text-intro{
	height: 360px;
}
.open-more{
	width: 26px;
	height: 26px;
	background: url(../images/plus.png) no-repeat;
	cursor: pointer;
	margin: 13px 0;	
	position: relative;
	display: block;
}
.close-text{
	width: 26px;
	height: 26px;
	background: url(../images/minus.png) no-repeat;
}
.more{
	display: none;
}
.gallery .text{
	height: auto;
}
.cols .icon{
	margin-bottom: 20px;	
	border: 0;
}
.cols .text{
	line-height: 130%;	
}
.cols img{
	margin-bottom: 25px;
}

#about .text-intro{

	height: 412px;

}
/*
.plumbing img{
	border-top: 12px solid #733880;
}
.heating img{
	border-top: 12px solid #d83320;
}
.backflow img{
	border-top: 12px solid #32bebc;
}
.gas img{
	border-top: 12px solid #87c440;
}
.about img{
	border-top: 12px solid #758ec8;
}
.gallery img{
	border-top: 12px solid #c74d17;
}
*/



/* arrow */
.left-arrow{
	width: 52px;
	height: 52px;
	background: url(../images/arrow-left.png);	
	position: fixed;
	top: 50%;
	left: 15px;
	cursor: pointer;
	margin-top: -26px;
	z-index: 1000;
	-webkit-transition: background-color 2s ease-out;
  -moz-transition: background-color 2s ease-out;
  -o-transition: background-color 2s ease-out;
  transition: background-color 2s ease-out;
}

.right-arrow{
	width: 52px;
	height: 52px;
	background: url(../images/arrow-right.png);
	position: fixed;	
	top: 50%;
	right: 15px;
	z-index: 103;
	cursor: pointer;
	margin-top: -26px;
	z-index: 1000;
	-webkit-transition: background-color 2s ease-out;
  -moz-transition: background-color 2s ease-out;
  -o-transition: background-color 2s ease-out;
  transition: background-color 2s ease-out;
}

.legal{
	position: absolute;
	bottom: 10px;
	/* left: 30px; */
	left: -350px;
	font-size: 12px;
	color:#758fc8;
	z-index: 100000;
}

/* logos bottom */
.logos{
	position: absolute;
	bottom: 0px;
	left: 0px;
	z-index: 1001;
	width: 1500px;
}
.logos img{
	margin-right: 110px;
}
.logos img.safety-logo {
    position: relative;
    top: 10px;
}

.black-fade{
position: fixed;
bottom: 0px;
left: 0px;
background: url(../images/black_gradient_bottom.png);
background-size: 2037px 124px;
width: 2039px;
height: 124px;
z-index: 1000;
}

/* background */
#background-slideshow{
	position: absolute;
	z-index: -1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;	
}
#bg2, #bg3{
	/* display: none; */	
}
#bg1, #bg2, #bg3{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

.cols .fancybox-caption{
		color: #fff !important;
		font-family: Ubuntu-R !important;
		font-size: 16px !important;
}

/* Preloader */

#preloader {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#000; /* change if the mask should have another color then white */
    z-index:99; /* makes sure it stays on top */
	width: 100%;
	height: 100%;
}

#status {
    width:200px;
    height:200px;
    position:absolute;
    left:50%; /* centers the loading animation horizontally one the screen */
    top:50%; /* centers the loading animation vertically one the screen */
    background-image:url(../images/status.gif); /* path to your loading animation */
    background-repeat:no-repeat;
    background-position:center;
    margin:-100px 0 0 -100px; /* is width and height divided by two */
}

.mobile-footer{
	display: none;	
}

@media screen and (max-width: 700px) {
	
	
#move-it, .wrapper, .main, .col, .main-top{
	width: 100%;
	float: none;
	position:  static;	
}

#drop-menu {
	display:block;
	position: fixed;
	height: 50px;
	right: 10px;
	top: 10px;
	cursor:pointer;
	z-index: 1000001;
}
#menu{
	display:none;
	position: fixed;
	top: 0px;
	padding-top: 55px;
	width: 100%;
	background: #3b4050;
	z-index: 1000000;
	height: 100%;
}
#menu a{
	color: #fff;
	text-decoration: none;
	padding: 15px 15px;
	display: block;
}
#menu a:hover{
	color: #fff;
	background: #758fc8;
}


.logo {
    margin-left: 0;
}


.cols{
	position:  static;
	background: #000;
}
.cols img{
	width: 100%;
}
.cols img.icon{
	width: auto;
}
.col:hover{
	background: #000000;
	
}
.col-hover{
	background: #000000;
}
.col .down-arrows{
	display: none;
	
}	

.left-arrow. .right-arrow{
	display: none;	
}

.emerg, .mail{
	display: none;	
}
.main .text {
    padding: 30px;
}
.main h1{
	font-size: 22px;	
}
.quote-text {
    height: 100px;
    margin-top: 30px;
}

.text{
	height: auto;	
}


.black-fade{
	display: none;	
}

.legal{
	position: static;
	display: none;
}
#background-slideshow-holder{
	width: 100%;
		
}
#background-slideshow{
	overflow: hidden;
}
#background-slideshow img{
	object-fit: cover;	
	display: none;
}
.logos{
	display: none;	
}

.mobile-footer{
	display: block;	
	font-size: 12px;
	color:#758fc8;
	padding: 20px 30px 10px 30px;

}


}


@import url("seancb.com/clients/jjm.css");