/* 
Emmanuel Construction Styles 11-30-15
Designer: Alison Caron Design
Designer URL: http://www.alisoncaron.com
Developer: Sarah Cushing
Developer URL: http://www.sarahcushing.com
*/

/* 
Colors
Dark Green 006e51
Light Green 006e51  13%
Blue 1f3d7b
*/

/* Fonts */
@import url(https://fonts.googleapis.com/css?family=Balthazar|Open+Sans:400,700|Open+Sans+Condensed:700);

/* General Layout */
html, body{margin: 0; padding: 0;}
body{font: normal normal normal 18px/26px "Open Sans", sans-serif; color: #000;}
#topbar{background: #1f3d7b; height: 8px;}

header, #hero, #content{max-width: 1024px; margin: 0 auto; box-sizing: border-box;}
header, #content{padding: 0 30px;}

#content{margin-top: 60px;}
.col-3-2{width: 66.666666666666%; box-sizing: border-box; margin-bottom: 60px;}
.col-3-1{width: 33.333333333333%; box-sizing: border-box; margin-bottom: 60px;}
.col-2-1{width: 50%; box-sizing: border-box;}
.float-left{float: left; padding-right: 30px; font-size: 0.9em;}
.float-right{float: right;}
.col-2-1.float-right{padding-right: 30px;}
.no-margin{padding-right: 0;}
.border{padding-left: 30px; border-left: 2px #006e51 solid;}

/* Header */
#logo{display: block; float: left; position: relative;}
#logo img{
	-webkit-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.25);
	-moz-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.25);
	box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.25);
	width: 225px;
    padding: 20px;
    background: #fff;
}
#sub-header{float: right; width: 680px;}
.header-col{max-width: 33%; padding: 0 4%; float: left; text-align: center; color: #1f3d7b; font-weight: bold; text-transform: uppercase; margin-top: 13px; line-height: 1.3em;}
.header-col span{display: block; white-space: nowrap;}

/* Navigation */
header nav{
	float: right; 
	display: inline-block;
	-webkit-transition: all 0.3s ease;  
  	-moz-transition: all 0.3s ease;
  	-ms-transition: all 0.3s ease;
  	transition: all 0.3s ease; 
  	margin-top: 20px;
}
header nav ul, #service-nav ul{
	margin: 0; 
	padding: 0; 
	list-style-type: none;
	position: relative;
  	display: inline-table;
}
header nav ul li{float: left;}
header nav ul li span{padding: 0 10px; font-weight: bold; color: #1f3d7b;}
header nav ul li a{font-weight: bold; text-decoration: none;}
header nav ul li a:link, header nav ul li a:visited{color: #006e51; text-decoration: none;}
header nav ul li a:hover, header nav ul li a:active{color: #1f3d7b;}
header nav ul li.active a{color: #1f3d7b;}
.menu-link {display: none;}

#service-nav{max-width: 1024px; margin: -35px auto 80px auto;}
#service-nav ul{margin: 0 0 0 3px;}
#service-nav ul span{display: block; position: relative; top: 110px; text-align: center;}
#service-nav ul li{
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	-webkit-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.25);
	-moz-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.25);
	box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.25);
	height: 101px;
	width: 101px;
	margin-right: 30px;
	float: left;
}
#service-nav ul li:last-of-type{margin-right: 0;}
#service-nav ul li.roofing{background: url('../imgs/service-nav-roofing.jpg') no-repeat center center;}
#service-nav ul li.siding{background: url('../imgs/service-nav-siding.jpg') no-repeat center center;}
#service-nav ul li.painting{background: url('../imgs/service-nav-painting.jpg') no-repeat center center;}
#service-nav ul li.decks{background: url('../imgs/service-nav-decks.jpg') no-repeat center center;}
#service-nav ul li.snow{background: url('../imgs/service-nav-snow-removal.jpg') no-repeat center center;}
#service-nav ul li.solar{background: url('../imgs/service-nav-solar-energy.jpg') no-repeat center center;}
#service-nav ul li.chimney{background: url('../imgs/service-nav-chimney-repair.jpg') no-repeat center top;}
#service-nav ul li.disaster{background: url('../imgs/service-nav-disaster-restoration.jpg') no-repeat center center;}

#service-nav ul li a{display: block; line-height: 1.2em; height: 110px;}
#service-nav ul li a:link, #service-nav ul li a:visited{text-decoration: none; font-weight: bold; font-size: 0.8em;}
#service-nav ul li a:hover, #service-nav ul li a:active{color: #006e51;}

/* Hero */
#hero{
	width: 100%; 
	margin-top: 130px;
}
#hero img{
	margin-top: -52px; 
	width: 100%; 
	height: auto;
	-webkit-box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.25);
	-moz-box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.25);
	box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.25);
}

