@charset "utf-8";
/* CSS Document */

/*	
	Project: Vita Organic Website
    Date: 10/12/2013
	Version: 1.0
	Author: Tin Hsu
*/

* {
  box-sizing: inherit;
  transition-property: all;
  transition-duration: .6s;
  transition-timing-function: ease;
}


html, body{        
    margin: 0 auto;
    background: #fff;
    color: dimgray;
    font-size: 14px;
    font-family: mr-eaves-xl-modern, Museo Sans Rounded, sans-serif;
    font-style: normal;
    font-weight: 200;
}

section, header, nav, aside, article{
    display: block;
}

div{
    display: block;
    margin: auto;
    position: relative;
}

footer{display: block;}

/* */
a{cursor: pointer;}
a:hover{    
    text-decoration: none;
}
a:active, a:focus{}

p{font-size: 16px; font-family: mr-eaves-xl-modern, Museo Sans Rounded, sans-serif;}

strong, b{font-weight: 600;}

em{}

/* */
h1{font-size: 36px;}

h2{font-size: 32px;}

h3{font-size: 16px;}

h4{font-size: 24px;}

h1,h2,h3,h4{font-family: mr-eaves-xl-modern, Museo Sans Rounded, sans-serif;}

/* */
ul,li{
    list-style: none;
    text-decoration: none;
}

img{border: none;}
hr{}
canvas{}
figcaption{font-weight: 600;}

