/*

 * HTML5 Boilerplate

 *

 * What follows is the result of much research on cross-browser styling.

 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,

 * Kroc Camen, and the H5BP dev community and team.

 */



/* ==========================================================================

   Base styles: opinionated defaults

   ========================================================================== */



html,

button,

input,

select,

textarea {

    color: #222;

}



body {

    font-size: 1em;

    line-height: 1.4;

}



a {

    color: #00e;

}



a:visited {

    color: #551a8b;

}



a:hover {

    color: #06e;

}



/*

 * Remove text-shadow in selection highlight: h5bp.com/i

 * These selection declarations have to be separate.

 * Customize the background color to match your design.

 */



::-moz-selection {

    background: #b3d4fc;

    text-shadow: none;

}



::selection {

    background: #b3d4fc;

    text-shadow: none;

}



/*

 * A better looking default horizontal rule

 */



hr {

    display: block;

    height: 1px;

    border: 0;

    border-top: 1px solid #ccc;

    margin: 1em 0;

    padding: 0;

}



/*

 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440

 */



img {

    vertical-align: middle;

}



/*

 * Remove default fieldset styles.

 */



fieldset {

    border: 0;

    margin: 0;

    padding: 0;

}



/*

 * Allow only vertical resizing of textareas.

 */



textarea {

    resize: vertical;

}



/* ==========================================================================

   Chrome Frame prompt

   ========================================================================== */



.chromeframe {

    margin: 0.2em 0;

    background: #ccc;

    color: #000;

    padding: 0.2em 0;

}



/* ==========================================================================

   Fonts

   ========================================================================== */



/** -- ASAP Font -- **/

@font-face {

    font-family: 'AsapRegular';

    src: url('../fonts/asap-fontfacekit/Asap-Regular-webfont.eot');

    src: url('../fonts/asap-fontfacekit/Asap-Regular-webfont.eot?#iefix') format('embedded-opentype'),

         url('../fonts/asap-fontfacekit/Asap-Regular-webfont.woff') format('woff'),

         url('../fonts/asap-fontfacekit/Asap-Regular-webfont.ttf') format('truetype'),

         url('../fonts/asap-fontfacekit/Asap-Regular-webfont.svg#AsapRegular') format('svg');

    font-weight: normal;

    font-style: normal;



}

@font-face {

    font-family: 'AsapItalic';

    src: url('../fonts/asap-fontfacekit/Asap-Italic-webfont.eot');

    src: url('../fonts/asap-fontfacekit/Asap-Italic-webfont.eot?#iefix') format('embedded-opentype'),

         url('../fonts/asap-fontfacekit/Asap-Italic-webfont.woff') format('woff'),

         url('../fonts/asap-fontfacekit/Asap-Italic-webfont.ttf') format('truetype'),

         url('../fonts/asap-fontfacekit/Asap-Italic-webfont.svg#AsapItalic') format('svg');

    font-weight: normal;

    font-style: normal;



}

@font-face {

    font-family: 'AsapBold';

    src: url('../fonts/asap-fontfacekit/Asap-Bold-webfont.eot');

    src: url('../fonts/asap-fontfacekit/Asap-Bold-webfont.eot?#iefix') format('embedded-opentype'),

         url('../fonts/asap-fontfacekit/Asap-Bold-webfont.woff') format('woff'),

         url('../fonts/asap-fontfacekit/Asap-Bold-webfont.ttf') format('truetype'),

         url('../fonts/asap-fontfacekit/Asap-Bold-webfont.svg#AsapBold') format('svg');

    font-weight: normal;

    font-style: normal;



}

