body {
	font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
	margin:0;
	font-size:13px;
	font-size:1.2vw;
	font-size:calc(.35vw + 9px);
	font-weight:normal;
	line-height:130%;
}

.NoWrap {
	white-space:nowrap;
}
	
sup {     
    vertical-align : top;
    font-size: 0.7em;
    position: relative;
    top: -.2em;
}

.BaseBtn {
    font-weight:bold;
    font-size:150%;
    color:white;
    border: 1px #333333 solid;
    border-radius: .45vw;
    padding: 1% 2%;
    margin:1.3%;
    cursor:pointer;
    min-width:50%;
}

.BaseBtn:hover {
    background-color: #cccccc;
    background: linear-gradient(#cccccc, #999999); /* Standard syntax */
}

.GreenMe {
    background: linear-gradient(#237D07, #2FB307); /* Standard syntax top first */ 
}

.RedMe {
    background: linear-gradient(#D90F1D, #FF6C17); /* Standard syntax top first */ 
}

.BlueMe {
    background: linear-gradient(#0E4D8C, #75A3FF); /* Standard syntax top first */ 
}


h1 {
	line-height:130%;
	font-weight:bold;
	margin:0;
	font-size: 19px;
    font-size: 1.6vw;
    font-size: calc(.9vw + 10px);

}

h2 {
	line-height:130%;
	font-size:13px;
	font-size:1.2vw;
	font-size:calc(.35vw + 9px);
	font-weight:normal;
	margin:0;
}

/* same as h1 but not a main headline */	
h3	{
	line-height:130%;
	font-size:15px;
	font-size:1.5vw;
	font-size:calc(.5vw + 10px);	
	font-weight:bold;
	margin:0;
}

/* same as h2 but bold */	
h4	{
	line-height:130%;
	font-size:13px;
	font-size:1.2vw;
	font-size:calc(.35vw + 9px);
	font-weight:bold;
	margin:0;
}

/* same as h3 but a little larger */	
h5	{
	line-height:130%;
	font-size:15px;
	font-size:1.7vw;
	font-size:calc(.7vw + 12px);	
	font-weight:bold;
	margin:0;
}

.Font9 {
	line-height:130%;
	font-size:1.2vw;
	font-size:calc(.35vw + 9px);
	font-weight:normal;
	margin:0;	
}

.RotateMe90 {
	transform:rotate(90deg);
}

.SpecList {
	float:left;
    /*white-space: nowrap;
    padding-right:12%;*/
    line-height:120%;
	font-size: 14px;
	font-size: 1.5vw;
	font-size: calc(.5vw + 7px);
}

.AdvantageList {
	text-align:left;
	font-weight:normal;
	line-height:140%;
	-webkit-margin-before: .5vh;
	-webkit-margin-after: .5vh;
	list-style-image:url('https://share.jrdapps.com/images/check-mark-small.png')
}

ul.NoBullet {
list-style-type: none;
padding: 0;
margin: 0;
text-align:left;
}

li.Check {
background: url('https://share.jrdapps.com/svg/check-mark-small.svg') no-repeat left top;
background-size: 1.8vw;
    background-position-y: 25%;
    padding-left: 2.5vw;
    padding-top: .1vw;
    padding-bottom: .5vw;
}

.HomeFont {
    font-size: 30px;
    font-size: 2.8vw;
    font-size: calc(1.7vw + 12px);
    line-height: 125%;
    letter-spacing: .03vw;
    font-weight:bold;
}

.HomeFont2 {
    font-size: 19px;
    font-size: 1.9vw;
    font-size: calc(1.0vw + 10px);
    line-height: 125%;
}

.HomeFontSmaller {
    font-size: 15px;
    font-size: 1.2vw;
    font-size: calc(.5vw + 9px);
    line-height: 145%;
}
	
.HomeFontSmallerStill {
    font-size: 13px;
    font-size: 1vw;
    font-size: calc(.5vw + 7px);
    line-height: 145%;
}
	
.CartFont {
    line-height:120%;
	font-size: 14px;
	font-size: 1.5vw;
	font-size: calc(.5vw + 7px);
}
	
.FooterFont {
    line-height:120%;
	font-size: 11px;
	font-size: 1vw;
	font-size: calc(.2vw + 7px);
}	

.InputStyle1 {
    border:2px #cccccc solid;
    height:2.5vh;
    line-height:120%;
	font-size: 14px;
	font-size: 1.5vw;
	font-size: calc(.5vw + 7px);
    font-weight: bold;
    text-indent: .5vw;
    color: #311c9b;
    width:33vw;
}

.InputStyle1.RedMe {
    border:2px Red solid;
}

.InputText1 {
    display:table-cell;
    padding:1vw;
    vertical-align: middle;
}

.InputText1.RedMe {
    color:red;	
    font-weight:bold;	
}

.InputText2 {
    display:table-cell;
    padding:1vw;
    vertical-align: middle;
    text-align:left;
}

#CCW {
	
}

#CloseMe1 {
	font-size: 13px;
    font-size: 1.75vw;
    font-size: calc(.6vw + 6px);
    line-height: 125%;
    cursor:pointer;
    font-weight:bold;
    color:#000000;
    white-space:nowrap;
    margin:.8vw;
    padding: 5% 10% 5% 10%;
}

#BuyNow1 {
	font-size: 13px;
    font-size: 1.75vw;
    font-size: calc(.6vw + 6px);
    line-height: 125%;
    position:absolute;
    top:22%;
    left:3%;
    cursor:pointer;
    font-weight:bold;
    color:white;
}


#ItemText {
    cursor:pointer;
	float:left;
	width:25%;
	padding-bottom:1vw;	
}