/** main id selector **/
div#wrapper{
    width: 100%; 
    min-width: 1180px;
    height: auto; 
    background: #fff; 
    margin: 0 auto; 
    margin-top: 0; 
    position: relative;
}

    #header{
        width: 100%; 
        height: 67px; 
        position: absolute; 
        
        top: 0; 
        z-index: 100; 
        background: rgba( 255, 255, 255, .7);
       
    }      
        #header .logo{
            width: 135px; 
            height: 66px; 
            margin-top: 3px;
            text-align: center;
            float: left;    
            margin-left: 0;
            -webkit-transition: all .3s;
            -moz-transition: all .3s;
            -ms-transition: all .3s;
            -o-transition: all .3s;
            transition: .3s;
        }
        .navClass{margin-top: 1px;}
        #header .top-email{
            width: auto;
            height: 67px;
            position: absolute;
            color:#5994cc; 
             
            display: block;     
            float: right;
            
            right: 0px;            
            margin: 0 0 0 50px;
            padding: 0 10px 0 10px;            
                        
            font-size: 28px;
            font-weight: 100;
            
            line-height: 2.5;
            text-align: right;
            z-index: 101;
            clear: both;
        }
            
        #header .nav-menu{
            width: 1180px;            
        }
        #header ul{
            width: 920px; 
            float: right; 
            margin: 0 auto;
            display: block; 
            text-align: center; 
            zoom: 1;
        }
        #header ul:after{
            content: ""; 
            clear: both;
            display: block;
        }
            #header li{
                display: block; 
                float: left; 
                margin: 0px 70px 0 10px;
                width: 120px;
                height: 50px;                
                line-height: 4.5;
            }

    #banner{
        display: block;
        width: 100%;
        height: 350px; 
        position: relative; 
        background-repeat: no-repeat;
        background: url(../_img/banner.jpg) no-repeat;
        background-position: center;
        background-size: 100% auto;        
    }
        .banner-slogan{
            position: absolute; 
            z-index: 1; 
            margin-bottom: 10px;
            bottom: 0px; 
            right: 60%; 
                                     
            color: #fff;
            font-size: 40px;
            letter-spacing: 1.5px;
            
            font-family: fira-sans, sans-serif;
            font-style: normal;
            font-weight: 300;
        }

    
    #content{
        height: auto; 
        margin: 0; 
        margin-top: 0; 
        margin-bottom: 50px;
        
    }
        #heavy-duty{
                       
            background: #fff;
            background-size: 100% 100%;
        }

        #medium-duty{            
            background:#f2f2f2;
            background-size: 100%;
            margin-top:50px;
        }
       
        #customers-section{
            background: #ffffff;
            width: 1280px;
            height: auto;
            padding-bottom:50px;    
            margin-top: 100px;
        }
            .customer-ps01 img, .customer-ps02 img{box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3); padding: 1px;}
            #customer-photo{
                width: 1100px; 
                height: auto; 

                margin: 0 auto; 
                display: block;

                bottom: 0; 
                margin-top:15px;
                margin-bottom: 15px;
            }
                .customer-ps01{
                    display: block; 
                    height: 974px; 
                    width: 650px; 

                    float: right;     
                    margin-bottom: 0;
                    clear: both; 
                }
                .customer-ps02{
                    display: block; 
                    height: 974px; 
                    width: 432.88px; 
                    margin-top: 0px;
                    margin-bottom: 0;
                }
                #photo-gallery{
                    width:100%; 
                    height:auto; 
                    margin:0 auto; 
                    margin-top:45px;                    
                }
                #photo-gallery img{
                    position: relative;
                    clear: right;
                }
        #info-aboutUs{
            width: 100%;
            height: auto; 
            margin: 0 auto;
            background: #f2f2f2;            
        }
       
            #mainContent{
                width: 1024px;
                height: auto;
                margin: 0 auto;    
                
                -webkit-box-shadow: 6px 1px 25px -5px rgba(71,67,55,1);
                -moz-box-shadow: 6px 1px 25px -5px rgba(71,67,55,1);
                box-shadow: 6px 1px 25px -5px rgba(71,67,55,1);         
            }

                #middle-content{
                    width: 750px;                     
                    margin-top: 80px; 
                    margin-bottom: 40px; 
                    padding-bottom:20px;
                    
                    font-size: 14px;
                    font-family: mr-eaves-xl-modern, sans-serif;
                    font-style: normal;
                    font-weight: 200;
                    line-height: 2; 
                    letter-spacing: 2.2px;
                    text-align: left;
                } 
                #aboutUs-photo{
                    width: 760px; 
                    margin: 0 auto;                    
                    
                    padding-bottom: 30px;
                }

    #sitmap{
        width: 100%;
        height: 160px;
        background: #161230; /* For browsers that do not support gradients */
        background: -webkit-linear-gradient(#161230, #000); /* For Safari 5.1 to 6.0 */
        background: -o-linear-gradient(#161230, #000); /* For Opera 11.1 to 12.0 */
        background: -moz-linear-gradient(#161230, #000); /* For Firefox 3.6 to 15 */
        background: linear-gradient(#161230, #000); /* Standard syntax */   
        
        margin: 0 auto;
        color: #ccc;
        position: absolute;
        padding-top: 0px;
        margin-bottom: 0px;
        clear: both;
    }
        #sitemap ul,li{
            display: block; 
            list-style: none;
        }
        #sitemap p{
            font-size: 10px;
        }
        .none a{
            text-decoration: none;     
            color: #fff;
            margin-left: -45px;
        }
        .none a:hover{
            text-decoration: underline;
        }
        .site-left{
            width: 250px;
            height: auto;
            
            position: absolute;
            left: 30%;
            padding: 10px;
            margin-bottom: 20px;
            
            margin: 0 auto;
            padding: 10px;
            color: #ccc;
            clear: both;
        }
        .site-left li{
            margin: 5px; 
            margin-top: 15px;
        }

        .site-right{
            width: 300px;
            height: auto;
            
            position: absolute;
            right: 25%;
            padding: 10px;
            margin-bottom: 20px;
          
            margin: 0 auto;
            color: #c3c3c3;
            clear: both;
        }
        .site-left li,
        .site-right p{
            font-size: 10px;   
            margin-left: 20px;
        }
        .site-right p{
            padding-left: 5px;
        }
        .site-left h3,
        .site-right h3{
            color:#fff;
        }

    #footer{
        width: 100%; 
        height: 30px; 
        background: #000;
        position: fixed;
        float: left;
        left: 0;
        bottom: 0;
        z-index: 99999;
    }   
        #footer p{
            color:#707070;
            margin: 0 auto;
            text-align: center;
            line-height: 2.8;
            font-size: 8px;
        }


/** main class selector **/

.section-title{
    text-align: center;
    font-size: 50px; 
    color: #2b7ace; 
    margin: 0 auto;
    margin-top:50px;
    padding-top: 10px;
    z-index:100000;
    position: relative;
}
    .section-title span{
        color:#4d4d4d;
    }
    .section-title-hr{
        width: 70px;
        border: 1px solid #4d4d4d;
        margin-top: 15px;
    }