@font-face {

    font-family: 'AsapBoldItalic';

    src: url('../fonts/asap-fontfacekit/Asap-BoldItalic-webfont.eot');

    src: url('../fonts/asap-fontfacekit/Asap-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),

         url('../fonts/asap-fontfacekit/Asap-BoldItalic-webfont.woff') format('woff'),

         url('../fonts/asap-fontfacekit/Asap-BoldItalic-webfont.ttf') format('truetype'),

         url('../fonts/asap-fontfacekit/Asap-BoldItalic-webfont.svg#AsapBoldItalic') format('svg');

    font-weight: normal;

    font-style: normal;



}



/** -- Bebas Font -- **/

@font-face {

    font-family: 'BebasRegular';

    src: url('../fonts/Bebas-fontfacekit/BEBAS___-webfont.eot');

    src: url('../fonts/Bebas-fontfacekit/BEBAS___-webfont.eot?#iefix') format('embedded-opentype'),

         url('../fonts/Bebas-fontfacekit/BEBAS___-webfont.woff') format('woff'),

         url('../fonts/Bebas-fontfacekit/BEBAS___-webfont.ttf') format('truetype'),

         url('../fonts/Bebas-fontfacekit/BEBAS___-webfont.svg#BebasRegular') format('svg');

    font-weight: normal;

    font-style: normal;



}



/** -- Franchise Font -- **/

@font-face {

    font-family: 'franchiseregular';

    src: url('../fonts/Franchise-fontfacekit/franchise-bold-webfont.eot');

    src: url('../fonts/Franchise-fontfacekit/franchise-bold-webfont.eot?#iefix') format('embedded-opentype'),

         url('../fonts/Franchise-fontfacekit/franchise-bold-webfont.woff') format('woff'),

         url('../fonts/Franchise-fontfacekit/franchise-bold-webfont.ttf') format('truetype'),

         url('../fonts/Franchise-fontfacekit/franchise-bold-webfont.svg#franchiseregular') format('svg');

    font-weight: normal;

    font-style: normal;



}



/* ==========================================================================

   Author's custom styles

   ========================================================================== */

/** -- Global Styles -- **/

html, body {

    background: #f1f2f2;

}

#main-container {

    width: 1030px;

    margin: 0 auto;



    margin-bottom: 40px;



    padding: 0 45px;



    background: #ffffff;



    -webkit-box-shadow: 0px 0px 4px 2px #bab9b9;

    box-shadow: 0px 0px 4px 2px #bab9b9;

}



/** -- Header Styles -- **/

#header {

    padding-top: 25px;

    padding-bottom: 30px;



    border-bottom: 1px solid #e6e7e8;

}

#logo {

    width: 240px;

    float: left;

}

#rightheader {

    width: 740px;

    float: right;



    text-align: right;

}

#rightheader #phonenumber {

    font-family: 'AsapBold', Arial;

    font-size: 32px;



    line-height: 32px;



    color: #ed1c24;

    text-align: right;

}
#rightheader span {
    display: block;
}
#rightheader #email {
    margin-top: 10px;
}
#rightheader #email a {
    font-family: 'AsapBold', Arial;
    font-size: 32px;
    line-height: 32px;
    color: #ed1c24;
    text-align: right;
    text-decoration: none;
}
#rightheader #email img {

    vertical-align: middle;

    margin-right: 10px;

}

.searchform { margin-top: 20px; }
.searchform label { display: none; }


#rightheader #phonenumber img {

    vertical-align: middle;

    margin-right: 10px;

}

#navigation {

    position: relative;

    right: -348px;

    margin-top: 25px;



    width: 452px;

    height: 93px;



    background-image: url('../../images/menu-bg.png');

    background-repeat: no-repeat;

}

#navigation ul {

    margin: 0;

    padding: 0;



    padding-left: 50px;

    padding-top: 15px;



    list-style: none;

}

#navigation ul li {

    float: left;



    height: 51px;



    padding-right: 35px;

    padding-top: 30px;

}

#navigation ul li:last-child {

    padding-right: 0;

}

#navigation .home-button a {

    background-image: url('../../images/menu/home.png'); 

    background-repeat: no-repeat;

    background-position-x: 3px;

    background-position-y: 0px;

}

#navigation .home-button a:hover, #navigation .home-button.current_page_item a {

    background-image: url('../../images/menu/home-hover.png');

    color: #ffeb00;

}

#navigation .about-us-button a {

    background-image: url('../../images/menu/about-us.png'); 

    background-repeat: no-repeat;

    background-position-x: 15px;

    background-position-y: 0px;

}

#navigation .about-us-button a:hover, #navigation .about-us-button.current_page_item a {

    background-image: url('../../images/menu/about-us-hover.png');

    color: #ffeb00;

}

#navigation .catalog-button a {

    background-image: url('../../images/menu/catalog.png'); 

    background-repeat: no-repeat;

    background-position-x: 20px;

    background-position-y: 0px;

}

#navigation .catalog-button a:hover, #navigation .catalog-button.current_page_item a {

    background-image: url('../../images/menu/catalog-hover.png');

    color: #ffeb00;

}

#navigation .media-button a {

    background-image: url('../../images/menu/media.png'); 

    background-repeat: no-repeat;

    background-position-x: 10px;

    background-position-y: 0px;

}