#ItemPic {
    cursor:pointer;
    float:left;
    width:40%;
    margin-left:2%;	
}

#LowerGraphic {
	padding: 1px 6px 5px 0px;
    width: 30%;
    bottom: 2%;
    position: absolute;
    right: 2%;
}

.StyleBuyBox {
	 border:2px black solid;
	 z-index:4200;
	 background-color:white;
	 width:25vw;
	 height:35vw;
	 display:none;
	 position:fixed;
	 top:25%;
	 right:15vw;
}

#Box2 {	
	border:0px blue solid;
	height:2.5vw;
	width:100%;
	z-index:500;
}

#Box2.normal {	
	position:absolute;
	bottom:0px;
	background-image:url('https://share.jrdapps.com/images/screw-outfitters-masthead-50pct.jpg');
	background-position: bottom right;
    background-repeat: no-repeat;
    background-size: cover;
	/*
	background-color:white;
	opacity:.5;
	*/
}

#Box2.sticky {	
	position:fixed;
	top:0px;
	background-image:url('https://share.jrdapps.com/images/screw-outfitters-masthead-50pct.jpg');
	background-position: bottom right;
    background-repeat: no-repeat;
    background-size: cover;
}

#Box3 {	
	border:0px green solid;
	height:2.5vw;
	width:100%;
	position:absolute;
	bottom:0px;
	background-color:transparent;
	z-index:0;
}	
	
.HeadText {
	font-family:"Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
	font-weight:bold;
	font-size:32px;
	font-size:3vw;
	font-size :calc(2vw + 4px);
	line-height:normal;
	width:100%;
	position:absolute;
	top:15%;
	color:white;
	z-index:50;
	/*
	text-shadow: -4px -4px 4px rgba(16, 33, 61, 1), 4px -4px 4px rgba(16, 33, 61, 1), -4px 4px 4px rgba(16, 33, 61, 1), 4px 4px 4px rgba(16, 33, 61, 1);
	text-shadow: -1px -1px 1px rgba(0, 0, 0, 1), 1px -1px 1px rgba(0, 0, 0, 1), -1px 1px 1px rgba(0, 0, 0, 1), 1px 1px 1px rgba(0, 0, 0, 1);
	*/
	text-shadow: -1px -1px 1px rgba(1, 27, 60, 1), 1px -1px 1px rgba(1, 27, 60, 1), -1px 1px 1px rgba(1, 27, 60, 1), 1px 1px 1px rgba(1, 27, 60, 1);

    -webkit-font-smoothing: subpixel-antialiased;
}

