/* CSS Document for Screens */

/* Not in use, note only: Web font from Google font site www.google.com/fonts.  The @import feature allows to go out to google site to pull in the fonts */
/* Not in use, note only: @import url(https://fonts.gooleapis.com/css?family=Open+Sans:300italic,700italic,300,700); */  /* @import has to be the first item in the CSS file */


/* -------- GLOBAL -------- */

/* body { font-family: 'Open Sans' , sans-serif; } */  /* this is from Google font site */

body { 
	font-family: 'Gill Sans', sans-serif; 
	font-size: 16px; 
	font-weight: 300; 
	color: #555; 
	margin: 0; 
	padding: 0; 
	}

/* main page container */
#page { 
	max-width: 1000px; 																		/* max width for element containing background header image (logo) */
	margin: 0 auto; 																		/* margin 0 is top and bottom and auto is right and left. Setting to auto is centering that content.  */
	position: relative; 																	/* any items positioned inside of the page element will be positioned in relation to this. */
	padding: 0px;
	} 
/* position relative here means any items positioned inside of the page element will be positioned in relation to position - theis makes sure everything is contained in the main page container. */


/* --------- GLOBAL - TEXT STYLES --------- */

	h1 { margin: 0 0 1em 0; font-size: 2.8em; font-weight: 700; }
	h2 { margin: 0 0 .5em 0; font-size: 1.6em; font-weight: 700; line-height: 1.1em; }
	h3 { margin: 0 0 .5em 0; font-size: 1.3em; font-weight: 700; }
	h4 { margin: 0 0 1.5em 0; font-size: 1em; font-weight: 700; }

	/* NOTES about MARGINS and PADDINGS */
	/* For example, the h1 type has a bounding box around the individual h1 element. This is how the browser sees that content. When we assign margin properties, we're basically setting the space around the outside of that particular bounding box. */

	p { margin: 0 0 1em 0; }

	a { color: #000000; } /*#007eff; }  /* red green blue */
	a:visited { color: #65b1ff; } /* color that anchors links show if someone has already visited  */

	/* Targets Text for Article on "Over 35-years Experience" and "Learn More" */
	a.btn { 
		font-size: 1.2em; 
		text-decoration: none; 
		color: #ffffff; /*#A00000 ; */
		border: 1px solid #ffffff; 
		background-color: none; /*rgba(0,36,125,.20); /*(128,0,0,.5);*/
		padding: 4px 4px;																	/* padding controls the space inside of the element, it gives some space so that the border doesn't touch the text. */
		transition: background-color .5s;   												/* animated transition, with a property of background-color that will display for a time of .5s seconds. */
		} 																 
	a.btn:hover { 																			/* pseudo class for hover state */
		background-color: rgb(255,255,255);
		/* background-color: rgba(128,0,0,.3); */											/* r red, g green, b blue, a alpha with .3 as 30% opaque or 70% transparent */
		font-size: 1.7em; 
		text-decoration: none; 																/* text-decoration, anchor links with a class of btn will not have an underline */
		color: #A00000; /*#ffffff; */
		border: 1px solid #ffffff; 
		}  																																																																			/* animation note: transition color is animated for .5 seconds. Animation of the background going up to 30% opaque, and then back down to zero when you roll away. */
	


/* ***************-- HEADER --************** */
     #hamburger {
          visibility: hidden;
     }
	/* Header - style elements  */
		header { 
			height: 430px; 																	/* Header Area - Banner graphic size being used is 1200px x 430px. This is why the Header Area height is set to 430px */
			background: /* #cf0004 */ url(../images/BG_Roof_1200x435-2.jpg) no-repeat center bottom; 
			position: relative;																/* Any items positioned inside of the Header Element will be positioned in relation to the Header Element itself. */			
		}
	
		header a.logo {
			/* z-index: 1;																		/* Setting a z-index, we are basically rearranging, or changing the stacking order of this particular element. Since we haven't used a z-index at all in our CSS file everything has a z-index of zero, however the stacking order is then defined by the order of the code. By coming in here and setting the z-index of the a.logo to a whole number this will now be the highest element on the page. */		
			position: absolute;																/* will be positioned in relation to the header element with a height of 430px which the relative parent */
			display: block;																	/* turns the anchor link into a block object, this overrides the anchor tage default inline style (this means they don't have any dimensions, and will basically stretch to their width. */
			width: 400px; /*169px;*/														/* matches the width size of the graphic */ 
			height: 184px; /*66px;*/
			background: url(../images/J&JLogo_400x184.jpg) no-repeat 0 0;	
			background-color: #fff; /*rgba(255,255,255,.0);*/							/* positions the graphics' upper lefthand corner of this a.logo element */
			background-size: contain;														/* the background graphic is sized to fit within the height & width */
			top: 1px;																		/* relates to position absolute, which is down 15px from the top of the header element. */
			left: 45px;														/* the left edge of the logo is 20px away from the left hand side of the page. */
		}
		
		header a.logo span { display: none; }												/*Here in the css this hides the span and in the html document it also is hides the text J&J Roofing from the user and show the background graphic instead. It refers to the html file header anchor element with the span element that contains the text "J&J Roofing" */
		
		header div.hero { 																	/* targets div element with a class of hero "Over 35-years experience". */
			position: absolute;
			width: 52%;  																	/* width is percentage of the header element */
			top: 290px; /*130px*/																		/* top margin for "Over 35-years experience" */
			left: 52%;
			/*background-color: rgba(128,0,0,.7); 											/* r red, g green, b blue, a alpha with .3 as 30% opaque or 70% transparent */
			font-size: 1em; 
			text-decoration: none; 															/* text-decoration, anchor links with a class of btn will not have an underline */
			color: #ffffff; 
			/* border: 1px solid #ffffff; */
			text-align: center; 
		}
		
		header div.hero h2 {																/* target the H1 tage inside of this div with a class of here. "Over 35-years experience" */
			line-height: .4em;																/* creates some H1 overrides for the h1 area here. "Over 35-years experience" */
			margin: 0 0 .8em 0;																/* "Over 35-years experience" */
			font-size: 1.5em;																	/* "Over 35-years experience" */
			/*color: #cf0004;	 /* #fff */													/* "Over 35-years experience" */
			text-align: center;
             
          }

		header div.hero h2 a {
			font-size: 1.5em;
			font-weight: 410;
			line-height: .8em;
			border: none;
		}
		header div.hero h2 a.btn:hover {
		background-color: none;
		background-color: rgba(0,0,0,.0); 											 
		font-size: 1.6em; 
		text-decoration: none; 															
		color: #ffffff; 
		border: none; 
		}

		header div.hero h2 a.btn:hover {
			a:visited 
  			text-decoration: none; 															
			color: #ffffff; 
			border: none; 
		}



/* ***************-- SECTIONS --************** */

	/* SECTION - ALL */
		section {				
			padding: 0px 10px; 																/* any content we place inside any one of the sections won't touch the edge of the PAGE ELEMENT. */
		}

	/* PSEUDO ELEMENT (not a psuedo class as in the section.main aside h3 a:hover below  */
		section::after {																	/* phantom element or pseudo-element added to all of the sections to enable other items in other sections can float */
			content:'';																		/* content element is currently empty */  	/* this content property must alway be in the pseudo element. Double quotes can also be used  */
			display: block;																	/* display type of block with an empty content element, is almost like adding an invisible paragraph, heading or div element. */
			clear: both;																	/* make all of the section elements tall enough to clear all the items inside that have a float property.   */
		}

/*  SECTION - MAIN  */
		section.main { 												
			margin-top: 20px;
			margin-bottom: 3px;
			padding: 0;   	/* padding is zero on all 4-sides */
			
		}	
			
		section.main aside { 										
			width: 33%;													/* a width of 33% creates 3-columns */
			float: left;																	/* float left allows each of the individual asides to line up next to each other */
			text-align: center;
		}		
		
		section.main .content { 
			margin: 15px;
			background: no-repeat center top;					
			background-size: 75px 75px;								
			padding-top: 85px;																
		}
		
     /* --LINKS for SECTION MAIN + ASIDES-- */
		section.main aside h3 a { 
             color: rgb(0,36,125);
			text-decoration: underline;   /* text-decoration: none;*/
          }
          section.main aside h3 a:active {
               color: blue;
          }
		section.main aside h3 a:hover { 
			font-size: 1.2em;
		   }
          section.main aside h3 a:visited { color: #65b1ff; }
     
     /* --End of LINKS for SECTION MAIN + ASIDES-- */


		section.main aside p {
			text-align: left;
			padding-left: 25px;
		}
		
		section.main aside .content.trendingServices {
             background-image: url(../images/icon_gear_red.svg); 
		}
		section.main aside .content.find-itProjects {
             background-image: url(../images/icon_star_red.svg);		
		}
		section.main aside .content.toolsContactUs {
             background-image: url(../images/icon_marker_red.svg);		
		}


	/* ASIDE - find-itProjects */
		section.main aside div.content .find-itProjects h2 {
			margin: 1em 0 .5em 0;
			font-size: 1.8em;
			font-weight: 400;
			font-family: 'open sans', sans-serif, arial;			
		}
	
	/* ASIDE - toolsContactUs */
	
		section.main aside div.toolsContactUs {
			padding-left: 0px;
			
             /* border: 1px solid blue; */
		}
		section.main aside section.telemail {
             width: 225px; /* 280px;*/
             color: #990033;
             margin-left: 40px;
             margin-top: 1px;
             margin-bottom: 20px;
             line-height: 1.2em;
             padding-left: 0px;
             padding-right: 0px;
                          
             border-top: 1px solid #333743;
             float: left;
			
             /* border: 1px solid red; */
		}
     section.telemail p#contact1 {
          width: 100%;
          /* border: solid 3px red; */
          }
     section.telemail {
          width: auto;
          /* border: blue solid 7px;*/
     }
     section.main aside section.telemail p {
			font-weight: 500;
			font-size: 1em;
			line-height: 1.3em;
			padding: 0px;
          border-bottom: 1px solid #333743; /* #cf142b; */
		}
	
	
		
	/* SECTION - atmosphereSpecialisation */
		/* section.atmosphereSpecialisation slideshow-container article.myslides {
			background-color: #ffffff; /*#012169; /*#C8102E; /* #cc6633; */
	/*		padding: 0px; /* 10px 10px 30px 5px; */
	/*		color: #fff;
	/*		width: auto; /*963px;*/
	/*		margin:auto; /*0px; /* 20px; */
	/*		border: 5px blue solid;			
		}	
		section.atmosphereSpecialisation slideshow-container article.mySlides {
			/* padding: 40px 0px 50px 60px;							/* this will push the content inside of the article area 15 pixels away from the left hand side. This will give us room to bring in that background graphic.*/  
			/*background: url(../images/HB_Paving_Stone_Driveway_01.jpg) no-repeat 0 0;	/* (../images/Paving_RedBlock07_475x220.jpg)   	/* image size is 475 × 220	/* zero on the X position and five pixels on the Y position. */
			 /* min-height: 280px;	/* can be taller than 220px but not shorter */				 
			/*width: auto; 
			/*margin: 5px 10px 0px 20px; */
			
		/* } */
		
          section.atmosphereSpecialisation  {
			background-size: auto; /*1000px;*/
               background-color: #ffffff;
               min-height: 280px;
               
               padding: 0px 0px;
               
               /* border: 3px solid red; */
		} 

section.atmosphereSpecialisation article.mySlides {
     background-size: cover;
     background-repeat: no-repeat;
     min-height: 280px;
     
     margin: 0px 0px 0px 0px;
     
}

		article.mySlides h2 {
			font-size: 1.8em;
             font-weight: 700;
             line-height: 1em;
             text-align: left;
			margin-top: 10px;
			padding-top: 50px;
            padding-left: 20px;
            color: #fff;
		}	
		article.mySlides p {
			font-family: 'Gill Sans', sans-serif; 
			font-size: 1.5em; 
			font-weight: 600; 
            line-height: 1em;
			padding-top: 10px; 
            padding-left: 50px;
			text-align: left;
			margin-top: 5px ; 
			margin-left: auto;
			margin-right: auto;
             margin-top: 10px;
             color: #fff;
		}	
		section.atmosphereSpecialisation article a {
			margin-left: 20%;
		}	
		
		



	
	/* SECTION - how-toProducts */
		section.how-toProducts {
			background-color: #eee9d9;
			position: relative;															
		}
			
		section.how-toProducts aside {
			width: 20%; 
			float: left;
			margin-right: 5px;
             padding: 10px 5px 10px 5px;
             /*border: solid 1px blue;*/
		}	
		
		section.how-toProducts aside .content {
			padding: 5px 1px 5px 5px;
             
             /*border: solid 3px red;*/
		}
		
          section.how-toProducts aside .epdm {
               margin-right: 0px;
               padding: 0px 0px 0px 0px;
        }
          
          section.how-toProducts aside .gravel {
               margin-right: 0px;
               padding: 0px 0px 0px 0px;     
        }

          div.gravel img:hover {
               height: 200px;
               margin-top: 0px;
          }







          section.how-toProducts aside .hiddenbrook { 
               margin-right: 0px;
               padding: 0px 0px 0px 0px;
          }

          /* ad-product images at bottom; Hiddenbrook, Resin, rubberbond */
		section.how-toProducts aside .content img {  
			display: block;										
			margin-bottom: 10px;
			width: 80%;	
			border-radius: 10px;
		}
          
          section.how-toProducts aside .gravel img {
          box-shadow: 4px 4px;
          } 
		section.how-toProducts aside .content h4 {
			margin-bottom: 0;
             font-size: 1em;
             font-weight: 600;
             text-align: left;
		}
		
		section.how-toProducts aside .content p {
			margin-bottom: .5em;
             font-size: 14px;
		}
		
		section.how-toProducts aside .content a {
			display: inline-block; 
			color: #cc6633;
			font-weight: 700;	
		}

		section.how-toProducts blockquote {
			max-height: 275px;
			margin: 0px;
			width: 33%;
			color: #444;
			background-color: #fff;
			position: absolute;
			bottom: 0;
			right: 4%;
             font-weight: 500;
		}
		
		section.how-toProducts blockquote p {
			margin: 22px 15px 3px 40px;
		}
		
		section.how-toProducts blockquote p.quote {
			font-style: italic;
			font-size: 1em;
			padding: 5px;
		}
		
		section.how-toProducts blockquote p.credit {
			color: #777;
			font-size: .9em;
			margin-top: 0;
			padding-left: 20px;
			line-height: 1.2em;
			position: relative;										
		}
		
		section.how-toProducts blockquote::before {
			content: '\201c';
			color: #d2bd65;
			position: absolute;
			top: 12px;
			left: 10px;
			font-size: 4em;
			font-family: serif;
		}
		
		section.how-toProducts p.blockquote:after {
			content: '\201d';
			font-family: serif;
		}
	
		section.how-toProducts p.credit::before {
			content:'\2014';
			position: absolute;
			top: -1px;
			left: 0;
		}
		



/* --************** NAVIGATION **************-- */

		/* menu at top for browser window size over 1000px */
		nav {
			/*background-color: rgba(0,36,125,.40); /*rgba(1,33,105,.70);    				/* transparent background color menu - UK Flag Catalina Blue color code #00247d   RGB: (0, 36, 125)   */ 
			position: absolute;
			top: 0px; 
			right: 0px;
			padding: 0px 0px 0px 0px;
			width: auto; float: none;														/* Setting a width of 100 will make sure that the navigation element is as wide as its parent, which again is the div element with an ID of page. */
			height: auto;
			color: #ffffff; 
             background-color: rgba(0, 36, 125,.4);
             box-shadow: -5px 5px 3px rgba(0,0,0,.3);
             
			/*border-style: solid; */
			/* border-color: blue; */
		}

		nav::after {																		/* The ::after pseudo-element inserts content after the content of an element, same with ::before. */													/* Since we're going to have items floating inside of our navigation element, just like earlier when we were floating as sides inside of our section element, we're going to want to add a pseudo element to clear out the floats to make sure that the navigation element will be high enough to encompass at least this top level of children. */
			content: ' ';
			color: #fff;
			display: block;
			clear: both;
		}
	
		nav ul {
			list-style: none;										/* no bullets */
			margin: 0px;											/* Setting a margin of 0 on all four sides, and a padding of 0 on all four sides. This will take away any of the default margin and padding settings that browsers will add to an unordered list.  */
			padding: 0px;											/* Setting a margin of 0 on all four sides, and a padding of 0 on all four sides. This will take away any of the default margin and padding settings that browsers will add to an unordered list.  */
			padding-left: 6px;  /* 1st sub link(s) */
			border: none; 
             background-color: rgba(0,36,125,.6);

		}

		/* nav ul:hover {
		border-color: #2b0306;
		}
*/
/*		nav ul li:hover {											
			border-color: #ffffff; /*#2b0306;	/*.3em #cf142b solid;						/* Background color for listed item on hover, the list item changes color on hover. This way when we hover over a top level element and then move down, the top level element will still display a hover state.  */
/*		}
*/
		nav ul li a {
			display: inline-block;	/* Display the list of links as a horizontal menu */	/*  Setting a display type of inLine-block. This will make these behave a little bit more like graphics rather than inLine elements.  */
			font-family: "Ubuntu", Helvetica, Arial, sans-serif; /*'arial bold', sans-serif;*/
			color: #ffffff;  /* #00247d;    		/* font color for menu anchors */
			padding: 5px 5px;  					/* padding for sub links menu */
			text-decoration: none;
			width: 100px; 						/* sub menu link width on hover */						/*  Setting a width on these individual anchor tags when they have a display type set to inLine-block will allow us to define the width of the submenus. So, when somebody rolls over these, this is the width of the submenu that will drop down from the main set of elements. */
			position: relative;																/*  Setting a position of relative. Later on in the course we're going to be adding some triangles into individual elements when we enable our menu for multi-input touch devices like a Microsoft Surface, for example, and when we position these arrows we'll want those arrows to position in relation to this anchor tag. */
			font-weight: normal;
			font-size: 18px;
		}
		
		nav ul li a:visited { color: #fff; }															/* 1st sub menu link width */
			
		nav ul li a:hover {border-top: none; background-color: rgba(0,36,125,.3); font-size: 20px;}					/* Background color of the anchor tags. We also want to have the list item change color on hover as well. This way when we hover over a top level element and then move down, the top level element will still display a hover state.  */

		nav ul ul {
			position: absolute;																/*  the reason we want to position the nested unordered list, is because we want to make sure that this item will show up directly under the list items, but we don't want the navigation element, the main element here, to wrap around and encompass the entire height of those menus. So, any items that absolutely positioned inside of an element will be ignored. And the reason we added this pseudo element to the nav element is to make sure that the height of the nav will always encompass the top level items that are set to float. */ 
			top: 100%;
			background-color: rgba(207,20,43,.50);; /*#cf142b; red uk flag */
			display: none;																	/*  Hides all of the nested ul items.   */												
		}

		nav ul li:hover > ul {display: block; }												/* To display the sub sub link which is nav ul ul,  again, we're going to lock on to the pseudo class we added to the list item. */

		nav ul ul li { position: relative; }												/* position set to relative, this way if we have a third level menu item, which would be a third level lsited unordored lits, it will positon in relation to its parent which is this list item. */
		
		nav ul ul ul {
			left: 100%;
			top: 0px;
		}
	
	/* TOP-LEVEL */
		nav ul { 																			/* This will only SPECIFICALLY target to top level UL element, and not other sub UL elements.  */						/* A greater than sign, and then ul. So, what this means is this will only target an unordered list if it is immediately the child of a navigation element. */
			float: right;																	/* The unordered list at the top level inside the navigation element will have a padding left at 200, which means that that item will no longer conflict with or show up behind the logo. */
			padding-right: 10px;
		}
		
		nav ul li {	float: left; }														/* float for the top level list items only */
		
		nav ul li a { 																/* targets the specific anchor link indicated */
			width: auto;																	/* Override the width setting of 125 pixels is set the width to auto.*/
			padding: 10px 5px 12px 15px;
		}
		
		
		nav a[aria-haspopup="true"]::after {												/* looks for any nav element that has the aria=haspopup attribute.  And, for every one that we find, we're going to add a pseudo-element and then we're going to create a triangle with CSS. */
			content: ' ' ;
			display: block;
			width: 0px;
			height: 0px;
			position: absolute;																/* Earlier we set a position relative on all of our links up here, so now anything that we position inside of the anchor links will be in relation to that anchor tag. */
			top: 16px;
			right: 15px;
			/* right-pointing ARROW */
			border-top: 4px solid transparent;												
			border-bottom: 4px solid transparent;
			border-left: 4px solid #fff;
			}
		
		   nav ul li a [aria-haspopup="true"]::after {
			/* down point ARROW */
			border-left: 4px solid transparent;
			border-right: 4px solid transparent;
			border-top: 4px solid #fff;
			left: 20px; 
			right: auto;																	/* overrides the nav a right property */
			bottom: 4px;
			top: auto;																		/* overrides the nav a top property */
			} 



     /* ******* NAV Contact Us OVERLAY * *******/
  .overlay {
  height: 40%;
  width: 0; /* size of overlay when page loads */
  position: fixed;
  z-index: 1;
  top: 20%;
  right: 0; /*left: 0;*/ /* slide directioin of overlay */
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 0.7);
  overflow-x: hidden;
  transition: 0.5s;
       margin-right: 5em;
}

.overlay-content {
  position: relative;
  top: 15%;
  width: 100%;
  text-align: center;
  margin-top: 5px;
     margin-right: auto;
     font-family: tahoma, sans-serif;
     font-size: 1.4em;
     font-weight: 500;
     line-height: 1.4em;
     color: #fff;
     height: auto;
}

.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
     color: #fff;
}