#navigation .media-button a:hover, #navigation .media-button.current_page_item a {

    background-image: url('../../images/menu/media-hover.png');

    color: #ffeb00;

}

#navigation .blog-button a {

    background-image: url('../../images/blog.png');

    background-repeat: no-repeat;

}

#navigation .blog-button a:hover, #navigation .blog-button.current_page_item a {

    background-image: url('../../images/blog-hover.png');

    color: #ffeb00;

}

#navigation ul li a {

    padding-top: 30px;

    font-family: 'BebasRegular';

    font-size: 16px;



    text-transform: uppercase;

    text-decoration: none;



    color: #FFF;

}



/** -- Homepage Styles -- **/

#featuredimage {

    position: relative;

    left: -72px;

    top: 20px;



    background: url('../../images/featured-image-bg.png') no-repeat;



    width: 1177px;

    height: 460px;

}

#featuredimage h2 {

    margin: 0;

    padding: 0;



    padding-top: 60px;

    padding-left: 70px;



    font-family: "franchiseregular";

    font-size: 44px;

    font-weight: normal;



    line-height: 44px;



    color: #089cc2;

}

#featuredimage ul {

    margin: 0;

    padding: 0;



    margin-top: 20px;

    margin-left: 100px;



    list-style-image: url('../../images/checkmark.png');

}

#featuredimage ul li {

    margin-bottom: 10px;



    font-family: "AsapBold";

    font-size: 27px;



    color: #FFF

}



/** -- Main Content Styles -- **/

#main.home {

    margin-top: 60px;

}

#main {

    margin-top: 20px;

    margin-bottom: 20px;

}

#main.home article h3 {

    margin: 0;

    padding: 0;



    margin-top: 40px;



    font-family: 'AsapBoldItalic';

    font-size: 28px;

    font-weight: normal; 



    color: #7dc4e1;

    text-align: center;

}

#main.home article .hometext, #main.home article .hometext a {

    font-family: 'AsapBoldItalic';

    font-size: 24px;

    font-weight: normal; 



    color: #bcbec0;

    text-align: center;

    text-decoration: none;

}

#main.home article .hometext a:hover {

    text-decoration: underline;

}

#main h2, .page-title {

    margin: 0;

    padding: 0;



    border-top: 1px solid #e6e7e8;

    border-bottom: 1px solid #e6e7e8;



    font-family: 'franchiseregular';

    font-size: 48px;

    font-weight: normal;



    line-height: 48px;



    text-transform: uppercase;

    color: #a7a9ac;

}

#main p {

    font-family: 'AsapRegular';

    font-size: 14px;



    color: #a7a9ac;

    text-decoration: none;

}

#main a {

    color: inherit;

    text-decoration: none;

}

#main a:hover {

    text-decoration: underline;

}



/** -- Widget Styles -- **/

#sidebar {

    margin-top: 40px;

}

.homeboxes {

    width: 233px;

    float: left;



    margin-right: 28px;

}

.homeboxes:nth-child(4n) {

    margin-right: 0px;

}

.homeboxes img {

    display: block;

    

    margin: 0 auto;

    margin-bottom: 25px;

    margin-top: 20px;



    height: 120px !important;

    width: auto;

}