.HeadText.Scale {
	font-size:32px;
	font-size:3vw;
	font-size :calc(2vw + 8px);	
}

.ShadowMe {
	
	text-shadow: -1px -1px 1px rgba(202, 202, 202, 0.3), 1px -1px 1px rgba(202,202,202, 0.3), -1px 1px 1px rgba(202,202,202, 0.3), 2px 2px 4px rgba(20,20,20, 0.9);
    -webkit-font-smoothing: subpixel-antialiased;
    -webkit-text-stroke: 0.2px;
}

.WhiteMe {
	color:white;	
}

.MoreLinksRows1 {
	border:0px #000000 solid;
	padding:.5vw 4vw .5vw 4vw;
	font-weight:bold;
	min-height:1.5vw;
	color:white;
	text-decoration:underline;
}

.MoreLinksExpander {
	line-height:125%;
}

.MoreLinksRows1:hover {
	color:#cccccc;
	cursor:pointer;
}

.MoreLinksRows2 {
	border:0px #000000 solid;
	padding:.5vw 4vw .5vw 2.5vw;
	font-weight:bold;
	min-height:1.5vw;
	color:white;
}

.FooterRows1 {
	border:0px #000000 solid;
	padding:.5vw 4vw .5vw 4vw;
	font-weight:bold;
	min-height:1.5vw;
	/*background-color:#666666;*/
	color:white;
	text-decoration:none;
	cursor:pointer;
}

.FooterRows1:hover {
	color:#cccccc;
	cursor:pointer;
}

.FooterRows2 {
	border:0px #000000 solid;
	padding:1vw 1vw 1vw 3vw;
	font-weight:bold;
	min-height:1.5vw;
	background-color:#666666;
	color:white;
}

.ChooserRows1 {
	border:1px #000000 solid;
	padding:.5vw 3.3vw .5vw 3.3vw;
	font-weight:bold;
	min-height:1.5vw;
	color:black;
	cursor:pointer;
}

.ChooserRows1.NoBorder {
	border:0px #000000 none;
	padding:.5vw 3.3vw .5vw 3.3vw;
	font-weight:bold;
	min-height:1.5vw;
	color:black;
	cursor:pointer;
}

.HomeBoxes1 {
	border:0px #000000 solid;
	padding:.5vw 4vw .5vw 4vw;
	font-weight:bold;
	min-height:1.5vw;
	/*background-color:#666666;*/
	color:black;
}

.CartRows1 {
	border:1px #888888 solid;
	min-height:2.5vw;
	padding:.5vw;
	border-top:1px #FFFFFF solid;
}

.CartRows1f {
	border:1px #888888 solid;
	min-height:1.5vw;
	padding:.5vw;
	border-top:0px #FFFFFF solid;
}

.CartRows1h {
	border:1px #000000 solid;
	padding:.5vw;
	font-weight:bold;
	min-height:1.5vw;
	background-color:black;
	color:white;
}

.CartRows2 {
	border:0px #888888 solid;
	min-height:2.5vw;
	padding:.5vw;
}

.CartRows3 {
	border:0px #888888 solid;
	min-height:1.5vw;
	text-align:right;
	margin-right:-2vw;
	padding:.5vw;
}

.CheckoutHeader {
	border:1px #000000 solid;
	padding:.5vw;
	font-weight:bold;
	min-height:1.5vw;
	background-color:black;
	color:white;
	width:80%;
	margin:0 auto;
}

.CheckoutError {
	border:1px #ffd715 solid;
	padding:.5vw;
	font-weight:bold;
	min-height:1.5vw;
	background-color:#ffd715;
	color:black;
	width:80%;
	margin:0 auto;
}