@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
  font-size: 40px;
  top: 15px;
  right: 35px;
  }  
}

/* **** END OVERLAY **** */




		
/* --************** FOOTER **************-- */
		
		footer {
			font-size: .8em;
             font-weight: 200;
			margin: 40px;
			color: #999;
			text-align: center;
			padding: 5px 5px;
		}		

		footer div.content { display: inline; }												/* Everyday Things - J&J ROOFING */
		footer a { color: #777; }
		footer a:visited { color: #777; }
		footer a:hover { color: #000; }



/* ********************* ======= MEDIA QUERIES ======== ***************** */

/* 1000px BREAKPOINT MEDIA QUERY */
	@media screen and (max-width: 1000px) {
		h1 { font-size: 2.4em; }
	
		/* HEADER - class hero is for "over 35-years experience" */
		header div.hero { left: 50%; }
		header div.hero h1 { margin-bottom: 20px; } /* space between title "35-years" and button "testimonials" */
		
		header a.logo { left: auto; top: auto; } 
		
		
		/* ASIDE - SECTION telemail */
		section.main aside section.telemail {
             width: 225px;
             padding-left: 0px;
             
             /* border: 1px solid black; */
		}
			
		/* Navigation */
		nav ul {
          text-align: left;
          display: inline;
          float: right;
          margin-right: 1px;
         }  	/* align menu to left as it is resized  */
	
	
}   /* END media screen max-width 1000px)  */

	
/* 825px BREAKPOINT MEDIA QUERY */
	@media screen and (max-width: 825px) {
		h1 { font-size: 2em; }
		
		/* HEADER - class hero is for "over 35-years experience" */
		/* header { height: 300px; background-image: url(../images/BGbannerRoof_825x300.jpg); } */
		header div.hero { top: 290px; left: 50%; font-size: 1em;}
		/* header div.hero  h1 { font-size: 1.8em; } */
		
		/*header div.hero h1 { margin-bottom: 12px; }  /* line space between Over 35-years experience and Read out testimonials button */
		header a.logo { width: 400px; height: 152px; }  /* J*J Roofing logo image */
		
		
		/* ASIDE - SECTION telemail */
		section.main aside section.telemail {
             width: 225px;
             padding-left: 0px;
             margin-left: 30px;
             
             /* border: 1px solid green; */
		}
				
		/* Section - atmosphereSpecialisation */
		section.atmosphereSpecialisation article { 
			/* padding-right: 200px; */
			background-size: auto auto; 
		}
		/* Section - atmosphereSpecialisation */
		
		section.atmosphereSpecialisation article h2 {
			text-align: left;
			margin-top: 10px;
			margin-right: 150px;
			padding: 0px;
		}
	
		
		/* Section - how-toProducts */
		section.how-toProducts blockquote p.quote { font-size: 1em; line-height: 1.2em;  }
		section.how-toProducts blockquote p.credit { font-size: .85em; }
	
		/* Navigation */
		/*nav { padding-top: 120px; align: left;} 
		nav ul { padding-left: 10px; } */
	
}	/* END media screen max-width 825px)  */
	
	





/* 760px BREAKPOINT MEDIA QUERY */
	@media screen and (max-width: 760px) {
		h1 { font-size: 1em; }
		h2 { font-size: 1.4em; }
		h3 { font-size: 1.1em; }
		a.btn { font-size: 1em; }

		/* HEADER - class hero is for "over 35-years experience" */
		header {
             height: 430px; 
             background-image: url(../images/BGbannerRoof_825x300.jpg);
         }
		header a.logo {
          width: 330px;
          height: 142px;
          margin-top: 25px;
         }  
		header div.hero { left: 50%; }
		header div.hero h1 { font-size: 1.5em; line-height: .3em;}
		
		/* Section - Main (move the 3-asides from 3-columns to 1-column) */
		section.main aside { 
             width: 100%; 
             float: left; 
             text-align: left; 
         }
		
         section.main aside div.content {
			margin: 8px 20px 8px 0;
			padding: 5px 0px 10px 85px;
			background-size: 50px 50px;
			background-position: 20px 5px; 
		}
         section.main aside div.content p {
              /* padding: 5px 0px 10px 85px; */
         }
		
         section.atmosphereSpecialisation article {
			padding: 20px 10px 50px 40px;
         }
         
         
         section.how-toProducts aside div.content {
              width: auto;
              padding: 0px;
         }
         
		/* ASIDE - SECTION telemail */
		section.main aside section.telemail {
             margin-left: 80px;
             float: left;
			
             /* border: 1px solid purple; */
		}
		
		
		section.main aside p {
			text-align: left;
			padding-left: 0px;
		}
		/* adjusts the blockquote and credit elements */
		section.how-toProducts blockquote { 
			margin-top: 5px;
             margin-right: 1px;
             margin-bottom: 0px;
             max-height: 250px;  
			
			padding: 1px 0px 20px 0px;  
			/* position: relative;  */
		}
		
		nav { font-size: .8em; }
		
	
}	/* END media screen max-width 760px)  */




/* 625px BREAKPOINT MEDIA QUERY - ONE COLUMN LAYOUT */
	@media screen and (max-width: 625px) {
		h1 { font-size: 1em; }
		h2 { font-size: 1.4em; } 
		h3 { font-size: 1.1em; }
		/* h4 { margin: 0 0 1.5em 0; font-size: 1em; font-weight: 700; } */
		a.btn { font-size: 1em; }
	
		/* HEADER - main header element */
		/* header { height: 0px; background-image: url("../images/BGbannerRoof_825x300.jpg"); background-repeat: no-repeat; background-position: left; }
		/* header a.logo { width: 225px;  height: 120px; }  /* J&J Roofing logo image */
		   header div.hero { left: 46%;} 							/* Here Div is the text Over 35-YEARS Experience.  Now before we had the left property as a percentage, but since we are positioning the background graphic to the left, we always know where that background graphic is going to show up. So we can set the left property here to 130px and that will move the content far enough away from the elements in the background image. */
		/* header div.hero  h1 { font-size: 1.5em; line-height: .8em; margin-bottom: 14px;} */
					
         header a.logo {
          margin-top: 30px;
         }

         
         
					
		/* Navigation */
		nav {  
			margin-top: 390px;  
			padding-left: 0px; 
			position: absolute;
			background-color: none;
		}  	/* space between the top of the bottom nav and the bottom of the blockquote */

         
         
/* ************ NAV Overlay for Contact Us********** */

.overlay {
  height: 20%;
  width: 0; /* size of overlay when page loads */
  position: fixed;
  z-index: 1;
  top: 15%;
}  
         
.overlay-content {
  top: 5%;
  width: 100%;
  text-align: center;
  margin-top: 15px;
     font-family: tahoma, sans-serif;
     font-size: 1.2em;
     font-weight: 200;
     line-height: 1.3em;
     
}
div.overlay p.location {
     font-family: tahoma, sans-serif;
     font-size:.8em;
     line-height: 1em;
}

.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}

.overlay .closebtn {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 30px;
color: #fff;
}        
 .overlay a.closebtn {
  font-size: 30px;
  top: 1px;
  right: 15px;
  }          
		

/* **** END OVERLAY **** */
         

         
		/* Section - atmosphereSpecialisation - (moves paragraph from right side, and places it under the image */		
		 
		section.atmosphereSpecialisation article.drivePic h2 {
			font-size: 26px;
             line-height: 1em;
			text-align: left;
			margin-top: 10px;	
			margin-right: 50px;		
		}
         section.atmosphereSpecialisation article.drivePic p {
              font-weight: 500;
         }
		section.atmosphereSpecialisation article { 
			/* padding-right: 200px; */
			background-position: bottom left; 
		}
		
		
		/* Section - how-toProducts - targets aside to resize and move images to the left */
		section.how-toProducts aside { 
             width: 100%; 
             float: none;  
             margin: 0;  
             position: relative; 
         }
		section.how-toProducts aside div.content { 
             padding: 20px 20px 20px 150px; 
         }
		
         section.how-toProducts aside div.content p { 
              font-size: .9em; 
              /*padding: 0px 0px 10px 0px;*/
         }
		
         /* ad-product images at bottom; Hiddenbrook, Resin, rubberbond */
         section.how-toProducts aside div.content img { 
             display: inline-block; 
             width: 125px;  
             position: absolute;  
             top: 30px;  
             left: 10px; 
              
         }	
			
		
		/* adjusts the blockquote and credit elements */
		section.how-toProducts blockquote { 
			margin: 5px 20px 0 40px;  
			width: 90%;  
			padding: 1px 0px 20px 0px;  
			position: relative;  
		}
		section.how-toProducts blockquote p.credit { 
			margin-bottom: 0; 
		}
	
}
	

/* 425px BREAKPOINT MEDIA QUERY  */
	@media screen and (max-width: 425px)  {
         
         body {
              padding: 0px;
         }
		h1 { font-size: 1em; }
		h3 { margin-bottom: 0px; }
		a.btn:hover { font-size: 1.2em; }
		
         header {
          height: 430px; /* 475px; */
          background-image: url(../images/BG_Roof_400x200.jpg);
          background-position: right bottom;  
         } 
		
         header a.logo {
          margin-top: 70px;
         }	
		
		/*35-YEARS Experience. */
		header div.hero { 
			top: 350px; 
			width: 72%; 
			left: 10%; 
			text-align: center; 
			color: #fff; 
			height: 18px;
		}
         header div.hero h2 {
              font-size: 1em;
         }
		
		
	
	/* ASIDE SECTION toolsContactUs TELEMAIL */
			section.main aside section.telemail {
			min-width: 225px;
			margin-left: 50px;
			margin-bottom: 40px;
			margin-top: 1px;
			line-height: 1.2em;
			font-weight: 900;
			
           /* border: 1px solid red; */
		}
		
	/* ----------------------------------- */	
         
 
		
				
		section.atmosphereSpecialisation {
			padding: 1px 1px;
            
		}
		
		section.atmosphereSpecialisation article { 
			/* padding-right: 200px; */
			background-position: bottom left; 
		}
		section.atmosphereSpecialisation article.drivePic h2 {
			font-size: 1.7em;
			text-align: left;
			margin-top: 10px;	
			margin-right: 0px;		
		}
		
		section.atmosphereSpecialisation article {
			margin: 0px;
		}
         
		section.atmosphereSpecialisation article p {
			font-family: 'Gill Sans', sans-serif;
             color: #fff; /* #ffffe3;*/
			font-size: 1.5em; 
			font-weight: bolder;
             line-height: 23px;
			padding: 0; 
			text-align: left;
			margin-top: 10px ; 
			margin-left: auto;
			margin-right: auto;
		}	
		section.atmosphereSpecialisation article a {
			margin-left: 10%;
		}	
		

		
		/* Navigation */
		nav {  
			margin-top: 0px;
             margin-right: 10px;
			padding: 0px; 
			/* position: relative; */
			min-width: 300px;
            width: auto; /* 295px;*/
			background-color: rgb(0, 36, 125);
          box-shadow: 7px 8px 5px rgba(0,0,0,.3);
		}
		
		nav ul { 
			float: left; 
			padding-right: 3px; 
			padding-left: 3px; 
			margin-left: auto; 
            
		}   													
		
         
		nav ul li a {
			font-family: "Ubuntu", Helvetica, Arial, sans-serif;
              font-size: 1.1em;
		}
		
		nav ul li a:hover {
			font-size: 1em;
             color: none;
             border-bottom: none; /*#cf142b solid;*/ 
			background-color: none; /*rgba(0,36,125,.3);*/ 
		} 
		

         
         
         
     /* *************** navigation icon for hamburger ************** */
          /* https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_menu_icon_js */
         section.burger {
              float: right;
              
               cursor: pointer;
         }
         .burger1, .burger2, .burger3 {
              width: 35px;
              height: 5px;
              background-color: rgb(0, 36, 125); 
              margin: 6px 0;
              transition: 0.4s;
         }
         .change .burger1 {
               -webkit-transform: rotate(-45deg) translate(-9px, 6px);
               transform: rotate(-45deg) translate(-9px, 6px);
          }

          .change .burger2 {
               opacity: 0;
         }

         .change .burger3 {
          -webkit-transform: rotate(45deg) translate(-8px, -8px);
          transform: rotate(45deg) translate(-8px, -8px);
          }
                   
   
	
		/* Footer */
		
		footer div.content { padding: 10px;}
		
		footer div.content a { display: block; width: auto; padding: 0px; } 
	
	}
		
		
/* 350px BREAKPOINT MEDIA QUERY  */
	@media screen and (max-width: 375px)  {
	header {
          height: 430px; /* 475px; */
          background-image: url(../images/BG_Roof_325x430.jpg);
          background-position: left bottom;  
         } 
		header a.logo {
          margin-top: 70px;
         }

         header div.hero { 
			left: 45px; 
			height: 18px;
		}
         header div.hero h2 {
              font-size: 1em;
          
         }
         .overlay-content {
               top: 5%;
               width: 100%;
               text-align: center;
               margin-top: 15px;
               font-family: tahoma, sans-serif;
               font-size: .95em;
               font-weight: 200;
               line-height: 1em;
              padding-left: 10px;
          }
		
}