/* 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 -------- */

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

          /* **************-- SECTION SERVICES --************ */
          section.services h2 {
	         text-align: center;
	         font-family: font-family:'Times New Roman', Times, serif;
	         color:#000; 
	         margin-bottom: 25px;
	         padding-top:25px;	
          }
          section.services h3 {
	         font-family: font-family:'Times New Roman', Times, serif;
	         color:#000; 
	         text-align: center;
	         margin-bottom: 25px;
	         padding-top:10px;
          }

          /* **************-- W3 PORTFOLIO SECTION --************* */

          div #work {
	         background-color: #333743; /*636672; /*616274; /*404951; /*1E323F; /*#202020; /*#00247d;*/
	         height: auto;
	
	         /* border: purple 2px solid;*/
          }

          aside.w3-quarter.ourwork {
	         height: auto;
	         padding-right: 15px;
	         color:#fff;
	
	         /* border: solid 2px red; */
          }

          aside.renovsummary {
	         float: left;
	         clear: left;
          }

          aside.w3-quarter.renovsummary {
             border-top; solid 1px #fff;
          }

          aside.w3-quarter.ourwork.renovsummary {
	         padding-left: 0px;
	         padding-top: 0px;
          }

          div.w3-quarter {
	         color: #fff;
	         width: 233px;
	         height: 250px;
	         margin-bottom: 10px;
	         background-color: transparent; /*#333743; /*#fff*/
	         /* background-size: contain; */
	         float: left;
	
	         /* border: 1px solid yellow; */
          }

          
          div.w3-quarter h4 {
	         font-size: 18px;
          }
          div.w3-quarter h5 {
	         font-size: 16px;
          }

     /* HB Video */
          aside video {
               width: 80%;
               height: auto;
               border: double;
          }
          aside.w3-quarter.hbvideo {
               min-width: 50%; 
               height: auto;
               text-align: center;
               padding: 10px 50px 10px 0px;
               padding-top: 0px;
               margin-left: 70px;
               margin-right: 20px;
               margin-top: 0px;
               margin-bottom: 35px;
               float: left;
               /* border: double; */
          }
          aside.w3-quarter video {
               float: left;
              /*  border: solid 1px red; */
          }
          
     /* end HB Video */

          div.w3-card {
	         /* object-fit: cover;  /* https://www.w3schools.com/css/tryit.asp?filename=trycss3_object-fit_all */ /* NOTE: doesn't appear to work in firefox */
	         min-width: 227px;
	         height: 130px;
	         float: left;
	         /* border: 2px solid red; */
          }

          div.w3-container {
	         width: 100%;
	         line-height: 1em;
	         vertical-align: middle;
	         position: relative;
	         padding: 1px 1px;
	         text-align: center;
	         float: left;
	
	         /* border: 1px solid blue; */
          }

          p.hidden {
	         visibility: hidden;
          }

/* ***************-- SECTIONS --************** */
		
/* ********************* ======= MEDIA QUERIES ======== ***************** */

/* 1000px BREAKPOINT MEDIA QUERY */
@media screen and (max-width: 1000px) {
		
	/* ********** W3 PORTFOLIO SECTON ********* */
	
	aside.w3-quarter.ourwork {
		width: 300px;
		/* height: 250px;*/
		text-align: left;
		padding-top: 5px;
		display: inline-block;
		vertical-align: middle;
		padding-right: 10px;
		margin-right: 30px;
		
		/* border: solid 1px purple; */
	}
	
	div.w3-quarter {
		color: #fff;
		min-width: 230px;
		height: 250px;
		margin-left: 0px;
		margin-bottom: 20px;
		padding: 0px;
	
		float: left;
	
		/* border: 2px solid yellow; */ 
	}
     
     /* VIDEO */
     aside video {
          width: 60%;
     }
     aside.w3-quarter.hbvideo {
          margin-left: 10px;     
          margin-right: 50px;
          float: left;
          min-width: 70%;
          padding: 0px 55px 0px 0px;
          margin-bottom: 25px;
          }

     
     
}/* END media screen max-width 1000px)  */

	
/* 825px BREAKPOINT MEDIA QUERY */
	@media screen and (max-width: 825px) {

	/* ***** W3 PORTFOLIO SECTION ***** */
		
		div.w3-quarter {
			color: #fff;
			min-width: 230px;
			height: 250px;
			margin-left: 0px;
			margin-bottom: 20px;
			padding: 0px;
			float: left;
	
			/* border: 3px solid yellow; */
		}
         
         
         
}	/* END media screen max-width 825px)  */
	

     /* --***************** W3 WORK SECTION IMAGES *******************-- */	