.GreyBtn {
    background-color: #dddddd;
    font-weight:bold;
    border: 1px #333333 solid;
    border-radius: .45vw;
    padding: .5% 1%;
    margin:1px;
    cursor:pointer;
    background: linear-gradient(#dddddd, #aaaaaa); /* Standard syntax */
}

.GreyBtn:hover {
    background-color: #cccccc;
    background: linear-gradient(#cccccc, #999999); /* Standard syntax */
}

.TimeToOrderPopUp {
    border: 1px black solid;
    position: absolute;
    top: -20px;
    right: 5px;
    background-color: white;
    padding: 4px;
    z-index:500;
}

.FreeShippingPopUp {
    border: 1px black solid;
    position: absolute;
    top: -40px;
    right: 5px;
    background-color: white;
    padding: 4px;
    z-index:500;
}

/* set the width for things based on device */

.PopWidth {
    width: 40%;
}

.ScrewPicWidth {
    width:50%;	
}   


.TextContainer {
	position:absolute;
	/*top:13vw;*/
	left:5%;
	width:90%;
	margin:0 auto;
	border: 0px black none;	
}

.TDPic {
	max-width:50vw;
	max-height:60vh;
	border:5px white solid;
}

div.Container {
	width:100%;
	margin:0 auto;
	background-color:#ffffff;
}

#TheHeader {
	width:100%;
	position:relative;
}

#TheHeader.stick {
    margin-top: 0 !important;
    position: fixed;
    top: -250px;
    z-index: 10000;
}

div.Notification {
	background-color:#999999;
	width:100%;
	min-height:25px;
	border-bottom:2px black solid;
}

div.PageBody {
	 position:relative;
	 top:0;
	 height:100%;
	 text-align:center;
	 margin:0 auto; width:100%;
	 min-height:55vh;
	 background-color:#FFFFFF;
}

div.BodyCopy {
	position:relative;
	padding: 5vh 0 3vh 0;
	width:75vw;
	text-align:left;
	margin: 0 auto;
}

p.Testimonial {
	padding:1% 4% 1% 4%;
}

/* top navigation stuff */

div.TopNavTable {
    display: inline-block;
}

.HideShow0 {	
    display:table-cell;
}

.HideShow1 {	
    display:table-cell;
}

.HideShow2 {	
    display:table-cell;
}

.HideShow3 {	
    display:none;
}

.HideShow4 {	
    display:none;
}

div.TopNavTD {
	font-family: 'Titillium Web', sans-serif;
	color:#000033;
	text-align:center;
	font-weight:bold;
	white-space:nowrap;
	float:none;
	line-height: 2.2vw;
	font-size: 16px;
    font-size: 1.4vw;
    font-size: calc(.75vw + 10px);
    padding:0 2vw 0 3vw;
}

a:link.TopNav {
	font-weight: bold;
	color: #10213D;
	text-decoration: none;
}

a:visited.TopNav {
	font-weight: bold;
	color: #10213D;
	text-decoration: none;
}

a:hover.TopNav {
	font-weight: bold;
	color: #294168;
	text-decoration: none;
	text-shadow: -1px -1px 1px rgba(234, 234, 234, .6), 1px -1px 1px rgba(234, 234, 234, .6), -1px 1px 1px rgba(234, 234, 234, .6), 1px 1px 1px rgba(234, 234, 234, .6);
    -webkit-font-smoothing: subpixel-antialiased;
}

b.TopNavAlt	{
	font-weight: bold;
	color: #244D90;
	text-decoration: none;
}

/* footer navigation stuff */

div.FooterNavTable {
	font-family:Arial, Helvetica, sans-serif;
	border-collapse:collapse;
	text-align:center;
	margin:0 auto;
	min-height:4vh;
	width:40vw;	
}

div.FooterNavTD {
	color:black;
	text-align:center;
	font-weight:bold;
	white-space:nowrap;
	background-color:#666666;
	float:left;
	line-height: 350%;
	width:10vw;
}

a:link.FootNav {
	font-weight: bold;
	color: #FFFFFF;
	text-decoration: none;
}

a:visited.FootNav {
	font-family:Arial, Tahoma, Helvetica, sans-serif;
	font-weight: bold;
	color: #FFFFFF;
	text-decoration: none;
}

a:hover.FootNav {
	font-family:Arial, Tahoma, Helvetica, sans-serif;
	font-weight: bold;
	color: #cccccc;
	text-decoration: none;
}

