/* styles for the homepage */

.product-shell {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
    grid-row-gap:40px;
}

@media only screen and (max-width : 720px) {
	.product-shell {grid-template-columns: 1fr; grid-row-gap:20px;}
}

.product {font:12px Arial; display: flex; flex-direction: column;}
.call-to-action {margin-top:auto;}
.product h2 	{color:#000; font:bold 19px Arial; padding-bottom:5px;}
a.more			{ margin-top:8px; background-color:#c00; color:#fff !important; border:1px solid #dadada;display:inline-block;cfont-family:arial;font-size:16px;font-weight:bold;padding:6px 10px;text-decoration:none;}
a.more:hover	{background:-webkit-gradient(linear,left top,left bottom,color-stop(0.05,#dfdfdf),color-stop(1,#ededed));background:-moz-linear-gradient(center top,#dfdfdf 5%,#ededed 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf',endColorstr='#ededed');background-color:#dfdfdf; color:#b00 !important;}
a.more:active	{position:relative;top:1px}
span.price		{display:block; margin:24px 0; color:#111; font-size:16px;}
#quote{background:#e5e1d0; margin:40px 0; text-transform:uppercase; padding:10px; text-align:center; font:bold 16px Arial !important;}
#needMoreInfo {clear:both; margin:20px 0; background:#c00; color:#fff; padding:10px; text-align:center; font:bold 16px Arial;}
#twitter {margin-top:20px;}
#twitter h2 {display:block; float:left;}
#facebookButton {display:block; float:right;}

div.cl {clear:both; height:1px;}

#aboutTheCompany {float:left; width:429px;}
#aboutTheCompany h2,#twitter h2,#videoShell h2, #whyGetTint h2 {color:#000; font:bold 20px Arial; padding-bottom:5px;}
#aboutTheCompany p {font-size:14px; line-height:1.5;}
#aboutTheCompany .phone {font-weight:bold;}

#location {margin-top:20px; overflow:auto;}
#location p {float:left;}
#location strong {display:block; margin-top:10px; font-size:12px;}
#googleMapThumb {float:left; margin-right:20px; width:85px; height:85px; display:block; border:1px solid #999;}

#videoShell {float:left; width:429px; margin-right:20px; border-right:1px solid #e5e1d0; padding-right:20px;}
#youTubeVideo {border:1px solid #b00; width:420px; height:315px; }

/* added 7.18.12 by mjvysock */
#antiFogShell h2 { font:bold 30px Trebuchet MS; margin-bottom:5px; }
#antiFogShell {border-bottom:2px solid #e5e1d0;padding:20px 0;margin:20px 0;  border-top:2px solid #aaa; overflow:auto;}
#antiFogShell sup {text-transform:uppercase; color:#070; font:bold italic 12px Arial; vertical-align:top; background:#cfc; padding:0 5px;}
#antiFogShell p {font:14px/1.5 Arial; margin-bottom:10px;}

#whyGetTint {margin-bottom:20px;}

#fogCopy { width:449px; padding-right:20px; font:14px/1.5 Arial; margin-bottom:10px; float:left;}
#fogPic {float:left; width:432px;}
#fogPic img {width:430px; border:1px solid #777;}

#pinterest {clear:both; text-align:right}

#pinterest span {color: #C00; font-weight: bold; top: -7px; position: relative; padding-right: 8px;}