.homeboxes .box {

    height: 330px;



    -webkit-border-radius: 15px;

    border-radius: 15px;



    border: 1px solid #e6e7e8;



    background: #ffffff;

    background: -moz-linear-gradient(top,  #ffffff 0%, #f1f2f2 100%);

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f1f2f2));

    background: -webkit-linear-gradient(top,  #ffffff 0%,#f1f2f2 100%);

    background: -o-linear-gradient(top,  #ffffff 0%,#f1f2f2 100%);

    background: -ms-linear-gradient(top,  #ffffff 0%,#f1f2f2 100%);

    background: linear-gradient(to bottom,  #ffffff 0%,#f1f2f2 100%);

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f1f2f2',GradientType=0 );

}

.homeboxes p {

    margin-left: 20px;

    margin-right: 20px;



    font-family: 'AsapRegular';

    font-size: 14px;



    color: #a7a9ac;

}

h2.widgettitle {

    border: 0 !important;



    margin-bottom: 20px !important;



    font-family: 'AsapBold' !important;

    font-size: 33px !important;



    line-height: 33px !important;

    text-transform: none !important;

    text-align: center !important;

}



/** -- Footer Styles -- **/

#footer {

    height: 172px;

    width: 1020px !important;

    margin-left: -45px;



    padding-top: 21px;

    padding-left: 50px;

    padding-right: 50px;



    background: #f1f2f2;

    background: -moz-linear-gradient(top,  #f1f2f2 0%, #e6e7e8 100%);

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f1f2f2), color-stop(100%,#e6e7e8));

    background: -webkit-linear-gradient(top,  #f1f2f2 0%,#e6e7e8 100%);

    background: -o-linear-gradient(top,  #f1f2f2 0%,#e6e7e8 100%);

    background: -ms-linear-gradient(top,  #f1f2f2 0%,#e6e7e8 100%);

    background: linear-gradient(to bottom,  #f1f2f2 0%,#e6e7e8 100%);

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f2f2', endColorstr='#e6e7e8',GradientType=0 );

}

#footer h2 {

    margin: 0;

    padding: 0;



    font-family: 'AsapBold';

    font-size: 18px;

    font-weight: normal;



    line-height: 18px;



    color: #a7a9ac;

}

#footer p, #footer a {

    margin: 0;

    padding: 0;



    margin-top: 5px;

    margin-bottom: 5px;



    font-family: 'AsapRegular';

    font-size: 14px;



    color: #a7a9ac;

    text-decoration: none;

}

#footer a:hover {

    text-decoration: underline;

}

#footer #columnone {

    width: 250px;

    float: left;

}

#footer #columntwo {

    width: 300px;

    float: left;



    margin-left: 110px;



    text-align: center;

}

#footer #columnthree {

    width: 340px;

    float: right;



    text-align: right;

}



/* WooCommerce Styles */

.woocommerce {

    font-family: 'AsapRegular';

    font-size: 14px;

}

#content {

    margin-top: 20px;

} 

#content .page-title {

    margin-bottom: 20px;

}

.woocommerce ul.products li.product h3, .woocommerce-page ul.products li.product h3 {

    color: #000;

    font-size: 18px !important;

    padding-top: 0 !important;

}

.woocommerce ul.products li.product .price, .woocommerce-page ul.products li.product .price {

    margin-top: 4px;

    font-weight: bold !important;

}



.woocommerce-checkout article header {

    margin-bottom: 20px;

}

.woocommerce-checkout input {

    padding: 5px;

    font-family: 'AsapRegular';

}

.woocommerce-checkout label {

    color: #000;

}

.woocommerce .payment_box p {

    color: #000 !important;

}



/* Blog Styles */

#blog-left {

    width: 65%;

    float: left;



    padding-right: 5%;

}

#blog-right {

    width: 28%;

    float: right;



    margin-left: 2%;

}



.single-post .post {

    border-bottom: none;

}



#blog-left .post {

    position: relative;

    

    margin-bottom: 20px;    

    padding-bottom: 20px;



    border-bottom: 1px solid #0973b8;



    padding-left: 60px;

}

.post .meta .meta-wrapper {

    padding: 10px;



    float: left;

    position: relative; 



    font-size: 16px;

    text-align: center;

    text-transform: lowercase;



    line-height: 16px;



    display: table-cell;

    vertical-align: middle;



    font-family: 'AsapRegular';

}

.post .meta .meta-wrapper .title {

    height: 50px;

    line-height: 50px;

    padding: 0 20px;



    position: absolute;

    top: 0;

    left: 45px;



    background: #eee;



    font-size: 18px;

}



.post .meta .post-date-wrapper {

    background: #0973b8;

    

    color: #FFF;

}

.post .meta .post-date span {

    font-size: 20px;

    display: block;

    margin-bottom: 3px;

}



.post .meta .post-comments-wrapper {

    background: #CCC;

    width: 45px;



    font-size: 18px;

    line-height: 32px;

}



.post-header img {

    max-width: 100%;

    height: auto;

}



.post-content h1 {

    font-size: 20px;

    line-height: 20px;



    margin: 0;

    color: #0973b8;

}



.post .post-header {

    margin-bottom: 20px;

}



.post-content p a {

    white-space: pre-wrap; /* css-3 */    

    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */

    white-space: -pre-wrap; /* Opera 4-6 */    

    white-space: -o-pre-wrap; /* Opera 7 */    

    word-wrap: break-word; /* Internet Explorer 5.5+ */

}



.post .meta {

    position: absolute;

    top: 0;

    left: 0;

}

