/* Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
caption,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
td, th {padding:5px;}
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.cf {
*zoom: 1;
}
/*Universal*/
* { box-sizing:border-box; }
html, body {font-family: "Open Sans", "Trebuchet MS", Arial, Verdana, sans-serif; font-size:16px;
line-height: 1.2; }
img, input {width:100%;}
input {padding:5px;}
input{-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;}
button{-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
cursor:pointer;
}
a {display:inline-block; color: #009bdf; text-decoration: none;cursor: pointer;}
nav a {width:100%;}
h1, h2, h3, h4, h5, h6 {text-transform: uppercase;font-weight: bold;}
h1 {font-size: 25px; color: #009bdf;}
.container {width:95%; margin:auto; max-width: 1000px}
.logo {background: url(/themes/site_themes/pyramex/images/pyramex-logo-20170622.png) no-repeat; width:201px; height: 125px; margin-bottom:10px;display:block;}
input.search {padding:8px 5px 8px 30px;
background:white url(/themes/site_themes/pyramex/images/search.png) left center no-repeat;border:2px solid #009bdf;}
footer li {display: inline-block;}
nav a {text-transform: uppercase}
/*Primary */
/*Primary*/
nav.primary {height:50px; z-index: 5;clear:both;}
input.search {float:left;margin:7px 0;}
nav.primary ul {position: relative;float:right; text-align: right;width:100%;}
nav.primary li {border-right:1px solid #909193;padding:0;margin:0;text-align: center;}
nav.primary li a {color:#666666; padding:0 15px 0 12px;font-size: 18px; line-height:46px;}
nav.primary.cf li > a {font-size: 14px}
nav.primary.cf li li > a {font-size: 13px}
nav.primary a:hover, nav.secondary a:hover, nav.primary .open a.go {color:#009bdf;}
nav.primary p {background:white; font-size: 13px; color: #009bdf; line-height: 1.2;text-align: left;font-weight: bold;}
nav.primary li a {font-weight: bold;}
.contact {width: 213px; padding:15px; display:block; background: white;}
nav.primary .contact a {font-size: 13px; color: #009bdf; text-align: left; padding:0; line-height: 1.3; background-image:none; background-color: white; height:auto;}
/*footer*/
footer {padding:10px; }
footer p {color: #666666; font-size: 12px;margin-top:10px;}
footer ul {width: 100%; display: inline-block;}
footer nav a {line-height: 48px}
footer nav li {display:inline-block; width:19%;text-align: center;}
footer ul li button {width:100%; font-size: 10px; display: block; padding:5px 0; border:1px solid #535353; }
footer ul li:last-child{float:right;}
.country a.logo {background: url(/themes/site_themes/pyramex/images/country-logo.png) no-repeat; width: 182px; height: 90px; background-size: contain; }
@media (min-width: 768px) {
.main.container {margin-bottom: 50px;}
.country {max-width: 990px; width:100%; margin:100px auto 0; background: url(/themes/site_themes/pyramex/images/country.png) center center no-repeat; background-size:cover; padding:50px;}
.country h1 {display:block; clear: both; color: white; font-size: 96px; }
.country h2 {text-transform: none; font-weight: normal; font-size: 36px; width:80%; color:white; line-height: 34px;}
.country nav {background: url(/themes/site_themes/pyramex/images/whitebg.png) repeat; padding:10px; margin-top:40px;}
.country section {width: 25%; float:left; padding:0 5px;}
.country h3 {font-size: 16px; color: #009bdf; }
.country a {font-size: 14px; text-transform: none; color:black;}
.country a:hover {text-decoration: underline;}
.country ul {margin-bottom: 20px; display:block;}
footer p {width: 55%; float:left;}
footer .social {width:45%;text-align: left; float:right;}
html, body {background:#000 url(/themes/site_themes/pyramex/images/bg.png) no-repeat center center fixed; }
header {
background:url(/themes/site_themes/pyramex/images/headerbg.jpg) center no-repeat ;
background-size: cover;
padding:20px 0 0;}
.logo {float:left;}
.desktop {display:block;}
nav li {display:inline-block;}
a.vg {background: url(/themes/site_themes/pyramex/images/vg.png) no-repeat; background-size: contain; width:110px; height:20px;}
a.vgtactical {background: url(/themes/site_themes/pyramex/images/vg-tactical.png) no-repeat; background-size: contain; width:113px; height:20px;}
a.carhartt {background: url(/themes/site_themes/pyramex/images/carhartt.png) no-repeat; background-size: contain; width:137px; height:20px;}
a.du {background: url(/themes/site_themes/pyramex/images/du.png) no-repeat; background-size: contain; width:127px; height:28px;}
a.vg:hover {background-image: url(/themes/site_themes/pyramex/images/vg-hover.png);}
a.vgtactical:hover {background-image: url(/themes/site_themes/pyramex/images/vgtactical-hover.png);}
a.carhartt:hover {background-image: url(/themes/site_themes/pyramex/images/carhartt-hover.png);}
a.du:hover {background-image: url(/themes/site_themes/pyramex/images/du-hover.png);}
/*Primary */
/*Primary*/
nav.primary li:last-child {border-right:none;}
nav.primary input {width: 33%;}
nav.primary {
background: #d3d3d3 url(/themes/site_themes/pyramex/images/nav.jpg) repeat-x;
border-bottom: 3px solid #0096d6;
padding:0 12px;}
nav.primary li.products, nav.primary li.con, nav.primary li.industrial {padding-right:20px;}
nav.primary div.con {display:none;}
nav.primary li li {
border:none;
text-align: left;
display: block;
padding-top:3px;
}
nav.primary li div.products section {
float:left;
width:20%;
text-align: left;
border-left: 1px solid white;
padding:0 10px;
font-size: 13px;
color:white;
font-weight: bold;
height:150px;
}
nav.primary li div.industrial section{
font-size: 13px;
}
nav.primary li div.products section.first, nav.primary li div.industrial section.first{border:none;}
nav.primary li ul a, nav.primary li section a {text-align:left;font-size: 13px; line-height: 1; color:white;font-weight: normal;text-transform: none;}
nav.primary li ul a:hover, nav.primary li section a:hover {color:black;}
li.products > a:after, li.con > a:after, li.industrial > a:after {
position: absolute;
content: url(/themes/site_themes/pyramex/images/closed.png);
padding:2px 10px 0px 10px;
}
nav.primary section h2 a {text-transform: uppercase;font-weight: bold; padding:0;}
nav.primary ul div {position: absolute;background:#009bdf;margin:3px auto 0;max-width: 1000px;right:0;line-height: 1.75;z-index: 500;}
nav.primary ul div ul {padding:15px;}
nav.primary ul section ul {padding:0;}
nav.primary ul div.products {width: 100%;padding:30px; display:none;}
nav.primary ul div.industrial {width: 60%;padding:30px; display:none;}
li.products.open > a:after, li.con.open > a:after, li.industrial.open > a:after {
position: absolute;
content: url(/themes/site_themes/pyramex/images/open.png);
padding:2px 10px 0px 10px;
}
/*Secondary*/
nav.secondary {float:right; position: relative; height: 120px; width: 70%; padding-top: 20px; }
nav.secondary ul {float:right;}
nav.secondary li {line-height: 1.2; border-right: 2px solid white;}
nav.secondary li:last-child {border-right:none;}
nav.secondary a {font-size: 14px; color:white; padding:5px; font-weight: bold;}
nav.secondary li:not(:last-child) a {padding-right: 12px;}
nav.secondary ul.brands {position: absolute; bottom: -11px; right: 0; max-width:100%; text-align: right; border: 1px solid white; height: 50px; background: black; padding: 8px 10px 10px 10px;}
nav.secondary ul.brands li {border-right: 0; padding: 0 7px;}
footer ul li.input {margin-left:7px; margin-top:3px }
footer ul {text-align: right;}
a.facebook, a.twitter, a.linkedin, a.youtube, a.vimeo {display:block;float:left;height:23px;width:24px;margin:3px 0 0 0;text-indent:-9999px;background-image:url('/themes/site_themes/pyramex/images/social.png');}
a.twitter {
background-position:0px -23px;
}
a.facebook {
background-position:-33px 0px ;
}
a.linkedin {
background-position:-65px 0px ;
}
a.youtube {
background-position:-99px 0px ;
}
a.vimeo {
background-position:-132px 0px ;
}
}
@media (min-width : 901px)
and (max-width : 1000px) {
nav.primary li a {font-size: 1em}
nav.primary.cf li a {font-size: .7em}
}
@media (min-width : 768px)
and (max-width : 900px) {
nav.primary a {font-size: .8em}
nav.primary.cf li a {font-size: .6em}
nav.primary li a {color:#666666; padding:0 12px 0 12px;font-size: 12px; line-height:46px;}
a.vg {background: url(/themes/site_themes/pyramex/images/vg.png) no-repeat; background-size: contain; width:95px; height:18px;}
a.vgtactical {background: url(/themes/site_themes/pyramex/images/vg-tactical.png) no-repeat; background-size: contain; width:100px; height:18px;}
a.carhartt {background: url(/themes/site_themes/pyramex/images/carhartt.png) no-repeat; background-size: contain; width:110px; height:18px;}
a.du {background: url(/themes/site_themes/pyramex/images/du.png) no-repeat; background-size: contain; width:105px; height:25px;}
}
@media (max-width: 767px) {
nav.secondary ul.blue li, nav.secondary ul.blue li a {line-height: 1; height: auto; padding-top: 3px; padding-bottom: 3px;}
nav.secondary ul.blue {padding: 10px 0;}
.country ul, .country h1 {display:none;}
.country {padding:15px;}
.country h2 {padding:10px;}
header {margin:20px 0 10px 0;}
.logo {margin:0 auto 10px;}
nav a, .country nav h3 {height: 48px; background: #d3d3d3 url(/themes/site_themes/pyramex/images/nav.jpg) repeat-x; line-height: 48px; clear: both; width: 100%;text-align: center; text-transform: uppercase; font-weight: bold}
nav .Products a {height:auto; clear: both; width: 100%;text-align: center; text-transform: uppercase; font-weight: bold; background: -webkit-linear-gradient(#dbdcdf, #b5b6bb); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#dbdcdf, #b5b6bb); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#dbdcdf, #b5b6bb); /* For Firefox 3.6 to 15 */
background: linear-gradient(#dbdcdf, #b5b6bb); /* Standard syntax */}
nav.primary ul li li a {background-image:none; background-color:#009bdf; color:white; border-bottom:thin solid white;}
nav.primary .products section h2 a, .country nav a, nav.primary .industrial section h2 a {background-image:none; background-color:#009bdf; color:white; border-bottom:thin solid white;}
nav.primary .products section ul li a, nav.primary .industrial section ul li a{background-image:none; background-color:#fff; color:#009bdf; border-bottom:thin solid #009bdf; text-transform: none}
.contact {width: 100%; padding:15px; display:block; background: white;font-size: 13px; color: #009bdf; line-height: 1.2;text-align: left;font-weight: bold;}
nav.primary .container {width:100%;}
nav.primary ul li.products ul, nav.primary ul li.industrial ul {display:none;}
nav.secondary ul.brands li {width: 50%; float:left;}
nav.secondary a.vg {background: url(/themes/site_themes/pyramex/images/vg2.png) no-repeat; background-size: contain;width:100%; display:block;}
nav.secondary a.vgtactical {background: url(/themes/site_themes/pyramex/images/vgtactical2.png) no-repeat; background-size: contain;width:100%; display:block;}
nav.secondary a.carhartt {background: url(/themes/site_themes/pyramex/images/carhartt2.png) no-repeat; background-size: contain;width:100%; display:block;}
nav.secondary a.du {background: url(/themes/site_themes/pyramex/images/du2.png) no-repeat; background-size: contain; width:100%; display:block;}
nav.secondary li.vg, nav.secondary li.vgtactical, nav.secondary li.carhartt, nav.secondary li.du {display:block; margin:10px auto; }
nav.secondary a {background: none; }
nav.secondary ul {text-align: center; background: }
nav.secondary li {display:inline-block; width:auto;text-align: center;font-size:13px;padding-right:10px;}
nav.secondary li:last-child {float:none;}
footer ul li.input {width:100%; padding:10px; }
footer button {padding: 5px;}
footer input {width:100%; display: inline-block; margin-bottom:20px;}
footer {text-align: center}
.desktop {display:none}
footer .social {margin-top:10px;}
a.facebook, a.twitter, a.linkedin, a.youtube, a.vimeo {display:block;float:left;height:40px;width:40px;margin:3px 0 0 0;text-indent:-9999px;background-image:url('/themes/site_themes/pyramex/images/social-big.png');}
a.twitter {
background-position:0px -40px;
}
a.facebook {
background-position:-53px 0px ;
}
a.linkedin {
background-position:-108px 0px ;
}
a.youtube {
background-position:-163px 0px ;
}
a.vimeo {
background-position:-219px 0px ;
}
}
strong {font-weight: bold}
em {font-style: italic; }
button.fil {font-size: .8em; border: thin solid gray;}
img.checkbox {width: 13px; height:14px; margin-right:4px;}
table {max-width: 100%;}
/* autoComplete styles */
.autocomplete-suggestions {
text-align: left; cursor: default; border: 1px solid #ccc; border-top: 0; background: #fff; box-shadow: -1px 1px 3px rgba(0,0,0,.1);
/* core styles should not be changed */
position: absolute; display: none; z-index: 9999; max-height: 254px; overflow: hidden; overflow-y: auto; box-sizing: border-box;
}
.autocomplete-suggestion { position: relative; padding: 0 .6em; line-height: 23px; white-space: nowrap; overflow: hidden; font-size: 1.02em; color: #333; }
.autocomplete-suggestion b { font-weight: normal; color: #1f8dd6; }
.autocomplete-suggestion.selected { background: #f0f0f0; }