/* NOTES
No selector = Type Selector: Selects all elements within the tree
Example: To target , use body{}
. = Class Selector: Selects every instance of element having the Class attribute, so it can be applied to multiple elements on a page
Example: To target , use .hilight{} and .indent{}
# = ID Selctor: Selects only elements having a specific ID attribute, so it can only be applied once per page
Example: To target
, use #navigation{} or div#navigation{}
END NOTES */
/* START BREAKPOINT 0: Width 1981px & larger */
@charset "utf-8";
a.ectlink{
color: black !important;
text-decoration: none !important;
}
body{
background-color: white;
height: auto;
margin-left: 25%;
margin-right: 25%;
}
div.header{
float: left;
width: 100%;
height: auto;
}
div.topleftcontainer{
float: left;
width: 13%;
margin-left: 2%;
height: 142px;
}
.topleftlinks{
display:none;
}
#cssmenu {
font-family: 'Exo 2', sans-serif !important;
line-height: 1 !important;
background: black !important;
float:left !important;
margin:0 auto !important;
cursor: pointer !important;
}
table.smallmenu_table{
background-color: black;
width: 100%;
margin-top: 25px;
}
th.smallmenu_header{
border-radius: 10px;
color: white;
background-color: black;
font: 12pt Arial;
font-weight: bold;
text-align: center;
}
table.smallcontact_table{
background-color: black;
width: 100%;
border-radius: 10px;
margin-top: 25px;
}
th.smallcontact_header{
border-radius: 10px;
color: black;
background-color: white;
font: 12pt Arial;
font-weight: bold;
text-align: center;
}
td.smallcontact_table{
border-radius: 10px;
color: white;
background-color: white;
font: 10pt Verdana;
font-weight: bold;
text-align: center;
}
a.smallcontact_table{
color: white;
}
a.smallcontact_table:hover{
color: red;
}
div.headerlogo{
float: left;
width: 70%;
height: 142px;
background: url(https://www.godfathergarage.com/images/logogfgbanner.png);
background-size: contain;
background-repeat: no-repeat;
background-position-x: center;
background-position-y: top;
}
div.socialmediabar{
display: none !important;
width: 98%;
margin-right: 2%;
float: left;
}
div.socialmedia{
float: left;
width: 15%;
height: 137px;
background-color: white;
text-align: right;
padding-top: 5px !important;
}
div.ebay{
float: right;
background-color: white;
text-align: right;
margin-right: 20px;
}
div.ebaybar{
display: none;
float: right;
height: auto;
background-color: white;
text-align: right;
margin-right: 20px;
}
div.instagram{
float: right;
height: auto;
background-color: white;
text-align: right;
}
div.instagrambar{
display: none;
float: right;
height: auto;
background-color: white;
text-align: right;
}
div.menubar{
width: 100%;
}
div.menubarcontainer{
width: 100%;
height: 50px;
background-color: white;
display: inline-block;
margin-top: 10px;
}
.menubarcontainer ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #333333;
display: flex;
justify-content: center;
}
.menubarcontainer ul li a {
display: block;
color: white;
padding-top: 14px;
padding-bottom: 14px;
padding-left: 55px;
padding-right: 55px;
font-family: verdana;
text-decoration: none;
}
.menubarcontainer ul li a:hover {
color: RGB(255,35,43);
background-color: #111111;
}
div.main{
float: left;
width: 100%;
background-color: white;
min-height: 700px !important;
}
div#indexvideo{
width: 100%;
text-align: center;
margin-top: 10px;
background: url(https://www.godfathergarage.com/images/helmstruckbackground.jpg);
background-repeat: no-repeat;
background-position-x: center;
background-position-y: top;
display: flex !important;
justify-content: center !important;
}
div.videocontainer{
height: 880px !important;
width: 450px !important;
background-color: black !important;
text-align: center !important;
border: 5px solid gray !important;
border-radius: 12px !important;
}
div.homepage{
width: 100%;
background-color: white;
float: left;
}
div.homepagetitle{
font-family: Verdana !important;
text-align: center !important;
width: 100% !important;
float: left !important;
}
div.homepagecontainer{
width: 100%;
background-color: white;
float: left;
text-align: center !important;
}
img.fr-fic.fr-dii{
width: 60% !important;
margin-left: 20% !important;
margin-right: 20% !important;
float: left !important;
}
div.footercontainer{
width: 100%;
float: left;
color: gray;
text-align: left;
border-top: 2px solid;
border-top-color: gray;
margin-top: 50px;
margin-bottom: 100px;
padding-top: 10px;
padding-left: 1%;
font-family: arial;
font-size: 14px;
}
div.products{
width: 100%;
margin-top: 10px;
}
div.product{
width: 96% !important;
padding-left: 2% !important;
padding-right: 2% !important;
padding-top: 20px !important;
padding-bottom: 20px !important;
float: left !important;
border-top: 1px solid gray !important;
}
div.prodimage{
float: left !important;
text-align: left !important;
width: 175px !important;
}
img.prodimage{
max-height: 150px !important;
max-width: 150px !important;
}
div.prodname{
text-align: left !important;
font-family: arial !important;
font-size: 18px !important;
float: left !important;
width: 50% !important;
font-weight: bold !important;
margin-bottom: 5px !important;
}
div.prodprice{
text-align: left !important;
font-size: 16px !important;
font-family: arial !important;
font-weight: bold !important;
color: green !important;
float: left !important;
width: 50% !important;
margin-bottom: 20px !important;
}
span.pagebarquo:hover{
color: RGB(255,35,43) !important;
}
div.pagenumbers{
width: 90% !important;
margin-left: 5% !important;
margin-right: 5% !important;
text-align: center !important;
font-size: 14px !important;
padding-top: 10px !important;
padding-bottom: 10px !important;
float: left !important;
color: black !important;
background-color: white !important;
cursor: pointer !important;
}
span.pagebarprev{
padding-right: 5px !important;
padding-left: 5px !important;
}
span.pagebarprev:hover{
color: RGB(255,35,43) !important;
}
span.pagebarnum{
padding-left: 10px !important;
padding-right: 10px !important;
}
span.pagebarnum:hover{
color: RGB(255,35,43) !important;
}
span.pagebarnext{
padding-left: 5px !important;
padding-right: 5px !important;
}
span.pagebarnext:hover{
color: RGB(255,35,43) !important;
}
span.currpage{
color: green !important;
font-weight: bold !important;
font-size: 18px !important;
text-decoration: underline !important;
}
div.catnavigation{
display: none !important;
}
div.proddetail{
margin-top: 25px !important;
}
div.detailname{
float: left !important;
width: 70% !important;
text-align: left !important;
font-family: arial !important;
font-size: 12px !important;
color: black !important;
}
div.detailprice{
float: left !important;
width: 50% !important;
margin-top: 10px !important;
color: green !important;
font-family: arial !important;
font-size: 18px !important;
font-weight: bold !important;
}
div.detaildescription{
float: left !important;
width: 65% !important;
color: black !important;
line-height: 1.5 !important;
font-family: Verdana !important;
padding-top: 10px !important;
}
div.detailimage{
float: left !important;
width: 300px !important;
text-align: center !important;
}
img.detailimage{
max-width: 250px !important;
}
div.imagenavigator{
margin-top: 10px !important;
overflow: hidden !important;
}
.detailimagenavigator{
font-size: 12px !important;
white-space: unset !important;
}
input.detailprevimg{
margin-right: 20px !important;
}
input.detailnextimg{
margin-left: 20px !important;
}
input.ectbutton,button.ectbutton{
background:#006ABA !important;
color:#FFF !important;
padding:6px 12px !important;
border:0 !important;
border-radius:4px !important;
font-family:FontAwesome,sans-serif !important;
cursor:pointer !important;
font-weight:normal !important;
-webkit-appearance:none !important;
}
input.ectbutton:hover,button.ectbutton:hover{
color: RGB(255,35,43);
background-color: #111111;
}
div.ectopaque{
overflow-y: auto !important;
position: fixed !important;
width: 100% !important;
height: 100% !important;
background-color: RGBA(140,140,150,0.5) !important;
top: 0px !important;
left: 0px !important;
Z-index: 10000 !important;
}
div.giantthumbcontainer{
text-align: center !important;
}
div.giantimg{
width: 78% !important;
text-align: center !important;
flex-grow: unset !important;
}
div.giantimgheader{
margin-top: 10px !important;
}
div.giantimgname{
display: none !important;
}
div.giantimgclose{
top: 40px !important;
right: 4% !important;
}
div.contact{
width: 100%;
text-align: center;
margin-top: 10px;
background: url(https://www.godfathergarage.com/images/helmstruckbackground.jpg);
background-repeat: no-repeat;
background-position-x: center;
background-position-y: top;
display: flex !important;
justify-content: center !important;
height: 750px !important;
}
div.contactcontainer{
height: 210px !important;
width: 450px !important;
background-color: black !important;
text-align: center !important;
border: 5px solid gray !important;
border-radius: 12px !important;
padding-top: 40px !important;
}
div.contactheader{
float: left !important;
width: 100% !important;
color: white !important;
font-family: verdana !important;
font-size: 24px !important;
text-align: center !important;
}
div.catnavandcheckout{
display: none !important;
}
div.prodnoexist{
color: white !important;
text-align: center !important;
font-size: 10px !important;
padding-top: 40px !important;
}
div.notfoundremoved{
display: none !important;
}
div.notfoundtrysearch{
display: none !important;
}
div.notfoundinputcntnr{
display: none !important;
}
div.categories{
width: 100%;
}
div.category{
width: 250px !important;
}
div.catimage{
text-align: center !important;
}
div.catnavcheckout{
display: none !important;
}
div.catname{
text-align: center !important;
font-family: verdana !important;
}
div.prodimagenavigator{
display: none !important
}
div.prodaddtocart{
display: none !important;
}
div.prodquantity1div{
display: none !important;
}
.prodpricelabel{
display: none !important;
}
div.proddetaillink{
display: none !important;
}
.prodinstock{
font-size: 14px !important;
font-family: arial !important;
}
.prodinstocklabel::after{
display: none !important;
}
.extraimgnumof::before{
display: none !important;
}
.extraimgnumof::after{
display: none !important;
}
div.detailinstock{
float: right !important;
width: 70% !important;
margin-top: 10px !important;
font-family: arial !important;
}
div.detailquantity{
float: right !important;
width: 70% !important;
margin-top: 10px !important;
}
div.detailquantitytext{
float: left !important;
font-family: arial !important;
margin-top: 7px !important;
margin-right: 7px !important;
}
div.detailquantitytext::after{
content: ":" !important;
}
div.detailquantity1div{
float: left !important;
}
div.detailaddtocart{
float: right !important;
width: 70% !important;
margin-top: 10px !important;
}
.quantity1input{
width: 50% !important;
font-family: arial !important;
font-size: 16px !important;
}
div.quantity1div{
width: 50px !important;
height: 30px !important;
}
span.extraimage{
display: none;
}
span#extraimcnt0{
display: none;
}
span.extraimgnumof{
display: unset !important;
}
h1{
margin: unset;
}
div.aboutus01{
font-size: 1.8em;
font-weight: bold;
margin: 10px 0px 35px 0px;
width: 86%;
float: left;
}
div.aboutusthanks{
margin-left: 10%;
text-align: left;
font-family: arial;
font-weight: bold;
font-size: 10pt;
float: left;
width: 25%;
min-height: 800px;
}
div#contacttitle{
font-size: 24px;
font-weight: bold;
width: 100%;
text-align: center;
margin-bottom: 15px;
}
#fcf-form {
display:block;
}
.fcf-body {
margin-top: 25px;
font-family: -apple-system, Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
text-align: left;
background-color: #fff;
padding-left: 30px;
padding-right: 30px;
padding-bottom: 10px;
padding-top: 10px;
border: 1px solid #ced4da;
border-radius: 0.25rem;
max-width: 75%;
}
.fcf-form-group {
margin-bottom: 1rem;
}
.fcf-input-group {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: stretch;
align-items: stretch;
width: 100%;
}
.fcf-form-control {
display: block;
width: 100%;
height: calc(1.5em + 0.75rem + 2px);
padding: 0.375rem 0.75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
outline: none;
border-radius: 0.25rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.fcf-form-control:focus {
border: 1px solid #313131;
}
select.fcf-form-control[size], select.fcf-form-control[multiple] {
height: auto;
}
textarea.fcf-form-control {
font-family: -apple-system, Arial, sans-serif;
height: auto;
}
label.fcf-label {
display: inline-block;
margin-bottom: 0.5rem;
}
.fcf-credit {
padding-top: 10px;
font-size: 0.9rem;
color: #545b62;
}
.fcf-credit a {
color: #545b62;
text-decoration: underline;
}
.fcf-credit a:hover {
color: #0056b3;
text-decoration: underline;
}
.fcf-btn {
display: inline-block;
font-weight: 400;
color: #212529;
text-align: center;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: transparent;
border: 1px solid transparent;
padding: 0.375rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: 0.25rem;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
.fcf-btn {
transition: none;
}
}
.fcf-btn:hover {
color: #212529;
text-decoration: none;
}
.fcf-btn:focus, .fcf-btn.focus {
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
.fcf-btn-primary {
color: #fff;
background-color: #007bff;
border-color: #007bff;
}
.fcf-btn-primary:hover {
color: #fff;
background-color: #0069d9;
border-color: #0062cc;
}
.fcf-btn-primary:focus, .fcf-btn-primary.focus {
color: #fff;
background-color: #0069d9;
border-color: #0062cc;
box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
}
.fcf-btn-lg, .fcf-btn-group-lg>.fcf-btn {
padding: 0.5rem 1rem;
font-size: 1.25rem;
line-height: 1.5;
border-radius: 0.3rem;
}
.fcf-btn-block {
display: block;
width: 100%;
}
.fcf-btn-block+.fcf-btn-block {
margin-top: 0.5rem;
}
input[type="submit"].fcf-btn-block, input[type="reset"].fcf-btn-block, input[type="button"].fcf-btn-block {
width: 100%;
}
/* BREAKPOINT 1: Width 1641px - 1980px */
@media screen and (max-width:1979px){
.menubarcontainer ul li a {
padding-left: 38px;
padding-right: 38px;
}
}
/* BREAKPOINT 2: Width 1441px - 1640px */
@media screen and (max-width:1640px){
body{
margin-left: 10%;
margin-right: 10%;
}
div.socialmedia{
width: 15%;
margin-right: unset;
height: 142px;
background-color: white;
text-align: right;
}
.menubarcontainer ul li a {
padding-left: 36px;
padding-right: 36px;
}
div.detailname{
width: 60% !important;
}
div.detailprice{
width: 60% !important;
}
div.detaildescription{
width: 60% !important;
}
}
/* BREAKPOINT 3: Width 721px - 1000px */
@media screen and (max-width:1000px){
body{
margin-left: unset !important;
margin-right: unset !important;
}
div.menubar{
display: none;
}
.topleftlinks{
display:unset !important;
}
div.socialmedia{
display: unset !important;
}
div.socialmediabar{
display: unset !important;
}
div.ebay{
display: none !important;
}
div.instagram{
display: none !important;
}
div.ebaybar{
display: unset !important;
}
div.instagrambar{
display: unset !important;
}
div.topleftlinks{
display: unset !important;
width: 20% !important;
float: left !important;
}
ul.menu{
width: 60% !important;
margin-left: 50px !important;
}
td.smallmenu_table{
color: white !important;
background-color: #333333 !important;
font: 18px Verdana !important;
font-weight: bold !important;
text-align: center !important;
height: 50px !important;
}
nav a{
font: 18px Verdana !important;
}
td.smallmenu_table:hover{
background-color: #111111 !important;
}
a.smallmenu_table{
color: white !important;
}
a.smallmenu_table:hover{
color: red !important;
background-color: #111111 !important;
}
div.products{
width: unset !important;
margin-top: unset !important;
}
div.product{
padding: unset !important;
}
div.prodimage{
width: 100% !important;
text-align: center !important;
padding-top: 20px !important;
}
div.prodname{
height: unset !important;
width: 100% !important;
text-align: center !important;
}
div.prodprice{
font-family: arial !important;
width: 100% !important;
text-align: center !important;
}
div.pagenumbers{
width: 80% !important;
margin-left: 10% !important;
margin-right: 10% !important;
margin-top: 45px !important;
}
div.detailimage{
width: 100% !important;
padding-bottom: 30px !important;
}
div.detailname{
width: 100% !important;
text-align: center !important;
}
div.detailprice{
width: 100% !important;
text-align: center !important;
margin-top: unset !important;
}
div.detaildescription{
width: 80% !important;
margin-left: 10% !important;
margin-right: 10% !important;
padding-top: unset !important;
}
input.detailprevimg{
margin-right: 10px !important;
}
input.detailnextimg{
margin-left: 10px !important;
}
div.detaildescription{
font-size: 14px !important;
}
div.footercontainer{
padding-left: 5%;
}
.ect-mn-toggle{
background-color: white !important;
}
}
/* BREAKPOINT 4: Width 720px & smaller */
@media screen and (max-width:720px){
div.header{
height: 105px !important;
padding-top: 15px !important;
}
div.headerlogo{
float: right !important;
height: 80px !important;
width: 75% !important;
margin-right: 5% !important;
}
div#indexvideo{
background-image: unset !important;
}
div.proddetail{
margin-top: -5px !important;
}
.detailimagenavigator{
font-size: 10px !important;
}
div.detaildescription{
width: 90% !important;
margin-left: 5% !important;
margin-right: 5% !important;
}
input.detailprevimg{
margin-right: 0px !important;
}
span.extraimgnumof{
padding-left: 20px !important;
padding-right: 20px !important;
font-size: 14px !important;
}
input.detailnextimg{
margin-left: 0px !important;
}
}