.post-meta p {

    margin: 0;

}

.post-meta .seperator {

    border-bottom: 3px solid #0973b8;

    padding-bottom: 40px;

    margin-bottom: 10px;

    display: block;

    width: 30px;

}

.post-meta a {

    font-size: inherit !important;

}



#blog-right .widget {

    border-bottom: 1px solid #0973b8;

    padding-bottom: 10px;

    margin-bottom: 10px !important;

}

#blog-right .widget h2 {

    margin-bottom: 5px !important;



    font-weight: normal !important;

    font-size: 24px !important;



    color: #58585b;

    text-align: left !important;

}

#blog-right .widget ul {

    padding: 0;

    margin: 0;



    list-style: none;

}

#blog-right .widget ul li {

    margin-bottom: 5px;

}



/* ==========================================================================

   Helper classes

   ========================================================================== */



/*

 * Image replacement

 */



.ir {

    background-color: transparent;

    border: 0;

    overflow: hidden;

    /* IE 6/7 fallback */

    *text-indent: -9999px;

}



.ir:before {

    content: "";

    display: block;

    width: 0;

    height: 100%;

}



/*

 * Hide from both screenreaders and browsers: h5bp.com/u

 */



.hidden {

    display: none !important;

    visibility: hidden;

}



/*

 * Hide only visually, but have it available for screenreaders: h5bp.com/v

 */



.visuallyhidden {

    border: 0;

    clip: rect(0 0 0 0);

    height: 1px;

    margin: -1px;

    overflow: hidden;

    padding: 0;

    position: absolute;

    width: 1px;

}



/*

 * Extends the .visuallyhidden class to allow the element to be focusable

 * when navigated to via the keyboard: h5bp.com/p

 */



.visuallyhidden.focusable:active,

.visuallyhidden.focusable:focus {

    clip: auto;

    height: auto;

    margin: 0;

    overflow: visible;

    position: static;

    width: auto;

}



/*

 * Hide visually and from screenreaders, but maintain layout

 */



.invisible {

    visibility: hidden;

}



/*

 * Clearfix: contain floats

 *

 * For modern browsers

 * 1. The space content is one way to avoid an Opera bug when the

 *    `contenteditable` attribute is included anywhere else in the document.

 *    Otherwise it causes space to appear at the top and bottom of elements

 *    that receive the `clearfix` class.

 * 2. The use of `table` rather than `block` is only necessary if using

 *    `:before` to contain the top-margins of child elements.

 */



.clearfix:before,

.clearfix:after {

    content: " "; /* 1 */

    display: table; /* 2 */

}



.clearfix:after {

    clear: both;

}



/*

 * For IE 6/7 only

 * Include this rule to trigger hasLayout and contain floats.

 */



.clearfix {

    *zoom: 1;

}



/* ==========================================================================

   EXAMPLE Media Queries for Responsive Design.

   Theses examples override the primary ('mobile first') styles.

   Modify as content requires.

   ========================================================================== */



@media only screen and (min-width: 35em) {

    /* Style adjustments for viewports that meet the condition */

}



@media only screen and (-webkit-min-device-pixel-ratio: 1.5),

       only screen and (min-resolution: 144dpi) {

    /* Style adjustments for high resolution devices */

}



/* ==========================================================================

   Print styles.

   Inlined to avoid required HTTP connection: h5bp.com/r

   ========================================================================== */



@media print {

    * {

        background: transparent !important;

        color: #000 !important; /* Black prints faster: h5bp.com/s */

        box-shadow:none !important;

        text-shadow: none !important;

    }



    a,

    a:visited {

        text-decoration: underline;

    }



    a[href]:after {

        content: " (" attr(href) ")";

    }



    abbr[title]:after {

        content: " (" attr(title) ")";

    }



    /*

     * Don't show links for images, or javascript/internal links

     */



    .ir a:after,

    a[href^="javascript:"]:after,

    a[href^="#"]:after {

        content: "";

    }



    pre,

    blockquote {

        border: 1px solid #999;

        page-break-inside: avoid;

    }



    thead {

        display: table-header-group; /* h5bp.com/t */

    }



    tr,

    img {

        page-break-inside: avoid;

    }



    img {

        max-width: 100% !important;

    }



    @page {

        margin: 0.5cm;

    }



    p,

    h2,

    h3 {

        orphans: 3;

        widows: 3;

    }



    h2,

    h3 {

        page-break-after: avoid;

    }

}