/* 760px BREAKPOINT MEDIA QUERY */
	@media screen and (max-width: 760px) {

	/* ***** W3 PORTFOLIO SECTION ****** */

	aside.w3-quarter.ourwork {
		width: 375px;	
		float: left;
		clear: right;
		position: relative;
		height: auto;
		padding: 0px;
		
		/* border: solid 3px orange; */
	}
	
	aside.w3-quarter.ourwork p {
		font-size: 15px;
		line-height: 1.2em;
	}
	aside.w3-quarter.ourwork h2 {
		font-weight: 300;
	}
	aside.ourwork {
		margin-top: 0px;
		font-size: 12px;
		line-height: 1.2em;
		padding: 10px;
	}
	
	div.w3-card img {
		width: 250px;
		height: 100px;
	}
	div.w3-container {
		line-height: 1em;
	}
	div.w3-container h4 {
		font-size: 16px;
	}
	div.w3-container h5 {
		font-size: 1em;
	}	
	div.w3-container p {
		font-size: 12px;
		word-wrap: break-word; 
	}
	
	aside.w3-quarter .renovsummary {
		border-top; solid 1px #fff;
	}
	aside.renovsummary h2 {
		margin-top: 0px;
		font-size: 22px;
	}
        
         
         /* VIDEO */
     aside video {
               width: 75%;
               height: auto;
          }

     aside.w3-quarter.hbvideo {
          min-height: 150px;
          padding: 0px;
          text-align: center; 
     }
         
         
} /* END media screen max-width 760px)  */


/* 753px BREAKPOINT MEDIA QUERY - ONE COLUMN LAYOUT */
	@media screen and (max-width: 753px) {
	aside.w3-quarter.ourwork {
		width: 375px; 
		min-height:100px;
		padding: 5px;/*35px 8px 35px 8px;*/
		margin-left: 1px;		
		float: left;
		clear: left;
		position: relative;
		text-align: left;
		
		/* border: solid 3px green; */
	}	
	
	aside.w3-quarter.ourwork p {
		font-size: 15px;
		line-height: 1.2em;
	}   
         
         
}



/* 625px BREAKPOINT MEDIA QUERY - ONE COLUMN LAYOUT */
@media screen and (max-width: 625px) {
	

     /* --***************** W3 PORTFOLIO SECTION  *******************-- */

		aside.w3-quarter.ourwork {
			max-width: 475px;
			min-height:100px;
			padding: 5px;/*35px 8px 35px 8px;*/
			margin-left: 5px;		
			float: left;
			clear: left;
			position: relative;
		
			/* border: solid 1px green; */
		}
	
		aside.w3-quarter.ourwork h2 {
			font-weight: 100;
		}
	



}


/* 600px BREAKPOIN MEDIA QUERY */
@media screen and (max-width: 600px) {
		
		
		aside.w3-quarter.ourwork {
			width: 220px;
			max-height: 200px;
			
			padding: 5px 0px;/*35px 8px 35px 8px;*/
			margin-left: 1px;		
			float: left;
			clear: left;
			position: relative;
			
			/* border: solid 3px white; */
		}
	
		aside.w3-quarter.ourwork h2 {
			font-size: 22px;
		}

		
		aside.w3-quarter.ourwork.renovsummary {
			margin-top: 0px;
		}
			
		aside.renovsummary h2 {
			font-size: 22px;
		}
		
		div.w3-container {
			/* line-height: 7px;*/
			text-align: center;
			height: auto;
			background-size: auto;
			padding: 0px;
			max-width: 225px;
			min-width: 220px;
			float: left;
			
			/* border: 1px solid gray; */
		}
		
		
		
     
}



/* 425px BREAKPOINT MEDIA QUERY  */
@media screen and (max-width: 425px)  {                                          	
		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; 
          padding-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;
          
         }
	

	/* W3 PORTFOLIO SECTION */
	
	aside.w3-quarter.ourwork {
			width: auto;
			min-height:100px;
			padding: 5px 5px;/*35px 8px 35px 8px;*/
			margin-left: 5px;		
			float: left;
			clear: left;
			position: relative;
			
			/* border: solid 1px white; */
		}
		
	div.w3-container {
			line-height: .60em; 
			text-align: center;
			height: auto;
			background-size: auto;
			padding: 0px;
			max-width: 225px;
			min-width: 220px;
			float: left;
			/*border: 1px solid gray;*/ 
		}
     
     /* used for line spacing in a break between h5 lines */
     div.w3-container h5.brkh5 {
          
          line-height: 1em;   
     }
     

     div.w3-quarter {
			color: #fff;
			max-width: 250px;
			min-width: 230px;
			height: 200px;
			margin-left: 0px;
			margin-bottom: 10px;
			padding: 0px;
			float: left;
			/* border: 1px solid yellow; */
		}
		
     /* VIDEO */
     aside video {
               width: 100%;
              height: 100%;
          }

     aside.w3-quarter.hbvideo {
               min-width: 60%; 
               min-height: 150px;
               text-align: center;
               padding: 0px 0px 0px 0px;
     }
     
     
     
     
     
     
     
     /* 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.2em;
			text-align: left;
			margin-top: 10px;	
			margin-right: 0px;		
		}
		
		section.atmosphereSpecialisation article {
			margin: 0px;
		}
		section.atmosphereSpecialisation article p {
			font-family: 'Gill Sans', sans-serif; 
			font-size: 1.1em; 
			font-weight: 400; 
			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: 15px;}
		
		footer div.content a { display: block; width: auto; padding: 5px; } 
		
	
     hr {
     margin-top: 0.2em;
     margin-bottom: .3em;
     width: 260px;
     }  
   
     
     
}
		
		
/* 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; 
          padding-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;
          }
         
         hr {
          margin-top: 0.2em;
          margin-bottom: .3em;
          width: 220px;
          }  
 
     
     
     
     
}