/* Service Buttons */
#services{margin: 0 0 30px 0; padding: 0; list-style-type: none;}
#services li{margin: 15px 0; background: url('../imgs/layout/service-buttons.png') no-repeat; width: 201px; height: 46px; box-sizing: border-box; line-height: 1em;}
#services li.roofing{background-position: 0 0;}
#services li.siding{background-position: 0 -46px;}
#services li.painting{background-position: 0 -92px;}
#services li.decks{background-position: 0 -138px;}
#services li.snow{background-position: 0 -184px;}
#services li.solar{background-position: 0 -230px;}
#services li.chimney{background-position: 0 -276px;}
#services li.disaster{background-position: 0 -322px;}

#services li.roofing:hover, #services li.active.roofing{background-position: -201px 0;}
#services li.siding:hover, #services li.active.siding{background-position: -201px -46px;}
#services li.painting:hover, #services li.active.painting{background-position: -201px -92px;}
#services li.decks:hover, #services li.active.decks{background-position: -201px -138px;}
#services li.snow:hover, #services li.active.snow{background-position: -201px -184px;}
#services li.solar:hover, #services li.active.solar{background-position: -201px -230px;}
#services li.chimney:hover, #services li.active.chimney{background-position: -201px -276px;}
#services li.disaster:hover, #services li.active.disaster{background-position: -201px -322px;}

#services li a{font-size: 0.94444444444444em; font-weight: bold; text-decoration: none; display: block; padding-top: 5px; padding-left: 56px;}
#services li:nth-child(3) a{padding-top: 14px;}
#services li a:link, #services li a:visited{color: #006547;}
#services li a:hover, #service li a:active, #services li:hover a, #services li.active a{color: #fff;}