b.FootNavAlt {
	font-family:Arial, Tahoma, Helvetica, sans-serif;
	font-weight: bold;
	color: #aaaaaa;
	text-decoration: none;
}



button.Orange {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 35px;
	color: #FFFFFF;
	padding: 10px 10px;
	background-color: #FF6411;
	-webkit-border-radius: .8vw;
	border-radius: .8vw;
	border: .4vw solid #000000;
	height:17vw;
	width:24vw;
	cursor:default;
}

button.Blue {
	color: #FFFFFF;
	padding: 10px 10px;
	background-color: #043776;
	-webkit-border-radius: .4vw;
	border-radius: .4vw;
	cursor:pointer;
    border: 0 white solid;
   	font-size: 12px;
	font-size: 2vw;
	font-size: calc(.65vw + 7px);
}

.BlueMe {
	color:#043776;
}

.BlueMe:hover {
	color:#10213D;
}

@media only screen and (max-width: 800px) {
    /* For top nav drop-offs */
    
.HideShow2 {	
	display:none;
}

.HideShow4 {	
	display:block;
}

}  /*end @media*/

@media only screen and (max-width: 620px) {
    /* For top nav drop-offs */
    
.HideShow1 {	
	display:none;
}

.HideShow3 {	
	display:block;
}

}  /*end @media*/

@media only screen and (max-width: 554px) {
    /* For mobile phones: */

.MoreLinksExpander {
	line-height:200%;
}

.HeadText.Scale {
	font-size:32px;
	font-size:3vw;
	font-size :calc(2vw + 3.5px);	
}

   
div.PageBody {
	 position:relative;
	 top:0;
	 height:100%;
	 text-align:center;
	 margin:0 auto; width:100%;
	 min-height:65vh;
	 background-color:#FFFFFF;
}

/* top navigation stuff - phone */

div.TopNavTable {
    display: inline-block;
}


#Box2 {	
	border:0px blue solid;
	height:4vw;
	width:100%;
	z-index:500;
}

#Box2.normal {	
	position:absolute;
	bottom:-4vw;
	background-image:url('https://share.jrdapps.com/images/screw-outfitters-masthead-50pct.jpg');
	background-position: bottom right;
    background-repeat: no-repeat;
    background-size: cover;
	/*
	background-color:white;
	opacity:.5;
	*/
}

#Box2.sticky {	
	position:fixed;
	top:0px;
	background-image:url('https://share.jrdapps.com/images/screw-outfitters-masthead-50pct.jpg');
	background-position: bottom right;
    background-repeat: no-repeat;
    background-size: cover;
}

#Box3 {	
	border:0px green solid;
	height:4vw;
	width:100%;
	position:absolute;
	bottom:0px;
	background-color:transparent;
	z-index:0;
}


div.TopNavTD {
	font-family: 'Titillium Web', sans-serif;
	color:#000033;
	text-align:center;
	font-weight:bold;
	white-space:nowrap;
	float:none;
	line-height: 3.5vw;
	font-size: 17px;
    font-size: 1.5vw;
    font-size: calc(.8vw + 10px);
    padding:0 1.5vw 0 1.5vw;
}
/* other things to fit a phone */

.PopWidth {
    width: 70%;
}

.ScrewPicWidth {
    width:100%;	
}   

.InputStyle1 {
    border:2px #cccccc solid;
    height:3.5vh;
    line-height:120%;
	font-size: 14px;
	font-size: 1.5vw;
	font-size: calc(.5vw + 9px);
    font-weight: bold;
    text-indent: .5vw;
    color: #311c9b;
    width:63vw;
}

li.Check {
background: url('https://share.jrdapps.com/svg/check-mark-small.svg') no-repeat left top;
background-size: 4vw;
    padding-left: 6vw;
    padding-top: .2vh;
    background-position-y: 25%;
}

/* footer navigation stuff - phone */


td.FootNav {
	color:black;
	text-align:center;
	font-weight:bold;
	white-space:nowrap;
	background-color:#666666;
	width:100vw;
}

}  /*end @media*/