/* rps-responsive.css includes new items & definitions for responsive action  ver 5.0 */
/* This builds on definitions within rpslook5def.css */

/* Horizontal navigation for medium & wide displays */
#navhome { width: 14.2%; }	/* width allocated by text length for each menu item */
#navserv { width: 17.2%; }
#navarea { width: 29.2%; }
#navsale { width: 17.2%; }
#navcont { width: 22.2%; }	/* widths add up to 100% */

#navhome, #navserv, #navarea, #navsale, #navcont { margin:0; padding-left:0px; padding-right:0 }

#header { float:left ; width: 100% ; background-color:#b0701c;}

#companyname { float: left ; width: 53% ; height: 128px;}
#companyname p { margin:0 ; padding:0 ; text-align: center;
	font-weight: 700 ; font-size: 2.7em ; line-height: 64px ;
}
#companybreak1 { display: none; }
#companybreak2, #companyserviceword { display: inline; }

#slogatel { float: left ; width: 47% ; height: 128px;}
.sloganbreak { display: inline; }
#slogatel p { margin: 7px 0 0 0; }

#sloganblock { font-size: 1.7em; line-height:41px; }
#phonenum-top { font-size: 1.5em; }
#serviceyears-top , #serviceyears-bottom { clear: both ; float:left ; width: 100% ;}
#serviceyears-bottom { display:none; height: 0 ;}	/* default invisible */

#footer p { margin: 2px 0;}
#footer ul { margin: 2px 0; }
#footer li {
         list-style-type:none; 
         display:inline;
}		 
#footer li + li:before{
    content: " | ";
    padding: 0 5px;
}

/* ==============	Slide-in menu for small display widths =================== */

#sidr { width: 270px ; height: 332px;  margin-top: 20px ; margin-left: 10px;
 background-image: url("piano-bkgnd.png");  background-color: #D94;
 text-align: left ;
}
#sidr { display: none ; }
/* prevent display of slide-out nav until media queries at lower widths activate it */

.sidr{display:block;position:fixed;top:0;height:100%;z-index:999999;width:270px;overflow-x:hidden;overflow-y:auto}
.sidr.right{left:auto;right:-280px}	 	/* match for slide-in structure */
.sidr.left{left:-280px;right:auto}		 /* match for slide-in structure */

#xclose { position: absolute; top: 3px; right: 0 ; margin:0 2px 0 0;
		line-height: 32px ; border: 0
}

#slidernav { list-style-type: none; padding: 35px 0 0 27px; margin:0 ;
}
#slidernav li {
	font-family: Arial, Tahoma, Verdana, Roboto, sans-serif ;
    font-size:22px; line-height:50px; letter-spacing:1px ;
}
#slidernav li a {
	text-decoration:none; color:#FFF;
}

#navsignal { float:right; display:none; width: 0;}
#hambnav { padding: 3px 3px 0 0 ; }

/* Default or starting navigation hamburger has <a> and <img> not visible */
#hambnav { margin: 0 ; padding: 0 ;  visibility: hidden ; }
#slidernav { visibility: hidden; }

/* =========== Slider navigation ends =============== */

/* ============ Media Queries determine changes as display width shrinks ============ */

/* medium, below 870px display width */
@media only screen and (max-width: 870px) {
	#sloganblock { font-size: 1.35em; line-height:40px; }
	#phonenum-top { font-size: 1.2em; }
	#slogatel p { margin:0; }
} /* end media query */


/* Sub-Tablet  750px and below */
@media only screen and (max-width: 750px) {
	#companyname p { margin:0 10px; padding:0 ; text-align: auto;
	font-weight: 700 ; font-size: 2.7em ; line-height: 64px ;
	}	
	#companybreak1 { display: inline; }
	#companybreak2, #companyserviceword { display: none; }
} /* end Sub-Tablet media query */


/* SMALL  610px and below */
@media only screen and (max-width: 610px) {
	#mainnav, #serviceyears-top, #phonenum-top { display:none; }
	#serviceyears-bottom { display:block; }
	#companyname { width: 83% ; height: 90px;}
	#companyname p { font-size: 1.9em ; line-height: 40px ; margin:0 5px;}
	#companyserviceword { display: inline; }
/* Turn on navigation resources for small displays */	
	#navsignal { display:block; width:50px;}
	#sidr { display: block ; }	
	#hambnav { margin: 0 ; padding: 0 ;  visibility: visible ; }
	#slidernav { visibility: visible; }
	#sloganblock { font-size: 1.1em; line-height:1.2em; }
	#slogatel { clear: both ; width: 100% ; height: 1.4em; }
	.sloganbreak { display: none; }
	#contactinfocontent p  { font-size:24px; text-indent:10px;}
} /* end small media query */

/* Handheld  420px and below */
@media only screen and (max-width: 420px) {
	#sloganblock { font-size: 0.82em; line-height:1.2em; }
	#serviceyears-bottom { display:none; }
} /* end Early handheld media query */