/* btn */
.btn {
  color: #666;
  cursor: pointer;
  display: block;
    
  font-size:14px;
  font-weight: 600;

  margin: 0 auto 2em;
  max-width: 120px; 
  position: relative;
  text-decoration: none; 
  
  width: 100%; 
  
  @media(min-width: 400px) {
    display: inline-block;
    margin-right: 2.5em;
  
    &:nth-of-type(even) {
      margin-right: 0;
    }
  }
  
  @media(min-width: 600px) {
  
    &:nth-of-type(even) {
      margin-right: 2.5em;
    }
    
    &:nth-of-type(5) {
      margin-right: 0;
    }
    
  }
  
  &:hover { text-decoration: none; }
  
}

.nav-btn{
    letter-spacing: 0;      
}
.nav-btn:hover, 
.nav-btn:active{
    letter-spacing: 4px;
    font-weight: 600;
    color: #5994cc;
}
.nav-btn:after, 
.nav-btn:before{
    backface-visibility: hidden;
    border: 3px solid rgba(#fff, 0);
    bottom:0;
    content:"";
    display: block;
    margin: 0 auto;
    position: relative;
    transition: all 280ms ease-in-out;
    width: 0;
}
.nav-btn:hover:after,
.nav-btn:hover:before {
    backface-visibility: hidden;
    
    border-bottom:2px solid #5994cc;
    transition: width 350ms ease-in-out;
    width: 80%;
}

.nav-btn:hover:before {
  bottom: auto;
  top: 0;
  width: 70%;
}

/* Transport and Image */
.product-section{   
    width: 1280px;
    height:auto;
}

.image-productContent{
    width: 1280px; 
    height: auto;     
   
    margin: 0 auto;
    overflow: hidden;    
    z-index: 0;
}
    .image-productContent hr{
        width: 700px;
        border: 1px solid #fff;
        box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
    .image-productContent img{
        margin: 0 auto; 
        text-align: center; 
        margin-top: 50px; 
        margin-left:0;
    }

.product-info{
    width: 500px; 
    height: 160px; 
    position: relative;
    display: inline-block;
    
    float: right;    
    margin-top: -450px;
    margin-right: 30px;
    padding-bottom: 30px;
    z-index: 10000;
}

.product-info img{
    width: 150px;
    height: 150px;
    margin: 0 auto;
    border: 1px solid #ccc;
}

.product-box{
    vertical-align:middle; 
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 5px 10px 0 rgba(0, 0, 0, 0.1);
}

/* Product and Image */
.product-info figure{
    margin-top: 0px;
}

.product-photos{
    width: 1280px; 
    
    position: relative; 
    background: #fff; 
    overflow: hidden;
}
    .oneThird{
        width: 100%; 
        display: block; 
        margin-right: 5px; 
        margin-left: 5px;
    }
    .oneThird img{
        width: 33%; 
        height: auto; 
        float: left; 
        clear: right; 
        padding: 1px;
    }

.features-bg{
    background: red; 
    border-radius: 5px; 
    width: 90px; 
    height: 25px; 
    
    line-height: 2; 
    font-size:12px; 
    color: #fff; 
    text-align: center;
    
    position: absolute;    
    bottom: 175px;
    right: 150px;
}

.single-linehight{
    line-height: 2.5;    
}

.call-action{ 
    background:#ffb600; 
    margin:0 auto; 
    margin-top:-40px;
    width:100%;
    height:150px; 
    text-align:center;
    
    -webkit-box-shadow: inset 0px 12px 24px -6px rgba(71,67,55,1);
    -moz-box-shadow: inset 0px 12px 24px -6px rgba(71,67,55,1);
    box-shadow: inset 0px 12px 24px -6px rgba(71,67,55,1);
}

.call-action h4{
    color: #fff;
    border: 1px solid #fff;
    width: 500px;
    height: 50px;
    line-height: 2;
    margin: 0 auto;
    padding:5px;
    position: relative;
    top:45px;
    font-weight: 100;
}

.call-action h4 a, .call-action h4 a:hover{
    text-decoration: none;
    color: #fff;
}

/* IMG set in 1/3 in a row */
    .oneThird-02{
        width: 99%; 
        height: auto;
        display: block; 
        margin-right: .5px;        
    }
    .oneThird-02 img{
        width: 33%;        
        float: left; 
        clear: right; 
    }

/* IMG set in 1/2 in a row */
    .oneHalf{
        width: 98%; 
        height: 810px;
        display: block; 
    }
    .oneHalf img{
        width: 49.8%;     
    }