@charset "utf-8";

/*
   Design sheets for Superior Solutions NWA website
	  	   
	   Author: Dianna Main
	  Date: Complete rebuild started 8/18/25

	   
	   Filename: stylesheet1SS.css
	   
	   url:    www.superiorsolutionsnwa.com
	   
	  This style sheet is for mobile & tablet. Desktop style changes from basic stylesheetSS.css
	  
	  Width Size breaks
	  851px-1100px   Tablet
	  0-850px	Mobile
	  1100px and greater coming from the StylesheetSS.css
*/

/* ======================================================================================================================================
   Tablet Styles: 850px to 1100px  this will affect tablet & mobile unless adjusted in Mobile as well
   ======================================================================================================================================
*/
@media only screen and (max-width: 1100px){
	
	/*HEADER/NAVIGATION ONLY STYLE CHANGES======================================*/
	/*increases the header logo a bit*/
	header img#headerImage {
	width: 45%;
	}
	
	nav.horizontal {
	padding-top: 2%;
	}/*drops the navicon down from the top*/

	/*displays the nav icon in upper right corner*/
	a#navicon{
		display: block;
		float: right;
	}
	
	/*re-sizing text size for the horizontal navigation*/
	ul.mainMenu > li > a {
		font-size: 1.4em;
		line-height: 1.8em;
		}
	
	/*drop down navigation changes for mobile up to 1100px wide only====================*/		
	/*hiding the full navigation list on mobile only*/
	nav.horizontal ul{
		display: none;
	}
	
	a#navicon:hover+ul{
		display: block;
	}/*showing the list if you click on navicon*/
	
	nav.horizontal ul:hover {
		display: block;
	}/*takes you to page if you click on nav links*/
	
	ul.mainMenu li {
		display: block;
		float: left;
		width: 100%;
		font-size: .9em;
		padding-top: .6%;
		padding-bottom: .6%;
	}/*making the dropdown list full width*/
	
	ul.mainMenu li a {
		width: 100%;
		text-align: center;
	}/*making the dropdown list full width*/

	
	/*HOME PAGE ONLY STYLE CHANGES==================================================*/
	/*resizing the who, what, where section in homepage for tablet*/
	ul#homeHalfWidth > li > p {
    font-size: 1.5em;
	}
	
	h2#clientRow {
	font-size: 1.4em;
	}
	
	ul#leafBullet li{
	font-size: 1.9em;
    }
	
	/*homepage paragraph styling for tablet*/
	p#homeParagraph, p#greenItalic {
		font-size: 2.0em;
	}
	
    p#signature {
		font-size: 2.2em;
	}
	
	p#owner {
	font-size: 1.0em;
	}
	
	h3#industriesHeader {
	line-height: 2em;
	font-size: 2em;
	}/*font change for tablet 850-1100*/
	
	figcaption#industries {
	font-size: 1.4em;
	}/*font change for tablet 850-1100*/
	
	/*styling for the homepage quotes 850-1100px*/
	p#quote1, p#quote3 {
		font-size: 2.0em;
	}
	p#quote2 {
		font-size: 2.0em;
	}
	cite {
		font-size: .9em;
	}
	
	
	
	/*ABOUT PAGE changes for tablet ranges 850-1100px ABOUT PAGE ONLY */
	/*P styles for tablet range 850-1100px===============================================*/	
	p#about {
		font-size: 1.7em;
	}

	h1#about {
		font-size: 2.1em;
		padding: 3% 2%;
		}








	
	/*CONTACT PAGE changes for tablet ranges 850-1100px CONTACT PAGE ONLY========================== */

	/*resizing items on contact page*/
	h4#contactCenter {
		display: none;
	}
	
	div.contactRow1 {
		width: 100%;
	}
	
	div.contactLeft {
		width: 100%;
	}/*changing to full width for tablet*/
	
	div.contactForm {
		width: 100%;
		padding-top: 10%;
		padding-left: 1%;
		padding-right: 1%;
	}/*changing to full width for tablet*/

	/*footer style changes for 850-1100px============================================*/
	/*container for social icons left footer section, this controls
	how far the icons will span across*/
	nav.footerIcons {
		width: 40%;
	}

	/*stacking social icons left to right on the first row*/
	nav.footerIcons li {
		width: 18%;
	}
	
	img#socialIcons {
		height: 40px;
		width: 40px;
	}
			
	/*list containing email and phone only right footer section*/
	/*container for email and phone*/
	nav.footerList {
		width: 40%;
	}

	div#footLogoRow {
		width: 20%;

	}
} /*closing bracket for the 850px-1100px tablet range only===========================================*/




