/* Theme Name: Brekford Author: SmartBug Media Author URI: http://www.smartbugmedia.com */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- 1.0 Reset 2.0 Typography 3.0 Elements 4.0 Forms 5.0 Navigation 5.1 Links 5.2 Menus 6.0 Accessibility 7.0 Alignments 8.0 Clearings 9.0 Widgets 10.0 Content 10.1 Posts and pages 10.2 Asides 10.3 Comments 11.0 Media 12.0 Header 13.0 Footer 14.0 Media Queries --------------------------------------------------------------*/ /*-------------------------------------------------------------- 1.0 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, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { border: 0; font-family: inherit; font-size: 100%; font-style: inherit; font-weight: inherit; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } html { font-size: 62.5%; /* Corrects text resizing oddly in IE6/7 when body font-size is set using em units http://clagnut.com/blog/348/#c790 */ overflow-y: scroll; /* Keeps page centered in all browsers regardless of content height */ -webkit-text-size-adjust: 100%; /* Prevents iOS text size adjust after orientation change, without disabling user zoom */ -ms-text-size-adjust: 100%; /* www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ */ } *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { background: #fff url(img/headerbg.jpg) 0 0 no-repeat; } article, aside, details, figcaption, figure, footer, header, main, nav, section { display: block; } ol, ul { list-style: none; } table { /* tables still need 'cellspacing="0"' in the markup */ border-collapse: separate; border-spacing: 0; } caption, th, td { font-weight: normal; text-align: left; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } a:focus { /*outline: thin dotted;*/ outline: none; } a:hover, a:active { outline: 0; } a img { border: 0; } .col-xs-5ths, .col-sm-5ths, .col-md-5ths, .col-lg-5ths { position: relative; min-height: 1px; padding-right: 10px; padding-left: 10px; } .col-xs-5ths { width: 20%; float: left; } @media (min-width: 768px) { .col-sm-5ths { width: 20%; float: left; } } @media (min-width: 992px) { .col-md-5ths { width: 20%; float: left; } } @media (min-width: 1200px) { .col-lg-5ths { width: 20%; float: left; } } /*-------------------------------------------------------------- 2.0 Typography --------------------------------------------------------------*/ @font-face { font-family: 'NeutraTextTFBoldSC'; src: url('fonts/neutratexttfboldsc.eot'); src: url('fonts/neutratexttfboldsc.eot') format('embedded-opentype'), url('fonts/neutratexttfboldsc.woff2') format('woff2'), url('fonts/neutratexttfboldsc.woff') format('woff'), url('fonts/neutratexttfboldsc.ttf') format('truetype'), url('fonts/neutratexttfboldsc.svg#NeutraTextTFBoldSC') format('svg'); } @font-face{ font-family: 'Oswald'; src: url('fonts/oswald-regular-webfont.eot'); src: url('fonts/oswald-regular-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/oswald-regular-webfont.woff2') format('woff2'), url('fonts/oswald-regular-webfont.woff') format('woff'), url('fonts/oswald-regular-webfont.ttf') format('truetype'), url('fonts/oswald-regular-webfont.svg#webfont') format('svg'); } body, button, input, select, textarea { color: #404040; font-family: 'Droid Sans', sans-serif; font-size: 20px; font-size: 2.0rem; line-height: 1.5; } h1, h2, h3, h4, h5, h6 { clear: both; margin: 0 0 20px; } h1 { font-family: 'NeutraTextTFBoldSC', sans-serif; font-size: 50px; } h2, h3 { font-family: 'Oswald', sans-serif; } h2 { color: #e26f00; font-size: 34px; } h2.h2large { color: #000; font-size: 50px; } h3 { font-size: 28px; } h4 { font-size: 24px; } p { margin-bottom: 20px; } b, strong { font-weight: bold; } dfn, cite, em, i { font-style: italic; } blockquote { margin: 0 1.5em; } address { margin: 0 0 1.5em; } pre { background: #eee; font-family: "Courier 10 Pitch", Courier, monospace; font-size: 15px; font-size: 1.5rem; line-height: 1.6; margin-bottom: 1.6em; max-width: 100%; overflow: auto; padding: 1.6em; } code, kbd, tt, var { font: 15px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; } abbr, acronym { border-bottom: 1px dotted #666; cursor: help; } mark, ins { background: #fff9c0; text-decoration: none; } sup, sub { font-size: 75%; height: 0; line-height: 0; position: relative; vertical-align: baseline; } sup { bottom: 1ex; } sub { top: .5ex; } small { font-size: 75%; } big { font-size: 125%; } /*-------------------------------------------------------------- 3.0 Elements --------------------------------------------------------------*/ hr { background-color: #ccc; border: 0; height: 1px; margin-bottom: 1.5em; } .clear, .clearfix { clear: both; } ul, ol { margin: 0 0 1.5em 1.5em; } ul { list-style: disc; } ol { list-style: decimal; } li > ul, li > ol { margin-bottom: 0; margin-left: 1.5em; } dt { font-weight: bold; } dd { margin: 0 1.5em 1.5em; } img { height: auto; /* Make sure images are scaled correctly. */ max-width: 100%; /* Adhere to container width. */ } figure { margin: 0; } table { margin: 0 0 1.5em; width: 100%; } th { font-weight: bold; } .sep { display: inline-block; } .inline-list { list-style: none; } .inline-list li { display: inline; } .no-margin { margin: 0; } .text-center { text-align: center; } /*-------------------------------------------------------------- 4.0 Forms --------------------------------------------------------------*/ button, input, select, textarea { font-size: 100%; /* Corrects font size not being inherited in all browsers */ margin: 0; /* Addresses margins set differently in IE6/7, F3/4, S5, Chrome */ vertical-align: baseline; /* Improves appearance and consistency in all browsers */ } .button, button, input[type="button"], input[type="reset"], input[type="submit"] { border: none; color: #fff; text-decoration: none; text-transform: uppercase; background: #0658a8; display: inline-block; padding: 15px 45px; } .button:visited { color: #fff; } .button:hover, .button:focus, button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover { color: #fff; text-decoration: none; } input[type="checkbox"], input[type="radio"] { padding: 0; /* Addresses excess padding in IE8/9 */ } input[type="search"] { -webkit-appearance: textfield; /* Addresses appearance set to searchfield in S5, Chrome */ -webkit-box-sizing: content-box; /* Addresses box sizing set to border-box in S5, Chrome (include -moz to future-proof) */ -moz-box-sizing: content-box; box-sizing: content-box; } input[type="search"]::-webkit-search-decoration { /* Corrects inner padding displayed oddly in S5, Chrome on OSX */ -webkit-appearance: none; } button::-moz-focus-inner, input::-moz-focus-inner { /* Corrects inner padding and border displayed oddly in FF3/4 www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */ border: 0; padding: 0; } input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="password"], input[type="search"], textarea { color: #3a3a3a; border: 1px solid #acacac; width: 100%; } input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, textarea:focus { color: #3a3a3a; } input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="password"], input[type="search"] { padding: 10px; } textarea { overflow: auto; /* Removes default vertical scrollbar in IE6/7/8/9 */ padding-left: 3px; vertical-align: top; /* Improves readability and alignment in all browsers */ width: 100%; height: 200px; } select { color: #3a3a3a; width:100%; background: #fff; border: 1px solid #acacac; padding: 10px; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; position: relative; cursor: pointer; background-image: url(img/select.png); background-position: right 10px center; background-repeat: no-repeat; } select:hover { -moz-filter: url("data:image/svg+xml;utf8,#grayscale"); -o-filter: url("data:image/svg+xml;utf8,#grayscale"); -webkit-filter: grayscale(100%); filter: gray; filter: url("data:image/svg+xml;utf8,#grayscale"); } #main form ul li { background: none; padding-left: 0; } ul.gform_fields { list-style: none; padding: 0; margin: 0 -15px 30px; } ul.gform_fields li { margin: 0 0 30px 0; } .gform_title { font-size: 34px; color: #e26f00; } .gfield_required { padding-left: 3px; color: #ff7d00; } .gform_validation_container { display: none; visibility: hidden; } .gform_footer { text-align: center; clear: both; } form .validation_error, form .gfield_error .validation_message { padding: 20px 20px 20px 40px; margin-bottom: 15px; border-width: 1px solid #ce9e9e; background: #f5dfdf; } form ul.gform_fields li.col-md-6:nth-child(2n) { clear: right; } form ul.gform_fields li.col-md-6:nth-child(2n+1) { clear: left; } /*-------------------------------------------------------------- 5.0 Navigation --------------------------------------------------------------*/ /*-------------------------------------------------------------- 5.1 Links --------------------------------------------------------------*/ a, a:visited { color: #165796; -webkit-transition: all .3s; transition: all .3s; } a:hover, a:focus, a:active { color: #165796; } /*-------------------------------------------------------------- 5.2 Menus --------------------------------------------------------------*/ .main-navigation { clear: both; display: block; float: left; width: 100%; margin-top: 10px; } .main-navigation ul { list-style: none; margin: 0; padding-left: 0; float: right; } .main-navigation li { float: left; position: relative; } .main-navigation ul.menu>li { margin-left: 25px; } .main-navigation ul.menu>li:first-child { margin-left: 0px; } .main-navigation ul.menu>li>a { display: block; text-decoration: none; color: #000; font-family: 'Oswald', sans-serif; text-transform: uppercase; font-size: 18px; } .main-navigation ul.menu>li>a:hover { text-decoration: underline; } .main-navigation ul ul { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); float: left; position: absolute; left: -999em; z-index: 99999; padding: 10px; background: #fff; } .main-navigation ul ul ul { left: -999em; top: 0; } .main-navigation ul ul a { width: 158px; color: #000; font-size: 16px; display: block; } .main-navigation ul #menu-item-61 ul a { width: 300px; } .main-navigation ul ul li { } .main-navigation li:hover > a { } .main-navigation ul ul :hover > a { } .main-navigation ul ul a:hover { } .main-navigation ul li:hover > ul { left: auto; } .main-navigation ul ul li:hover > ul { left: 100%; } .main-navigation .current_page_item > a, .main-navigation .current-menu-item > a, .main-navigation .current_page_ancestor > a { } /* Small menu */ .menu-toggle { display: none; float: right; padding-top: 5px !important; padding-bottom: 5px !important; } @media screen and (max-width: 767px) { .site-header .container, .site-header .container .col-lg-8 { padding: 0; } .site-header .container .row { margin: 0; } .site-branding { padding: 0 15px; } .main-navigation { background: #0658a8; } .menu-toggle, .main-navigation.toggled .nav-menu { display: block; } .main-navigation ul.menu { display: none; padding-bottom: 10px; } .main-navigation ul.sub-menu { display: block; } .main-navigation ul li { width: 100%; margin: 0 !important; } .main-navigation ul ul { box-shadow: none; float: left; position: relative; left: 0; padding: 0; width: 100%; } .main-navigation ul.menu>li>a, .main-navigation ul ul a { color: #fff; width: 100% !important; display: block; padding-left: 15px; padding-right: 15px; } .main-navigation ul ul a { padding-left: 30px; } .main-navigation a { background: #0658a8; padding-top: 4px; padding-bottom: 4px; } .main-navigation .current-menu-item>a, .main-navigation a:hover { background: #033667; text-decoration: none; } } .site-main .comment-navigation, .site-main .paging-navigation, .site-main .post-navigation { margin: 0 0 1.5em; overflow: hidden; } .comment-navigation .nav-previous, .paging-navigation .nav-previous, .post-navigation .nav-previous { float: left; width: 50%; } .comment-navigation .nav-next, .paging-navigation .nav-next, .post-navigation .nav-next { float: right; text-align: right; width: 50%; } /*-------------------------------------------------------------- 6.0 Accessibility --------------------------------------------------------------*/ /* Text meant only for screen readers */ .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; } .screen-reader-text:hover, .screen-reader-text:active, .screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; color: #21759b; display: block; font-size: 14px; font-weight: bold; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; /* Above WP toolbar */ } /*-------------------------------------------------------------- 7.0 Alignments --------------------------------------------------------------*/ .alignleft { display: inline; float: left; margin-right: 1.5em; } .alignright { display: inline; float: right; margin-left: 1.5em; } .aligncenter { clear: both; display: block; margin: 0 auto; } /*-------------------------------------------------------------- 8.0 Clearings --------------------------------------------------------------*/ .clear:before, .clear:after, .entry-content:before, .entry-content:after, .comment-content:before, .comment-content:after, .site-header:before, .site-header:after, .site-content:before, .site-content:after, .site-footer:before, .site-footer:after { content: ""; display: table; } .clear:after, .entry-content:after, .comment-content:after, .site-header:after, .site-content:after, .site-footer:after { clear: both; } /*-------------------------------------------------------------- 9.0 Widgets --------------------------------------------------------------*/ .widget { margin: 0 0 1.5em; } /* Make sure select elements fit in widgets */ .widget select { max-width: 100%; } /* Search widget */ .widget_search .search-submit { display: none; } /*-------------------------------------------------------------- 10.0 Content --------------------------------------------------------------*/ /*-------------------------------------------------------------- 10.1 Posts and pages --------------------------------------------------------------*/ .site-main ul { list-style: none; margin-left: 0; padding: 0; } .site-main ul li { background: url(img/bullet.png) left 12px no-repeat; padding-left: 12px; } .sticky { display: block; } .hentry { margin: 0 0 1.5em; } .byline, .updated:not(.published) { display: none; } .single .byline, .group-blog .byline { display: inline; } .page-content, .entry-content, .entry-summary { margin: 1.5em 0 0; } .page-links { clear: both; margin: 0 0 1.5em; } .entry-header { text-align: center; padding: 20px 0; border-top: 1px solid #b5b5b6; border-bottom: 1px solid #b5b5b6; margin-bottom: 30px; } .entry-header.banner-image { border-bottom: none; } .entry-header h1 { margin: 0; } /*-------------------------------------------------------------- 10.2 Asides --------------------------------------------------------------*/ .blog .format-aside .entry-title, .archive .format-aside .entry-title { display: none; } /*-------------------------------------------------------------- 10.3 Comments --------------------------------------------------------------*/ .comment-content a { word-wrap: break-word; } .bypostauthor { display: block; } /*-------------------------------------------------------------- 10.4 Homepage --------------------------------------------------------------*/ .banner h1 { font-family: 'Oswald', sans-serif; } .banner p { font-size: 36px; } .banner.section a { font-size: 20px; } .bold-line:first-line { font-weight: 700; } .section { background-repeat: no-repeat; padding: 74px 0; font-size: 24px; } .bgcenter { background-position: left center; } .bgbottom { background-position: left bottom; } .bgcover { background-size: cover; } .section.nocover { background-size: auto !important; } .section-right { background-position: right bottom; } .bgpattern { background-repeat: repeat; background-size: auto !important; } .section-quote blockquote { color: #fff; font-family: 'Oswald', sans-serif; text-align: center; font-size: 34px; } .section-quote blockquote p { margin-bottom: 0.5em; } .section-quote blockquote p:last-child { font-size: 30px; font-weight: 300; margin: 0; } .section a { color: #fff; text-decoration: none; text-transform: uppercase; background: #0658a8; display: inline-block; padding: 15px 37px } .clients { color: #07325c; font-family: 'Oswald', sans-serif; list-style: none; margin: 0; } .clients li { float: left; width: 48%; margin-right: 4%; margin-bottom: 5px; background: url(img/arrow.png) left 11px no-repeat; padding-left: 20px; } .clients li:nth-child(2n) { margin-right: 0; } .s2img { position: relative; } .s2img img { position: absolute; bottom: 0; left: -260px; } /*-------------------------------------------------------------- 10.5 Misc. Pages --------------------------------------------------------------*/ .firstquote { font-size: 132px; color: #0658a8; font-family: 'Oswald', sans-serif; float: left; margin-left: -65px; margin-top:-40px; } .team-content { font-size: 28px; } article.person { border-bottom: 1px solid #ccc; margin-bottom: 60px; padding-bottom: 40px; } .section-pagination{ text-align: center; text-transform: uppercase; font-weight: 700; padding-bottom: 60px; } /*-------------------------------------------------------------- 10.6 Resources --------------------------------------------------------------*/ #filters { margin: 0 0 20px; padding: 0; list-style: none; border-bottom: 1px solid #b7b7b7; font-size: 20px; font-weight: 700; } #filters li { float:left; background: none; padding-left: 0; } #filters li span { display: block; padding: 5px 20px; margin-right: 10px; text-decoration:none; color: #fff; cursor: pointer; border: 1px solid #0658a8; border-bottom: none; background: #0658a8; {{ transition(".3s") }} } #filters li span:hover, #filters li span.active { background: #fff; color: #e26f00; border: 1px solid #b7b7b7; border-bottom: none; } #resources { } .resource { /*float: left; width: 48%; margin: 1%;*/ display: none; /*float: none;*/ } .clearRight { clear: right; } .clearLeft { clear: left; } .resource-image-wrapper { margin-bottom: 20px; text-align: center; position: relative; overflow: hidden; display: inline-block; position: relative; width: 100%; } .resource-image-wrapper:after { padding-top: 56.25%; display: block; content: ''; } .resource-image { position: absolute; top: 0; bottom: 0; left: 0; right: 0; /*background: rgb(0,140,200);*/ } .resource-image img { } .resource h4 { margin-bottom: 10px; } .resource-meta { font-size: 22px; } /*-------------------------------------------------------------- 10.7 Products --------------------------------------------------------------*/ .product { padding-bottom: 80px; border-bottom: 1px solid #ccc; margin-bottom: 80px; } .products .product:last-child { padding-bottom: 0; border: none; margin-bottom: 0; } .product.noborder { padding-bottom: 0; border: none; } .no-padding { padding: 0 !important; } .no-padding-top { padding-top: 0 !important; } .no-margin { margin: 0 !important; } .product .col-md-6.text-center img { margin-bottom: 15px; } .bg-bottomright { background-position: bottom right; background-repeat: no-repeat; margin: 0 0 80px; padding-top: 100px; } .bg-bottomright .product { padding-bottom: 200px; margin: 0; } /*-------------------------------------------------------------- 10.8 Corporate Info --------------------------------------------------------------*/ .corporateinfo { padding: 80px 0; margin-bottom: 80px; background-repeat: no-repeat; background-position: right top; } .commitment { margin-bottom: 80px; } .commitment h3 { margin-bottom: 0; } .commitmentcount { background: url(img/commitmentcount.png) center center no-repeat; text-align: center; color: #fff; font-size: 34px; line-height: 88px; font-family: 'Oswald', sans-serif; margin-bottom: 5px; } /*-------------------------------------------------------------- 10.9 Landing Pages --------------------------------------------------------------*/ .lp-form { max-width: 500px; margin: 0 auto 60px; } .share { text-align: center; font-weight: 100; text-transform: uppercase; font-size: 16px; } .share i { border-radius: 50%; font-size: 20px; background: red; width: 32px; height: 32px; line-height: 32px; display: inline-block; text-align: center; color: #fff; } .share i.fa-facebook { background: #3a5897; } .share i.fa-twitter { background: #49c9f2; } .share i.fa-google-plus { background: #d0322d; } .share i.fa-linkedin { background: #0775b7; } /*-------------------------------------------------------------- 11.0 Media --------------------------------------------------------------*/ .page-content img.wp-smiley, .entry-content img.wp-smiley, .comment-content img.wp-smiley { border: none; margin-bottom: 0; margin-top: 0; padding: 0; } /* Make sure embeds and iframes fit their containers */ embed, iframe, object { max-width: 100%; } /*-------------------------------------------------------------- 12.0 Header --------------------------------------------------------------*/ .site-header { border-top: 8px solid #032a50; padding-top: 30px; margin-bottom: 30px; } /*-------------------------------------------------------------- 13.0 Footer --------------------------------------------------------------*/ .site-footer { background: #efefef; padding: 60px 0; color: #5b5b5b; font-size: 14px; } .site-footer .site-footer-nav { border-bottom: 1px solid #cfcfcf; margin-bottom: 1.5em; } .site-footer .widget_nav_menu ul { list-style: none; margin-left: 0; } .site-footer .widget_nav_menu ul li:first-child a { text-transform: uppercase; font-size: 18px; font-family: 'Oswald', sans-serif; color: #5b5b5b; } .site-footer .widget_nav_menu ul li:first-child a:hover { color: #5b5b5b; text-decoration: underline; } .site-footer .widget_nav_menu a { color: #5f91c3; text-decoration: none; } .site-footer .widget_nav_menu a:hover { color: #5f91c3; text-decoration: underline; } .site-footer .footer-social { margin-left: 0; text-align: right; } .site-footer .footer-social a { font-size: 24px; width: 32px; height: 32px; line-height: 32px; border-radius: 4px; background: #696969; color: #efefef; display: inline-block; text-align: center; } .site-footer .site-info a { color: #5b5b5b; text-decoration: none; } .site-footer .site-info a:hover { color: #5b5b5b; text-decoration: underline; } /*-------------------------------------------------------------- 14.0 Media Queries --------------------------------------------------------------*/ @media (max-width: 1199px) { .main-navigation ul.menu>li { margin-left: 20px; } } @media (max-width: 991px) { #iframe-wrapper iframe { height: 700px; } .corporateinfo { background: none !important; } } @media (max-width: 767px) { h1 { font-size: 40px; } h2 { font-size: 30px; } h2.h2large { color: #000; font-size: 40px; } h3 { font-size: 26px; } .section { text-shadow: 1px 1px 3px #fff; color: #000; } .section blockquote, .section a { text-shadow: none; } .mobile-bg-center { background-position: center top; } } @media (max-width: 599px) { .section { background-size: cover !important; } .section.nocover { background-size: auto !important; } .section blockquote { margin: 0; font-size: 30px; } .clients li { width: 100%; margin-right: 0; } #iframe-wrapper iframe { height: 1700px; } }