/* Classic C4C Nick Sharpe nickswebworks.com 042518 */

body {min-width: 100%;height:100%;font:300 1em/1.5em 'Open Sans', Helvetica, Helvetica Neue, Arial, sans-serif;color: #666;background-color: #65A5EF;/*background-image: url('http://classiccashforcars.com/images/Redondo-beach16x752.jpg');background-repeat: no-repeat;background-position: top;background-attachment: fixed;*/}
em{font-style:italic;font-weight:500;}
h1{font-size:2.5em;margin:0;padding:0px;}			
h2{font-size:2em;margin:0;padding:0;line-height:1.2em;}
h3{font-size:1.6;margin:10px 0 5px 0;padding:0;font-weight:bold;}
h4{font-size:1.2;padding:0;font-weight:bold;}
h4 em{font-style:oblique;}
p{font-size:1em;margin:0;padding:0;}
.bold{font-weight:bold;}
 @font-face {font-family: avenir ; src: url( 'http://nickswebworks.com/fonts/avenir_65_medium.otf' ) format("opentype"); }      
    /* Then use it like you would any other font */  
.avenir{font-family: Avenir, Arial, helvetica, sans-serif;  }

.quote{font-size: .9em;font-style: italic;font-family: Georgia, serif;}
div.shell{width: 98vw;height: auto;}
/* HEADER  */
header{position:relative;top:0;left: 0;width:80%;max-width:1366px;height:60px;margin:0 auto;padding:0;background-color:transparent;}
#logo {position: relative;top: 2%;left: 1%;}
#logo a {width: 510px; height: 50px; display: block; background: url('http://classiccashforcars.com/images/classicC4C-logo-1.png') no-repeat 0 0/cover;  text-indent: -8000px;}
h2#logo {display: none;}

.search {position: absolute;top: 10px;right: 40px; width: 240px;}
ul {list-style-type:none;}
ul.socials{position:relative;top:10px;left:0px;margin:0;padding:0;width:440px;height:60px;border: 1px solid #c0c0c0;}
ul.socials li{display:inline;margin:0 10px 0 0;padding:0;color:#fff;}
ul.socials li a{float:left;text-decoration:none;margin:0 10px 0 0;padding:0;font-size: 1.3em;color: #fff;font-family: Open Sans, Arial, helvetica, sans-seriferif;border: none;}
ul.socials li a:hover{color:orange;}
.phonebox{float: right;top:0;width:30%;}
.phonebox p.toptel{top: 0;margin: 0;padding: 0;font:normal 700 2em/1em Arial, Helvetica Sanserif;color: #00b52a;text-shadow: 1px 1px 1px #000;}
.phonebox p{margin: 0;}
a.tel{color: #00b52a;text-decoration: none;}
 /* NAV STYLE */
nav#navigation {position: relative;top: 0;left: 0;width: 100%;max-width: 1366px;height: auto;margin: 0 auto; padding:0;font-weight: 500;background-color:transparent;box-shadow: none;}

/* RESPONSIVE NAV STYLE */
  /* Remove margins and padding from the list, and add a black background color */
ul.topnav {position: relative;left: 0;list-style-type: none;margin: 0 auto;padding: 0;width: 80%;max-width: 1366px;overflow: hidden;background-color:#666;}

/* Float the list items side by side */
ul.topnav li {float: left;}

/* Style the links inside the list items */
ul.topnav li a {display: inline-block;color: #f2f2f2;text-align: center;padding: 14px 16px;text-decoration: none;transition: 0.3s;font-size: 90%;}

/* Change background color of links on hover */
ul.topnav li a:hover {background-color: #555;}

/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {display: none;}

@media screen and (max-width:800px) {
  ul.topnav li:not(:first-child) {display: none;}
  ul.topnav li.icon {float: right;display: inline-block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
@media screen and (max-width:800px) {
  ul.topnav.responsive {position: relative;left: 5%;}
  ul.topnav.responsive li.icon {position: absolute;right: 0;top: 0;}
  ul.topnav.responsive li {float: none;display: inline;}
  ul.topnav.responsive li a {display: block;text-align: left;}
}
/* END NAV */
/* MAIN */ 
 section{width: 100%;height:auto;overflow: hidden;}
 section h2{margin-left:10%;}
 article{width:80%;max-width: 1366px;height:auto;margin:0 auto;padding:0;background-color: rgba(255, 255, 255, 0.7);border-radius:12px;overflow: hidden;}

.post-cnt{float: left;width:60%;height: auto;padding: 2%;}
.post-img{float: right;width: 35%;height: auto;text-align: center;}
.post-img img{width: 100%;height:auto;}
.post-img figure{width: 100%;height:auto;margin: 0 auto;/*border:1px solid green;*/}

/***************************** FEATURE LINK BOX ***********************************************/

#feature{position:relative;top:0;margin:0 auto;padding:0;width:90%;height:auto;
-moz-border-radius: 12px 0 0 12px;-khtml-border-radius:  12px 0 0 12px;-webkit-border-radius: 12px 0 0 12px;border-radius:  12px 0 0 12px;}

#feature ul{display:block;}
#feature ul li{margin:0 auto;padding:10px 0;width:100%;height:auto;font-size:1em;font-weight:bold;text-align:left;background-color:#2bb0e7;margin-bottom: 5px;border-radius: 10px;
background: #00b25a;}

/******************CSS3 BUTTONS *****************/

p.getstarted{text-decoration: none;color:#fff;width:auto;height:auto;margin:0;padding:1%;font:700 1.3em/1em 'Open Sans', arial, helvetica sans-serif;border:1px solid #999;
border-radius:7px;
-webkit-box-shadow: 3px 3px 5px #333; /* Safari and Chrome */
box-shadow: 3px 3px 5px #333;
background: rgb(64,196,39); /* Old browsers */
background: -moz-linear-gradient(top, rgba(180,221,180,1) 0%, rgba(126,215,109,1) 17%, rgba(88,203,67,1) 33%, rgba(70,198,46,1) 67%, rgba(64,196,39,1) 83%, rgba(0,36,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(180,221,180,1)), color-stop(17%,rgba(126,215,109,1)), color-stop(33%,rgba(70,198,46,1)), color-stop(67%,rgba(0,138,0,1)), color-stop(83%,rgba(0,87,0,1)), color-stop(100%,rgba(0,36,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(180,221,180,1) 0%,rgba(126,215,109,1) 17%,rgba(70,198,46,1) 33%,rgba(0,138,0,1) 67%,rgba(0,87,0,1) 83%,rgba(0,36,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(180,221,180,1) 0%,rgba(126,215,109,1) 17%,rgba(70,198,46,1) 33%,rgba(0,138,0,1) 67%,rgba(0,87,0,1) 83%,rgba(0,36,0,1) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, rgba(180,221,180,1) 0%,rgba(126,215,109,1) 17%,rgba(70,198,46,1) 33%,rgba(0,138,0,1) 67%,rgba(0,87,0,1) 83%,rgba(0,36,0,1) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4ddb4', endColorstr='#002400',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, rgba(180,221,180,1) 0%,rgba(131,199,131,1) 17%,rgba(126,215,109,1) 33%,rgba(0,138,0,1) 67%,rgba(0,87,0,1) 83%,rgba(0,36,0,1) 100%); /* W3C */
}
p.getstarted a{color: #fff;text-decoration: none;}
p.getstarted a:hover{display:block;color:orange;}

/* *** FOOTER ** */
footer{position:relative;top:20px;left:0;width: 100%;height:auto;padding:0;background-color:#e1e1e1;}			
footer p{color:#24749f;margin:0px;font-size: .75em;letter-spacing: 2px;text-align:center;padding:0;}
footer a:link{color:#24749f;}			
footer a:visited{color: #0060ff;}
footer a:hover{color: #00FFFF;}
footer p img{vertical-align:sub;}
/*************************************** FOOTNAV  ********************************************/
		
ul{list-style-type:none;}
ul#footnav{position:relative;top:30px;margin:0 auto;width:60%;height:25px;padding:0;/*border: 2px dashed green;*/}
ul#footnav li{float:left;margin:0;padding:0 0 3px 0;color:#3d73b3;font-family:Arial; text-transform:uppercase;font-size:.85em;}
ul#footnav li a{text-decoration:none;padding:0 10px 10px 15px;}
ul#footnav li a:hover{color:#ffc19f;text-shadow:1px 1px 1px #000;}						
ul#footnav li.current a{color:#6699ff;font-weight:bold;} 
ul#footnav li a:visited {color: #24749f;}

/* MEDIA QUERIES */  /* ********************************************** MEDIA QUERIES  *********************************  */
@media only screen and (max-width: 800px) {
div.shell{width: 95vw;height: auto;}
header{position:relative;top:0;left: 0;width:90%;height:auto;margin:0 auto;padding:0;background-color:transparent;/*border: 1px dashed red;*/}
#logo a {float: none;width:90VW; height: 60px; display: block; background: url('http://classiccashforcars.com/images/classicC4C-logo-1.png') no-repeat 0 0/cover;}
#logo h1, .logo h2{text-indent:-9999px;}
.search {position: absolute;top: 10px;right: 40px; width: 240px;}
ul {list-style-type:none;}
ul.socials{position:relative;top:10px;left:0px;margin:0;padding:0;width:440px;height:60px;border: 1px solid #c0c0c0;}
ul.socials li{display:inline;margin:0 10px 0 0;padding:0;color:#fff;}
ul.socials li a{float:left;text-decoration:none;margin:0 10px 0 0;padding:0;font-size: 1.3em;color: #fff;font-family: Open Sans, Arial, helvetica, sans-seriferif;border: none;}
ul.socials li a:hover{color:orange;}
article{width:98%;margin: 0 auto;padding: 0;}
.post-cnt{float: none;width:90%;height: auto;margin: 0 auto;/*border: 1px dotted purple;*/}
.post-img{position: relative;width: 90%;height: auto;margin: 0 auto;/*border: 1px dotted red;*/text-align: center;}

/**FEATURE LINK BOX **/
#feature{position:relative;top:0;margin:0 auto;padding:0;width:90%;height:auto;-moz-border-radius: 12px 0 0 12px;-khtml-border-radius:  12px 0 0 12px;-webkit-border-radius: 12px 0 0 12px;border-radius:  12px 0 0 12px;}
ul#feature-links{display:block;}
ul#feature-links li{margin:0;padding:10px 0 10px 10px;width:260px;height:auto;font-size:1em;font-weight:bold;text-align:left;background-color:#2bb0e7;margin-bottom: 5px;border-radius: 10px;
background: #00b25a;}
/*background: url(images/navigation.png) repeat-x 0 0; box-shadow: 0px -1px 2px rgba(0,0,0,0.1); -moz-box-shadow: 0px -1px 2px rgba(0,0,0,0.1); -webkit-box-shadow: 0px -1px 2px rgba(0,0,0,0.1); -o-box-shadow: 0px -1px 2px rgba(0,0,0,0.1);}*/
#feature ul#feature-links li a{text-decoration:none;color:#fff;padding-bottom: 10px;margin-bottom: 0px;border:none;border-radius: 10px;}
#feature ul li a:hover{display:block;text-decoration:none;color:#0000ff;background-color:#B93B8F;margin:-10px 0 0px;padding:10px 0 0 0;width:260px;height:30px;font-size:1em;font-weight:bold;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;border:1px solid #999;border-radius:7px;-webkit-box-shadow:4px 5px 5px #888888; /* Safari and Chrome */
box-shadow: 4px 5px 5px #888888;background-color: #00b52a;}
</* END FEATURE LINK BOX*/ > 

ul#footnav{position:relative;top:30px;margin:0 auto;width:100%;}

}
@media screen and (max-width:980px) {
  ul#footnav{position:relative;top:30px;margin:0 auto;width:100%;}
}