/* ===========================================================================================================================
   Mobile Devices: 0 to 850px 
   ===========================================================================================================================
*/
@media only screen and (max-width: 850px) {
	
	/*increases the header logo a bit*/
	header img#headerImage {
	width: 55%;
	}

	/*pushes the navicon down and containing in the right 35% of the header
	change this to 100% to have full page if desired*/
	nav.horizontal {
		width: 35%;
	}

/*HOMEPAGE ONLY CHANGES FOR MOBILE 0-850PX==========================================*/
	/*First row of home page, changing the font and pic sizes 0-850px only*/	
		img#homePagePic1 {
		width: 100%;
		padding-left: 2%;
		padding-right: 2%;
	}

	/*making the who, what, where section full page on mobile only*/
	ul#homeHalfWidth {
		width: 100%;
	}

	/*styling the who, what, where section for full page on mobile only*/
	ul#homeHalfWidth li{
		padding-left: 0px;
	}

	ul#homeHalfWidth > li > p {
		font-size: 1.4em;
		text-align: center;
	}

	/*reducing the client row font for mobile only*/
	h2#clientRow {
		font-size: 1.2em;
	}	

	h1#homeRow2 {
		font-size: 1.43em;
		padding-left: 1%;
		padding-bottom: 5%;
	}
 	
	ul#leafBullet li{
		font-size: 1.5em;
		padding-left: 1%;
		padding-right: 1%;
		padding-bottom: 2%;
		}
	
	/*paragraph styles for mobile only <850px*/	
	p#homeParagraph, p#greenItalic {
		font-size: 1.7em;
		padding-left: 5%;
		padding-right: 5%;
	}/*reducing font for mobile only*/
	
    p#signature {
		font-size: 1.9em;
	}/*reducing font for mobile only*/
	
	p#owner {
	font-size: .8em;
	}/*reducing font for mobile only*/


	h3#industriesHeader {
		line-height: 1.5em;
		font-size: 1.3em;
	}/*reducing font for mobile only*/

	figcaption#industries {
	font-size: .6em;
	}/*resizing the smallest phone width 360px*/
	
	/*styling for the homepage quotes 0-850px*/
	blockquote {
		padding: 2% 5%;
	}
	p#quote1, p#quote3 {
		font-size: 1.2em;
	}
	p#quote2 {
		font-size: 1.2em;
	}
	cite {
		font-size: .7em;
	}
	
	/*CONTACT PAGE ONLY CHANGES FOR MOBILE 0-850PX==========================================*/
	/*reducing font size on contact page*/
	h1#contact {
		font-size: 1.5em;
	}
	
	div.contactRow1 h4 {
		font-size: 1.2em;
	}
	
	div.contactLeft {
	width: 100%;
	}

	/*located on the contact page*/
	a#contactPhone, a#contactEmail {
		font-size: .9em;
	}	
	
	div.contactForm {
		width: 100%;
		padding-top: 10%;
		padding-left: 1%;
		padding-right: 1%;
	}

	/*form styles for mobile only=========================================*/	
	legend {
		font-size: 1.5em;
	}
	
	
	/*ABOUT PAGE ONLY CHANGES FOR MOBILE 0-850PX==========================================*/
		h1#about {
		font-size: 1.5em;
		padding: 7% 2%;
		}

		h1#about img {
		display: none;
		}/*removing the leaf img before and after the about h1 only*/
		
		/*image smaller shadows for mobile only*/
		img#aboutPic {
		box-shadow: 3px 3px 10px;
		}
		
		p#about {
			display: block;
			width: 100%;
			font-size: 1.2em;
			color: black;
		}
	
		/*footer styles for 0-850px==========================================================================================*/
	/*container for social icons left footer section, this controls
	how far the icons will span across*/
	nav.footerIcons {
		width: 100%;
	}
	
	/*stacking social icons left to right on the first row*/
	nav.footerIcons li {
		width: 15%;
	}

	/*list containing email and phone only right footer section*/
	/*container for email and phone*/
	nav.footerList {
		width: 100%;
	}

	div#footLogoRow {
		width: 100%;
	}/*logo image in footer for mobile only*/
		
	/*re-sizing the social images for mobile*/
	img#socialIcons {
		max-height: 30px;
		max-width: 30px;
	}
	
	img#footLogo {
		height: 140px;
		width: 140px;

		
	}

	/*footer email and phone text styles*/
	a#footerEmailRight, a#footerPhoneRight {
		width: 100%;
		text-align: center;
	}

	/*font size footer email*/
	a#footerEmailRight {
		font-size: 1.27em;
	}

	/*font size footer phone, customer wanted the same length as above email*/
	a#footerPhoneRight {
		font-size: 1.57em;
	}
	} /*PHONE ONLY 0-850PX CLOSING BRACKET*/