/*
Theme Name: HOD
Version: 1.0
Author: Unmethod
Author URI: http://www.unmethod.com
*/

/* Table of Contents
==================================================
    #Common Styles
    #Headings
    #Buttons
    #Thumbnails
    #Accordion
    #Tabs
    #Alerts
    #Info Box
    #Lists
    #Dropcaps
    #Progress Bar
    #Icons
    #Backgrounds
    #Forms
    #Switches
    #Filters
    #Media Queries


*/


/* #Common Styles
================================================== */

    body { font-family: 'Trocchi', serif; color: #4c2f35; font-weight: 400; line-height: 170%; font-size: 12px; background-color: #fbf3e2; margin: 0 40px 0 40px;}

    /* Links */
    a, a:visited { color: #434343; text-decoration: none; }
    a:hover { color: #ef1c00; text-decoration: none; }
    a:hover, a:active { outline: 0; }
    input:focus { outline: none; }

    a.reversed, a.reversed:visited { color: #ef1c00; }
    a.reversed:hover { color: #434343; }

    small { font-size: 10px; }
    strong { font-weight: bold; }

    ::selection { background: #ff7d6c; }
    ::-moz-selection { background: #ff7d6c; }

 

/* #Headings
================================================== */

    h1 {
        font-weight: 300;
        font-size: 45px;
        color: #ef1c00;
    }

    h1.jumbo-title {
        font-size: 72px;
        color: #ef1c00;
        line-height: 60%;
        text-align: left;
    }

    h1.jumbo-title em {
        font-size: 32px;
        color: #474747;
    }

    h1.jumbo-title.center {
        text-align: center;
        padding-top: 120px;
        padding-bottom: 40px;
        line-height: 30px;
    }

    h2 {
        font-weight: 300;
        font-size: 20px;
        color: #ef1c00;
    }

    h3 {
        font-size: 16px;
        color: #434343;

    }

    h3.post-title { 
        color: #747474;
        border-bottom: 1px solid #e4f1fe;
        padding-bottom: 20px;
    }

    h3.light { font-weight: 300; color: #fff; }

    p.sub-heading {
		font-family: 'Trocchi', serif;
        font-weight: 400;
        font-size: 19px;
        color: #4c2f35;
		line-height: 26px;
    }

    h4 {
        font-size: 14px;
        color: #434343;
    }

    h4.light { color: #fff; } 




/* #Buttons
================================================== */ 
    
    a.button {
        display: inline-block;
        font-family: 'Trocchi', serif;
        font-size: 14px;
        text-transform: uppercase;
        color: #fff;
        background: #ef1c00;
        line-height: 12px;
        padding: 25px;
    }

    a.button:hover { background: #b80b00; }

    a.button .button-arrow {
        display: inline-block;
        width: 10px;
        height: 12px;
        text-indent: -9999px;
        margin-left: 20px;
        background: url(../images/icons/button-arrow.png) no-repeat center center;
    }

    a.button.small {
        padding: 15px;
        font-size: 12px;
    }

    a.button.small .button-arrow { margin-left: 10px; }




/* #Thumbnails
================================================== */ 

    a.hr {border: 1px solid rgba(77, 48, 54,.3);}

    .screen-roll { display:  block; position: relative; }

    .screen-roll span {
        text-align: center;
        position: absolute;
        width: 100%;
        height: 100%;
        background: rgb(239, 28, 0) url(../images/screen-roll.png) no-repeat center center;
        background: rgba(76, 47, 53, .85) url(../images/screen-roll.png) no-repeat center center;
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 8 */
        filter: alpha(opacity=0);
        -webkit-transition: opacity .33s linear;
        -moz-transition: opacity .33s linear;
        -o-transition: opacity .33s linear;
        transition: opacity .33s linear;
    }

    .screen-roll:hover span {
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* IE 8 */
        filter: alpha(opacity=100);
        -webkit-transition: opacity .33s linear;
        -moz-transition: opacity .33s linear;
        -o-transition: opacity .33s linear;
        transition: opacity .33s linear;
    }

    .screen-roll h4 { margin-top: 10%; }


/* #Accordion
================================================== */
    
    .accordion-header { border-bottom: 1px solid #d2e8ff; line-height: 32px; padding-bottom: 20px; margin-bottom: 20px; }
    .accordion-header:hover { cursor: pointer; }

    .accordion-header span.accordion-icon {
        float: left;
        display: block;
        width: 32px;
        height: 32px;
        background: #ef1c00 url(../images/icons/accordion-plus.png) no-repeat center center;
        margin-right: 20px;
    }

    .active-header { border-bottom: none; }
    .active-header span.accordion-icon { background: #434343 url(../images/icons/accordion-minus.png) no-repeat center center; }

    .accordion-content {
        display: none;
        border-bottom: 1px solid #d2e8ff;
        padding-bottom: 20px;
        margin-bottom: 20px;
    }

   

/* #Tabs
================================================== */

    #tabs li, #tabs p { float: left; }
    
    #tabs p {
        padding: 20px 20px 30px 20px;
        background: #e1f0ff;
    }
    
    #tabs ul li a {
        color: #5c5c5c;
        display: block;
        padding: 8px 13px;
        border-top: 2px solid transparent;
        -webkit-transition: background 0.33s linear;
        -moz-transition: background 0.33s linear;
        -o-transition: background 0.33s linear;
        transition: background 0.33s linear;
    }
    
    #tabs ul li a:hover {
        background: #c9e2fc;
        -webkit-transition: background 0.33s linear;
        -moz-transition: background 0.33s linear;
        -o-transition: background 0.33s linear;
        transition: background 0.33s linear;
    }
    
    #tabs ul li.active a {
        background: transparent;
        border-top: 2px solid #ef1c00;
        background: #e1f0ff;
    }



/* #Alerts
================================================== */

    .alert {
        display: block;
        text-align: center;
        padding: 10px 20px;
    }
    
    .alert.error {
        color: #b3696c;
        background: #f9e5e6;
        border: 1px solid #f7c7c9;
        border-left-width: 4px;
        border-right-width: 4px;
    }
    
    .alert.success {
        color: #8FA442;
        background: #E3EBC6;
        border: 1px solid #C2D288;
        border-left-width: 4px;
        border-right-width: 4px;
    }
    
    .alert.info {
        color: #528DA9;
        background: #D8ECF5;
        border: 1px solid #9AC9DF;
        border-left-width: 4px;
        border-right-width: 4px;
    }
    
    .alert.notice {
        color: #C4A21B;
        background: #FCF7D9;
        border: 1px solid #F5DC7D;
        border-left-width: 4px;
        border-right-width: 4px;
    }    



/* #Info Box
================================================== */

    .infobox {
        background: #e1f0ff;
        border: 1px solid #c9e2fc;
        padding: 25px;
        
    }
    
    .infobox .button { margin-top: 20px; }


/*#Lists
================================================== */

    .list li {
        padding-left: 20px;
        display: block;
    }
    
    .list.arrow li { background: url('../images/icons/list-arrow.png') no-repeat center left; }
    .list.arrow2 li { background: url('../images/icons/list-arrow-2.png') no-repeat center left; }
    .list.checklist li { background: url('../images/icons/list-check.png') no-repeat center left; }
    .list.checklist2 li { background: url('../images/icons/list-check-2.png') no-repeat center left; }
    .list.circle li { background: url('../images/icons/list-circle.png') no-repeat center left; }
    .list.star li { background: url('../images/icons/list-star.png') no-repeat center left; }
    .list.plus li { background: url('../images/icons/list-plus.png') no-repeat center left; }
    .list.dash li { background: url('../images/icons/list-dash.png') no-repeat center left; }


/*#Dropcaps
================================================== */

    .dropcap {
        float: left;
        background: #edf6ff;
        padding: 8px 13px;
        font-size: 14px;
        font-weight: bold;
        margin-right: 7px;
    }
    
    .dropcap.dark { background: #e4f1fe; }



/*#Blockquotes 
================================================== */

    blockquote {
        background: #ededed url('../images/icons/open-quote.png') no-repeat top left;
        padding: 20px 20px 20px 55px;
        font-family: times, timesnewroman, serif;
        font-style: italic;
    }



/* #Progress Bar
================================================== */

    .progress-bar { width: 100%; background: #e1f0ff; }
    .progress-bar-content { display: block; background: #c9e2fc; }
    .progress-bar span.progress-title { display: block; padding: 10px 0px 10px 20px; }

    .progress-bar-content:hover { background: #ef1c00; }
    .progress-bar-content:hover span.progress-title { color: #fff; }




/* #Icons
================================================== */

    #overview .icon, .customer-icon {
        float: left;
        display: block;
        width: 30px;
        height: 30px;
        background: #ef1c00;
    }

    #overview .icon img, .customer-icon img, .jumbo-icon img { vertical-align: baseline; }

    .jumbo-icon {
        width: 114px;
        height: 114px;
        background: #ef1c00;
    }



/* #Backgrounds
================================================== */ 

    .light-background {
        width: 100%;
        background: #edf6ff;
    } 

    .dark-background {
        width: 100%;
        background: #e4f1fe;
    }

    .grey-background {
        width: 100%;
        background: #ededed;
    }



/*#Forms
================================================== */   
        
    .form-field {
        width: 100%;
        margin-bottom: 20px;
    }
    
    .form-field label {
        display: block;
        margin-bottom: 10px;
        padding-bottom: 20px;
        border-bottom: 1px solid #d2e8ff;
    }

    .form-field span input, .form-field span textarea {
        border: none;
        outline: none;
        padding: 10px;
        margin-top: 10px;
        width: 100%;
        height: 35px;
        background: #fff;
        -webkit-appearance: none;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        color: #949494;
    }
    
    .form-field span textarea {
        overflow: auto;
        height: 180px;
        padding: 18px;
    }
    
    .form-click input {
        border: none;
        line-height: 100%;
        display: inline-block;
        outline: none;
        cursor: pointer;
        text-align: center;
        -webkit-font-smoothing: antialiased;
        text-rendering: geometricPrecision;
        text-decoration: none;
        -webkit-appearance: none;
         display: inline-block;
        font-family: 'Lato', helvetica, arial, sans-serif;
        font-size: 12px;
        text-transform: uppercase;
        color: #fff;
        background: #ef1c00;
        line-height: 12px;
        padding: 15px;
    }

     .form-click input:hover { text-decoration: none; color: #fff!important; background: #b80b00; }



/* #Switches
================================================== */ 

    .switch a { display: block; float: left; text-indent: -999em; width: 34px; height: 34px; } 

    .switch .prev {
        margin-right: 10px;
        background: url('../images/icons/switch-left.png') no-repeat top left;
        background-position: top;
    }

    .switch .next {
        background: url('../images/icons/switch-right.png') no-repeat top left;
        background-position: top;
    }

    .switch .prev:hover, .switch .next:hover { background-position: bottom; }

    
/* #Filters
================================================== */
    
    #filter { padding-top: 30px; }

    #filter li a {
        display: block;
        padding: 10px 25px 10px 25px;
        color: #434343;
    }

    #filter li a:hover, #filter li.current a { color: #fff; }

    #filter li { float: left; margin-right: 20px; background: #c9e2fc; }
    #filter li.current, #filter li:hover {background: #ef1c00; }
    #filter li:last-of-type { margin-right: 0px; }



/* #Media Queries
================================================== */

    @media handheld, only screen and (max-width: 768px), only screen and (max-device-width: 768px) and (orientation:portrait) {

        /* Headings */
        h1 {font-size: 35px; line-height: 120%;}
        /* Buttons */
        a.button { padding: 15px; font-size: 12px; }
        a.button .button-arrow { margin-left: 10px; }
        /* Filters */
        #filter li { margin-top: 20px; }

        
    }