/*
Theme Name: Sweet Tooth 2015
Template: Impreza
Version: 1.0
Author:	UpSolution
Theme URI: http://impreza.us-themes.com/
Author:	Sweet Tooth Inc.
Description: A child of the Impreza theme designed specifically for Sweet Tooth in August 2015.
*/

/* latin */
@font-face {
    font-family: 'Lato';
    src: url(../fonts/lato/Lato-Light.eot);
    src: url(../fonts/lato/Lato-Light.eot)
    format("embedded-opentype"), url(../fonts/lato/Lato-Light.woff2)
    format("woff2"), url(../fonts/lato/Lato-Light.ttf)
    format("truetype"), url(../fonts/lato/Lato-Light.woff);
    font-style: normal;
    font-weight: 400;
}

/********************************************************************
    Sweet Tooth Colour Helper Classes
    ---------------------------------
    When applied to an element, these will override any other colour
    that's on the element.
    *****************************************************************/
.black                      { color: #000000 !important; }
.white                      { color: #FFFFFF !important; }
.pink                       { color: #C82254 !important; }
.light-blue                 { color: #D1EDFC !important; }
.dark-grey                  { color: #363535 !important; }
.light-grey                 { color: #999999 !important; }
.lighter-grey               { color: #EEEEEE !important; }

.black-background           { background-color: #000000 !important; }
.white-background           { background-color: #FFFFFF !important; }
.pink-background            { background-color: #C82254 !important; }
.light-blue-background      { background-color: #D1EDFC !important; }
.dark-grey-background       { background-color: #363535 !important; }
.light-grey-background      { background-color: #999999 !important; }
.lighter-grey-background    { background-color: #EEEEEE !important; }

.black-children *           { color: #000000; }
.white-children *           { color: #FFFFFF; }
.pink-children *            { color: #C82254; }
.light-blue-children *      { color: #D1EDFC; }
.dark-grey-children *       { color: #363535; }
.light-grey-children *      { color: #999999; }
.lighter-grey-children *    { color: #EEEEEE; }


.border-color-border-primary,
.border-color-border-contrast   { border-color: theme('Main Border Color'); }
.border-color-border-secondary  { border-color: theme('Alternate Border Color'); }
.border-color-border-light      { border-color: transparent; !important;}

/********************************************************************************
    Sweet Tooth General Helper Classes
    ---------------------------------
    - Values for some helper styles are grabbed from the "Theme Options" interface.
        these are commented by the `theme('...')` annotation (NOT REAL CSS! - browser ignores these)

    - Use `.st-page` and `.st-post` to style pages vs posts respectively.
    *****************************************************************************/

.explainer {
        color:          theme('Faded Elements Color');
        font-size:      theme('Heading 4 Desktop size');
        font-weight:    300;
    }
    .explainer.small            { /* font-size: theme('Heading 5 Desktop size'); */ }
    .explainer.smaller          { /* font-size: theme('Heading 6 Desktop size'); */ }

    .st-page .explainer         {}
    .st-page .explainer.small   {}
    .st-page .explainer.smaller {}



.quote {
    color:          theme('Faded Elements Color');
    font-family:    'Lato';
    font-size:      38px;
    font-style:     italic;
    font-weight:    300;
    line-height:    46px;
    }
    .quote.small    { font-size: 28px; }

    @media only screen and (max-width: 1023px) {
        .quote {  font-size: 28px !important;  }
    }
    @media only screen and (max-width: 599px) {
        .quote {
            font-size: 26px !important;
            line-height: 36px !important;
        }
    }
    @media only screen and (max-width: 340px) {
        .quote {
            font-size: 23px !important;
            line-height: 34px !important;
        }
    }

.serif-text {
    font-family:    'PT Serif', serif;
    font-size:      20px;
    line-height:    33px;
    }
    @media only screen and (max-width: 1023px) {
        .serif-text {
            font-size:      19px;
            line-height:    31px;
        }
    }
    @media only screen and (max-width: 599px) {
        .serif-text {
            font-size:      17px;
            line-height:    28px;
        }
    }
    @media only screen and (max-width: 340px) {
        .serif-text {
            font-size:      15px;
            line-height:    25px;
        }
    }

.subheader {
    color:          theme('Faded Elements Color');
    font-family:    'mulibold';
    font-size:      14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    }

.space {
    display: block;
    height: 10px;
    clear: both;
}
    .space.tiny {
        height: 1px;
    }
    .space.smaller {
        height: 2px;
    }
    .space.small {
        height: 5px;
    }
    .space.big {
        height: 15px;
    }
    .space.bigger {
        height: 30px;
    }
    .space.huge {
        height: 50px;
    }

/*******************************************
    Weight Helpers
*******************************************/
.light-weight           { font-weight: 300 !important; }
.regular-weight         { font-weight: normal !important; }
.heavy-weight, .bold    { font-weight: bold !important; }


/**********************************************
 Layout Helpers
 *********************************************/
.margin-20percent-sides { margin-left: 20%;  margin-right: 20%; }
.text-centered          { text-align: center; }

.row-bottom-aligned .wpb_row.g-cols,
    .row-bottom-aligned.wpb_row.g-cols {
        display: table;
        width: 100%;
    }
    .row-bottom-aligned .wpb_row.g-cols > *,
    .row-bottom-aligned.wpb_row.g-cols > * {
        vertical-align: bottom;
        display: inline-block;
        float: none;
    }
    .row-bottom-aligned img {
        vertical-align: text-top;
    }


/***********************************************
    Responsive Helpers
*******************************************/
.mobile-only,
.mobile-only-inline {
    display: none !important;
}
@media only screen and (max-width: 899px) {
    .desktop-only {
        display: none !important;
    }
    .mobile-only {
        display: block !important;
    }
    .mobile-only-inline {
        display: inline !important;
    }
    .centered-text-content-on-mobile {
        text-align: center !important;
    }
    .mobile-only-no-side-margins {
        margin-left:    0px !important;
        margin-right:   0px !important;
    }
}

/***********************************************
    Global Styles
    *******************************************/
html, html a {
    -webkit-font-smoothing: antialiased;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}

/* Disable Digg Digg Bar on portfolio pages */
.st-portfolio .dd_outer {
    display: none;
}

/***********************************************
    Theme Overrides
    *******************************************/

/* Iframes, Objects, Embed */
    body iframe,
    body object,
    body embed {
        max-width: none;
    }

/* Menu */
    body .l-header .menu-item-language,
    body .l-header .w-nav-item
    {
        font-family: 'mulibold', 'muli';
    }

/* Sub-Footer */
.l-subfooter .one-quarter .textwidget {
    margin-left: 50px;
}
@media only screen and (max-width: 899px) {
    .l-subfooter .one-quarter .textwidget {
        margin-left: 0;
        text-align: center;
    }
}


/* Buttons */
    .g-btn .icon         { vertical-align: middle; }
    .g-btn,
    button,
    input[type="submit"] {
        font-family:    'mulibold';
        font-size:      16px;
        border-radius:  2px;
        height:         50px;
        line-height:    30px;
        padding-top:    10px;
        padding-bottom: 10px;
        /*min-width:      200px;*/
    }
    /* size: small */
    .st_button .g-btn.size_small,
    input.g-btn.size_small {
        border-radius:  2px;
        padding-top:    10px;
        padding-bottom: 10px;
        min-width:      150px;
    }
    /* size: big */
    .st_button .g-btn.size_big,
    input.g-btn.size_big {
        border-radius:  2px;
        padding-top:    10px;
        padding-bottom: 10px;
        min-width:      250px;
    }

/* Form elements */
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="url"],
    input[type="tel"],
    input[type="number"],
    input[type="date"],
    input[type="search"],
    textarea,
    select {
        height: 60px;
        padding: 21px 20px;
        border-radius: 0px;
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
        background: transparent;
        -webkit-border-radius: 0px;
        box-shadow: 0 0 0 2px #bbbbbb inset;
    }
    select {
        padding: 18px 20px;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background: transparent url('img/caret-down.png') no-repeat right 20px center;
    }
    textarea {
        height: 100px;
    }
    select:not([disabled]),
    input[type=checkbox]:not([disabled]),
    input[type=radio]:not([disabled]) {
        cursor: pointer;
    }
    input[type="text"]:disabled,
    input[type="password"]:disabled,
    input[type="email"]:disabled,
    input[type="url"]:disabled,
    input[type="tel"]:disabled,
    input[type="number"]:disabled,
    input[type="date"]:disabled,
    input[type="search"]:disabled,
    select:disabled {
        background-color: #bbbbbb;
    }

/* Alerts */
    .alert,
    .g-alert,
    .hubspot-form-container .submitted-message
    {
        padding: 15px;
        margin-bottom: 20px;
        border: 1px solid transparent;
        border-radius: 4px;
    }
    .g-alert {
        padding-top: 0px;
        padding-bottom: 0px;
    }

    .alert-success,
    .g-alert.type_success,
    .hubspot-form-container .submitted-message
    {
        background-color: #dff0d8;
        border-color: #d6e9c6;
        color: #3c763d;
    }

    .alert-info,
    .g-alert.type_info
    {
        background-color: #d9edf7;
        border-color: #bce8f1;
        color: #31708f;
    }

    .alert-danger,
    .g-alert.type_attention {
        background-color: #f2dede;
        border-color: #ebccd1;
        color: #a94442;
    }


/***********************************************
    We're hiring tag on the logo
    *******************************************/

.hiring-component
{
     float: left;
}

.hiring-cta
{
    display: inline-block;
    position: absolute;
    color: white;
    font-size: 15px;
    text-align: left;
    margin-left: 30px;
}

.hiring-tag
{
    padding: 4px 8px;
    border-radius: 2px;
}

/* Inspired by: http://ilikepixels.co.uk/drop/bubbler/ */
.hiring-cta:after
{
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 6px 8px 6px 0;
    border-color: transparent #C82254;
    display: block;
    width: 0;
    z-index: 1;
    margin-top: -15px;
    left: -8px;
    top: 64px;
}

.hiring-cta:hover, .hiring-cta:focus
{
    color: white !important;
    text-decoration: none;
}

.hiring-component-light .hiring-tag
{
    border: 1px solid #C82254;
    color: #C82254;
}
    .sweettooth-features-tabs-canvas .hiring-component-light .hiring-tag {
        color: white;
        border-color: white;
    }

.hiring-component-light .hiring-cta:after
{
    /*content: url("img/arrow.png");*/
    border: none;
    left: -10px;
    top: 17px;
}
    .sweettooth-features-tabs-canvas .hiring-component-light .hiring-cta:after {
        /*content: url("img/arrow-pinkbg.png");*/
    }

@media only screen and (max-width: 899px)
{
    .hiring-component {
        display: none;
    }
}

/*****************************************************************
    Extras
    --------------------------------------------------------------
    If your name is not Mohsen,
    You should add other classes below here :p

    ALSO, tell me about your changes so we can commit them to repo
    otherwise you will LOSE them!
    **************************************************************/




    .platform-select img:hover {
        box-shadow: 0px 0px 15px 5px rgba(54,53,53,0.22);
    }

    /*
    .st-post .entry-title {
          text-align: center;
      }

    .st-post .w-blog-meta {
          text-align: center;
      }
    */

    .st-post h2     { font-size: 40px; }
    .st-post h3     { font-size: 32px; }
    .st-post h4     { font-size: 28px; }
    .st-post h5     { font-size: 24px; }
    .st-post h6     { font-size: 20px; }

    .candy-jar img  { margin-top: -69px; }

    .l-canvas .l-subheader.at_middle { box-shadow: none; }