/* Buttons */
.button{
	padding: 3px 8px; 
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	-webkit-box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.25);
	-moz-box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.25);
	box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.25);
	color: #fff;
	text-transform: uppercase;
	font-weight: bold;
	text-align: center;
	margin-bottom: 0;
	border: 0;
	outline: 0;
}
.button-blue{background: #1f3d7b;}
.button-green{background: #006e51;}
.button-green:hover, .button-blue:hover{cursor: pointer;}
.button-green:hover{background: #1f3d7b;}
.button-blue:hover{background: #006e51;}

.button a:link, .button a:visited, .button a:hover, .button a:active{color: #fff; text-decoration: none;}


.header-col.button{margin: 13px 4% 0 4%;}
.float-right.border .button-green{font-size: 1.25em;}
.float-left.col-3-2 .button{max-width: 206px; margin-left: auto; margin-right: auto;}

/* Headings */
h1{font: bold normal normal 2.33333333333333em/1.25em "Open Sans Condensed", sans-serif; color: #006e51; margin-top: 0;}
h2{font: normal normal normal 1.88888888888889em/1.23076923076923em "Balthazar", sans-serif; color: #1f3d7b; margin-bottom: 0;}

/* Paragraphs */
.aner{font-size: 0.77777777777778em; text-align: center; margin: 2px 0;}
.text-green{color: #006e51;}
.text-bold{font-weight: bold;}
.text-19{font-size: 1.05555555555556em;}
.testimonial p{border-top: 2px #006e51 solid; padding-top: 0.8em; padding-right: 30px;}

/* Links */
a:link, a:visited{color: #1f3d7b; text-decoration: underline;}
a:hover, a:active{color: #006e51; text-decoration: none;}

/* Images */
.aner-logo{margin-top: 30px;}
.img-center{display: block; margin: 0 auto;}
.thumb, .popup-gallery a img{
	width: 30.065359477124%; 
	margin: 60px 4.901960784314% 30px 0; 
	float: left;
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
}
.popup-gallery a img{margin-top: 30px !important; margin-bottom: 0 !important;}
.thumb:last-of-type, .popup-gallery a:nth-child(3n+3) img{margin-right: 0;}
.popup-gallery a:last-of-type img{margin-bottom: 30px !important;}
.img-100w{width: 100%; margin-top: 30px;}

/* Slideshow */
.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  z-index: 0;
  height: 301px;
  }

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  }
#hero .rslides img{
	margin-top: 0;
}
.home header #logo img{position: relative; z-index: 2000;}
.home #hero{position: relative; top: -52px; z-index: -1;}
#service-nav{margin-top: -84px;}


/* Form */
form{margin-top: 0.8em;}
label{display: block; color: #006e51; font-weight: bold; margin-bottom: 5px;}
input[type=text], input[type=email], input[type=tel], textarea{width: 99%; border: 0; outline: 0; background: rgba(0,0,0,0.05); height: 30px; margin-bottom: 5px; padding-left: 1%;}
textarea{height: 100px;}
input[type=submit]{padding: 4px 12px; font-size: 1em;}
.req{text-align: right; font-size: 0.6em; margin: 0.25em 0;}

/* Footer */
footer{clear: both; background: #006e51; height: 52px; line-height: 52px; color: #fff; font-weight: bold; text-align: center;}
footer a:link, footer a:visited{color: #fff; text-decoration: none;}
footer a:hover, footer a:active{text-decoration: underline;}

/* Video */
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; clear: both; } 
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


/*Ravi CSS*/
a[href="http://www.bbb.org/boston/business-reviews/roofing-contractors/emmanuel-construction-in-centerville-ma-118649"] {
  display: none;
}

/* Responsive Styles */
@media screen and (max-width: 1036px){
	#service-nav{display: none;}
}
@media screen and (max-width: 1019px){
	#logo{width: 265px; margin: 0 auto; float: none;}
	header nav, #sub-header{width: 680px; margin: 20px auto; float: none; display: block;}
	#hero{margin-top: 115px;}
	#hero img{margin-top: 0; height: auto;}
	#hero .rslides img{width: auto;}
	footer{font-size: 0.8em;}
	.home #hero{top: 0;}
	#rslides1_s0 img{position: relative; left:-300px;}
}
@media screen and (max-width: 800px){
	footer{height: auto; line-height: 1em; padding: 15px;}
	footer p span{display: block;}
}
@media screen and (max-width: 740px){
	#sub-header{display: none;}
	a.menu-link { 
		display: inline-block; 
		color: #fff; 
		background-color: #1f3d7b;  
		text-decoration: none; 
		padding: 0; 
		padding: 9px 14px 5px 37px; 
		position: absolute; 
		top: 20px; 
		right: 15px;
		border-radius: 6px;
		-moz-border-radius: 6px;
		-webkit-border-radius: 6px;
	}
	#rslides1_s0 img{position: relative; left:-550px;}
	header nav{width: auto;}
	header nav ul li{float: none; text-align: center;}
	header nav ul li a:link, header nav ul li a:visited{color: #fff;}
	header nav ul li a:hover, header nav ul li a:active{background-color: #006e51;}
	header nav ul li span{display: none;}
	.menu { clear: both; min-width: inherit; float: none; }
	.menu, .menu > ul ul { overflow: hidden; max-height: 0; background-color: #1f3d7b; }
	.menu > li > ul.sub-menu { padding: 0px; border: none; }
	.menu.active, .menu > ul ul.active { max-height: 55em; margin-bottom: 90px; }
	.menu ul { display: inline; }
	.menu > ul { border-top: 1px solid #183061; }
	.menu li, .menu > ul > li { display: block; }
	.menu li a { color: #fff; display: block; padding: 0.8em; border-bottom: 1px solid #183061; position: relative; }
	.menu li.has-submenu > a:after {
		content: '+';
		position: absolute;
		top: 0;
		right: 0;
		display: block;
		font-size: 1.5em;
		padding: 0.55em 0.5em;
	}
	.menu li.has-submenu > a.active:after {
    content: "-";
	}
	.menu ul ul > li a { background-color: #e4e4e4; height:58px; padding: 19px 18px 19px 30px; }
	.menu ul ul, .menu ul ul ul { display: inherit; position: relative; left: auto; top:auto; border:none; }

	.box-shadow-menu {
  		position: relative;
  		padding-left: 1.25em;
	}
	.box-shadow-menu:before {
		content: "";
		position: absolute;
		left: 14px;
		top: 17px;
		width: 1em;
		height: 0.12em;
		background: white;
		box-shadow: 0 0.25em 0 0 white, 0 0.5em 0 0 white;}
	#hero{margin-top: -90px;}
	.col-3-2, .col-3-1{width: 100%;}
	.col-3-2{margin-bottom: 12px;}
	.float-right, .float-left{float: none; padding-left: 0; padding-right: 0; display: inline-block;}
	.border{border: 0;}
	#services{width: 432px; margin: 0 auto;}
	#services li{float: left; margin-right: 30px;}
	#services li:nth-child(2n+2){margin-right: 0;}
	#services li:nth-child(8){margin-bottom: 30px;}
	.button-green{clear: both;}
}
@media screen and (max-width: 545px){
	#logo{width: 125px; margin: 0;}
	#logo img{width: 125px;}
	#hero{margin-top: -80px;}
	#content{margin-top: 30px;}
}
@media screen and (max-width: 508px){
	#services{width: 201px;}
	#services li{float: none;}
}