h5 { font: 2em 'Leckerli One', sans-serif; padding: 0; margin: 0; }
h4 { font: 1.5em 'Leckerli One', sans-serif; padding: 0; margin: 0; }

.brown .pre-footer a { color: #fff; }

.orange .section1 h5, .orange .section1 b, .orange a { color:#c8783f;}
.yellow .section1 h5, .yellow .section1 b, .yellow a { color:#d9bf53;}
.green .section1 h5, .green .section1 b, .green a { color: #88b16d; }
.teal .section1 h5, .teal .section1 b, .teal a  { color:#008871;}
.blue .section1 h5, .blue .section1 b, .blue a { color:#69b0d1;}
.purple .section1 h5, .purple .section1 b, .purple a { color:#8479a0;}
.pink .section1 h5, .pink .section1 b, .pink a { color:#da59a1;}

.brown a:hover { color: #7f6c5f; }
.orange a:hover { color: #9e592e; }
.yellow a:hover { color: #b79f5f; }
.green a:hover { color: #658751; }
.teal a:hover { color: #006554; }
.blue a:hover { color: #4e86a8; }
.purple a:hover { color: #625a79; }
.pink a:hover { color: #b34279; }

a, a:hover { 
    -webkit-transition: all .15s ease-in-out;
    -moz-transition: all .15s ease-in-out;
    -o-transition: all .15s ease-in-out;
    transition: all .15s ease-in-out; }

/* Sections */
.clear { display: block; }
.column { position: relative; }
.section1 { padding: 125px 0; }
.section1 .content { padding: 0; margin: 0; }
.section1 img { 
    max-width: 25%;
    max-height: 150px;
    float:left;
    padding: 0px 40px 30px 0; }

#smse .section1 img { padding: 30px 40px 30px 0; }

.section2 { padding: 0 0 125px; position:relative; }

.section2 .feature { text-align: center; padding-bottom: 50%; margin-bottom: 75px;}

.section2 .desktop, .section2 .tablet, .section2 .phone, .section2 .laptop { position: absolute; bottom: 0; }
.section2 .desktop img, .section2 .tablet img, .section2 .phone img, .section2 .laptop img { width: 100%; height: auto;}
.section2 .desktop { max-width: 60%; left: 10%; }
.section2 .tablet { max-width: 45%; z-index: 5; left: 53%; }
.section2 .laptop { max-width: 55%; z-index: 5; left: 40%; bottom: -10%; }
.section2 .phone { max-width: 13%; z-index: 5; left: 3%; }

#kumo .feature { padding-bottom:35%; }

.pre-footer { padding: 25px 0 20px; color:#fff;}
.pre-footer .fullwidth {text-align:center; }
.pre-footer img { height: 30px; width: auto; margin-right: 5px; margin-bottom: -7px;}
.pre-footer a { font-weight: bold; }

.footer .l { float:left;}
.footer .r { float:right;}
.footer a { color: #7f6c5f;}
.footer a:hover { color: #fff;}


/* Flip Divs */
.flip-container,
.no-flip-container { 
    perspective: 1000px; 
    position:relative; 
    margin: 0 5% 5% 0;
    overflow: hidden;
}

.flip-container .detail-bar,
.no-flip-container .detail-bar { 
    z-index: 5;
    width:100%;
    background: #594b41;
    position:absolute;
    color: #fff;
    font-size: 16px;    
    bottom:-200px;
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
}

.flip-container div:hover .detail-bar,
.flip-container div.hover .detail-bar,
.no-flip-container div:hover .detail-bar,
.no-flip-container div.hover .detail-bar { bottom: 0;}

.flip-container .detail-bar > div,
.no-flip-container .detail-bar > div {
    padding: 15px 20px;
}

.detail-bar .l { float:left;}
.detail-bar .r { float:right;}
.detail-bar a.icon img{
    height: 100%;
    max-height: 25px;
    width: auto;
    margin-left: 7px;
}

.detail-bar #mag { z-index: 15; }

.flipper .front, .flipper .back { transition: 0.6s; transform-style: preserve-3d; display:block; width:100%;}
.front, .back { backface-visibility: hidden; position: absolute; top: 0; left:0;}
.front { z-index:2; transform: rotateY(0deg);}
.flipper img { width: 100%; }
.back {transform: rotateY(180deg); width: 100%; height: 100%; }

.flip-container.hover .flipper .front { transform: rotateY(180deg);}
.flip-container.hover .flipper .back { transform: rotateY(360deg);}

.section2 .brown .detail-bar { background-color: #594b41 }
.section2 .orange .detail-bar { background-color:#c8783f; }
.section2 .yellow .detail-bar { background-color:#c9b14e; }
.section2 .green .detail-bar {  background-color:#88b16d; }
.section2 .teal .detail-bar { background-color:#008871; }
.section2 .blue .detail-bar { background-color:#69b0d1; }
.section2 .purple .detail-bar { background-color:#8479a0; }
.section2 .pink .detail-bar { background-color:#da59a1; }

/* iham Brandt iHammer */
    #ihammer .header { background-image: url(../images/ihammer/Banner-Brandt_iHammer.jpg); background-color: #f1f0ee; }

/* closet The Closet Guy */
    #closet .header { background-image: url(../images/closet-guy/Banner-The_Closet_Guy.jpg); background-color: #eeeeed; }
    .closet1 { padding-bottom: 103.6%; }
    .closet2 { padding-bottom: 150.2%; }

/* ryan Ryan Homes and Development */
#ryan .header { background-image: url(../images/ryan-homes/Banner-Ryan_Homes.jpg); background-color: #fff; }

/* clean The Cleaning Guy */
#cleaning .header { background-image: url(../images/cleaning-guy/Banner-The_Cleaning_Guy.jpg); }
.cleaning1 { padding-bottom: 60%; }
.cleaning2 { padding-bottom: 258.62%; }

/* smse SMS Elephant */
#smse .header { background-image: url(../images/smse/Banner-SMS_Elephant.jpg); }

/* kumo Kumoricon */

#kumo .col-4.right .no-flip-container, #kumo .col-4.right .flip-container { margin-right: 0; }

#kumo .header { background-image: url(../images/kumoricon/Banner-Kumoricon.jpg) }
#kumo .divider { border: 0; border-bottom: 1px dashed #adadad; margin:60px 0 25px;}
#kumo .divider.first { margin: 0 0 25px; }

#kumo .title { max-width:30%; padding: 50px 0 25px 0; }
.kumo1 { padding-bottom: 82.76%; }
.kumo2 { padding-bottom: 100%; }
.kumo3 { padding-bottom: 75%; }
.kumo4 { padding-bottom: 65.65%; }
.kumo5 { padding-bottom: 153.77%; }
.kumo6 { padding-bottom: 154.52%; }
.kumo7 { padding-bottom: 56.7%; }
.kumo8 { padding-bottom: 108.25%; }
.kumo9 { padding-bottom: 117.74%; }
.kumo10 { padding-bottom: 125%; }
.kumo11 { padding-bottom: 76.49%;}
.kumo12 { padding-bottom: 63.27%; }
.kumo13 { padding-bottom: 147%; }
.kumo14 { padding-bottom: 130.3%;}
.kumo15 { padding-bottom: 128.55%; }
.kumo16 { padding-bottom: 51.21%; }
.kumo17 { padding-bottom: 88.81%; }
.kumo18 { padding-bottom: 58.46%; }

/* barr Wes Barr */
#barr .header { background-image: url(../images/barr/Banner-Barr.jpg); }
.barr1, 
.barr5 { padding-bottom: 64.7%; }
.barr2 { padding-bottom: 71.3%; }
.barr3, 
.barr4 { padding-bottom: 62.5%; }
.barr6 { padding-bottom: 130.95%; }
.barr7 { padding-bottom: 100%; }

/* tmn TradeMark Nitrogen */
#tmn .header { background-image: url(../images/tmn/Banner-TradeMark_Nitrogen.jpg);}

/* dew Dew Chilli Parlor */
#dew .header { background-image: url(../images/dew/Banner-Dew_Chilli_Parlor.jpg); background-color: #939393; }
.dew1 { padding-bottom: 194.25%; }
.dew2 { padding-bottom: 73.03%; }
.dew3 { padding-bottom: 154.78%; }
.dew4 { padding-bottom: 239%; }
.dew5 { padding-bottom: 57.14%}

/* smic Standard Mutual */
#smic .header { background-image: url(../images/smic/Banner-Standard_Mutual.jpg) }

/* hfh HFH */
#hfh .header { background-image: url(../images/hfh/Banner-Habitat_for_Humanity.jpg); }

.hfh1, .hfh2, .hfh3, .hfh4, .hfh6 { padding-bottom:  129.31%; }
.hfh5 { padding-bottom: 77.33% }
.hfh7 { padding-bottom: 114.44%; }
.hfh8 { padding-bottom: 92.83%; }
.hfh9 { padding-bottom: 92.69%; }

/* angle Angle Communications */
#angle .header { background-image: url(../images/angle/Banner-Angle_Communications.jpg); }

/*---*/

@media handheld, screen and (max-width:1300px) {
    .fullwidth { width: 90%; }
}

@media handheld, screen and (max-width:990px) {
    .section2 .content.mid { padding: 0 1%; }
}

@media handheld, screen and (max-width:800px) {

    .header { min-height: 400px; }

    .back h1 { font-size: 2em; }
    .flip-container, .no-flip-container { margin: 0 0 75px;}

    .section1 { padding: 75px 0; }
    .section1 img { 
        max-height: 200px;
        max-width:80%;
        float: none;
        margin: 0 auto;
        padding: 0 0 50px;
        display:block;
    }

    .section2 { padding: 0;}
    .section2 .feature { padding-bottom: 0; margin-bottom: 0; }
    .section2 .desktop, .section2 .tablet, .section2 .phone, .section2 .laptop { 
        position: relative; 
        left: 0; 
        bottom: 0;
        max-width: 100%; 
        padding: 0 0 75px; }
    .section2 .phone img { max-height: 800px; width: auto;}

    #ihammer .header { background-image: url(../images/ihammer/Banner-Brandt_iHammer-mobile.jpg); }
    #closet .header { background-image: url(../images/closet-guy/Banner-The_Closet_Guy-mobile.jpg); }
    #ryan .header { background-image: url(../images/ryan-homes/Banner-Ryan_Homes.jpg); }
    #cleaning .header { background-image: url(../images/cleaning-guy/Banner-The_Cleaning_Guy-mobile.jpg); }
    #smse .header { background-image: url(../images/smse/Banner-SMS_Elephant-mobile.jpg); }
    #kumo .header { background-image: url(../images/kumoricon/Banner-Kumoricon-mobile.jpg); }
    #barr .header { background-image: url(../images/Barr/Banner-Barr-mobile.jpg); }
    #tmn .header { background-image: url(../images/TMN/Banner-TradeMark_Nitrogen-mobile.jpg); }
    #dew .header { background-image: url(../images/dew/Banner-Dew_Chilli_Parlor-mobile.jpg); }
    #smic .header { background-image: url(../images/smic/Banner-Standard_Mutual-mobile.jpg); }
    #hfh .header { background-image: url(../images/hfh/Banner-Habitat_for_Humanity-mobile.jpg);}
    #angle .header { background-image: url(../images/angle/Banner-Angle_Communications-mobile.jpg);}

    #ihammer .header, #closet .header, #ryan .header, #cleaning .header, 
    #smse .header, #kumo .header, #barr .header, #tmn .header, 
    #dew .header, #smic .header, #hfh .header, #angle .header { background-size: auto 400px; }

    .dew0 { width: 80%; margin-left: auto; margin-right: auto;}

    #kumo .title { max-width:60%; }
    #kumo .feature { padding-bottom: 0; }
}

@media handheld, screen and (max-width:600px) {

    .flip-container .detail-bar, .no-flip-container .detail-bar { 
        font-size: 18px;
    }
    .flip-container .l { padding: 0 0 10px; }

    .section1 .fullwidth > div { display: block; }
    .section1 h5 { padding: 0 0 20px;}
    .section1 .col-4, .section1 .col-8 { width: 100%; }
    .section1, .pre-footer { padding: 40px 0; } 
    .section2 { padding: 0 0 40px; }
    .section2 .content { display:block; width:100%;}
    .section2 .content.mid { padding: 0; }
    .footer .l, .footer .r { float: none;}

    #hfh .section1 h5 { padding: 0; }
    #hfh .section1 .fullwidth > div:first-child { padding-bottom: 20px; }

    .cell { font-size: 0.9em; }
    
    #kumo .title { max-width: 100%; }

}

@media handheld, screen and (max-width: 425px) {
    .section2 .phone img { width: 100%; max-height: auto;}
}

@media handheld, screen and (max-width:350px) {
    .pre-footer img.desktop, .pre-footer img.mobile { height: 20px; }
    .back h1 { font-size: 1.2em; }
}