@font-face {
    font-family: 'otama.epregular';
    src: url('Otama-ep-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'open_sanslight';
    src: url('OpenSans-Light-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

*{
    margin:0;
    padding:0;
}
body, p{
    font-family: 'open_sanslight', sans-serif;
}
.wrapper{
    width:960px;
    margin:0 auto;
    z-index:10;
}
header{
    width:100%;
    height:100px;
    padding-top:10px;
    background-color:#fff;
    z-index:103;
    position:fixed;
    top:0;
    transition:top 0.35s ease-in-out;
}

    header p{
        width:190px;
        color:#000;
        position:relative;
        top:38px;
        left:0;
        margin-left:20px;
        text-align:left;
        font-size:25px;
        padding:0 .25em;
    }
    header a{
        text-decoration: none;
    }

nav {
    width:100%;
    position:relative;
    top:2em;
    right:2%;
    text-align:right;
}
    nav a{
        color:#40434c;
        padding:.25em 1em;
        text-decoration: none;
        font-size:.85em;
        border:solid 1px #40434c;
    }
    nav a:hover, nav a:active{
        color:#fff;
        background-color:#902B20;
        border:solid 1px #902B20;
        -webkit-transition: all 0.35s;
        -moz-transition: all 0.35s;
        transition: all 0.35s;        
    }
    .nav-up{
        top:-110px;   
    }
    .nav-down{
        display:block!important;
        top:0px;
    }
#intro{
    height:700px;
    margin:0;
    background: #40434c;
    background: -moz-linear-gradient(top,  #2A3542 0%, #ffffff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2A3542), color-stop(100%,#ffffff));
    background: -webkit-linear-gradient(top,  #2A3542 0%,#ffffff 100%);
    background: -o-linear-gradient(top,  #2A3542 0%,#ffffff 100%);
    background: -ms-linear-gradient(top,  #2A3542 0%,#ffffff 100%);
    background: linear-gradient(to bottom,  #2A3542 0%,#ffffff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#40434c', endColorstr='#ffffff',GradientType=0 );
}   
    #introText{
        padding-top:100px;
    }
    #hi{
        font-family: 'otama.epregular',serif;
        font-size:14em;
        color:#fff;
    }
    #im{
        font-family:'open_sanslight', sans-serif;
        font-size:4em;
        color:#40434c;
        text-shadow:0px 1px #fff;
    }
    #im span{
        font-size:0.78em;
    }
.divider{
    width: 0; 
    height: 0;
    margin:20px auto 0; 
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 12px solid #fff;
    position:relative;
    top:11px;
}
.divider2{
    width: 0; 
    height: 0;
    border-right: 20px solid #2A3542;
    border-top: 15px solid transparent;
    border-bottom:15px solid transparent;
    position:relative;
    top:110px;
    left:-50px;
    z-index:100;
}
#logo .divider2{
    top:60px;
    left:460px;
}
#about .divider2{
    top:-40px;
    left:460px;
}
.divider3{
    width: 0; 
    height: 0;
    border-left: 20px solid #2A3542;
    border-top: 15px solid transparent;
    border-bottom:15px solid transparent;
    position:relative;
    top:110px;
    left:480px;
    z-index:100;
}
#logo .divider3{
    top:60px;
    left:0;
}
#about .divider3{
    top:-40px;
    left:-31px;
}
.divider4{
    width: 0; 
    height: 0;
    margin:20px auto 0; 
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 12px solid #2A3542;
    position:relative;
    top:-20px;
}
.divider5{
    width: 0; 
    height: 0;
    border-right: 20px solid #fff;
    border-top: 15px solid transparent;
    border-bottom:15px solid transparent;
    position:relative;
    top:85px;
    left:-50px;
    z-index:100;
}
.divider6{
    width: 0; 
    height: 0;
    border-left: 20px solid #fff;
    border-top: 15px solid transparent;
    border-bottom:15px solid transparent;
    position:relative;
    top:85px;
    left:480px;
    z-index:100;
}
#web{
    height:1350px;
    padding-top:50px;
    background-color:#2A3542;
    color:#fff;
}
    .page{
        font-family: 'otama.epregular',serif;
        font-size: 4.25em;
    }
    #web .desc{
        width:450px;
        height:280px;
        padding-top:20px;
    }
    .title{
        font-size:36px;
    }
    .copy{
        font-size:14px;
    }
    .copy span{
        font-size:20px;
        padding-bottom:10px;
    }
    .visit{
        text-decoration:none;
        position:relative;
        top:25px;
        color:#fff;
        padding:4px 20px;
        border: 1px solid #fff;
        z-index:101;
    }
    .more{
        text-decoration:none;
        position:relative;
        top:26px;
        color:#fff;
        padding:0 25px;
        overflow:hidden;
        border:1px solid #fff;
        z-index:200;
    }
    .left{
        float:left;
        text-align:right;
    }
    .right{
        float:right;
    } 
    .second{
        color:#40434c;
    }
.cycle-slideshow{
    width:800px;
    height:500px;
    margin:0 auto;
}    
.prev {
    width:36px;
    height:36px;
    border:solid 1px #fff;
    text-align:center;
    font-size:28px;
    position:absolute;
    left:1em;
    top:45%;
    margin-top:-18px;
    cursor:pointer;
    z-index:101;
    } 
.next{
    width:36px;
    height:36px;
    border:1px solid #fff;
    text-align:center;
    font-size:28px;
    position:absolute;
    top:45%;
    right:1em;
    margin-top:-18px;
    cursor:pointer;
    z-index:101;
}
.next:hover, .prev:hover{
    border:solid 1px #902B20;
    background-color:#902B20;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;    
}
.detailCopy h3{
    font-size:28px;
    padding-left:80px;
    text-align:left;
}
.detailCopy p{
    margin-top:-16px;
    padding-right:80px;
    text-align:right;
}
#print{
    height:1620px;
    padding-top:45px;
    color:#2A3542;

}
    #print .desc{
        width:450px;
        height:250px;
        padding-top:50px;
    }
    #print .morph-content{
        color:#fff;
    }
    #converse{
        background-image: url('../images/converse.jpg');
    }
    #xbox{
        background-image: url('../images/xbox.jpg');
    }
    #eco{
        background-image: url('../images/eco.jpg');
    }
    #vs{
        background-image: url('../images/vs.jpg');
    }
    #epa{
        background-image: url('../images/epa.jpg');
    }
    #print .detailCopy h3{
        padding-top:20px;
    }
    #print .detailCopy p{
        margin-top:-40px;
    }
    #printXbox{
        width:387px;
        margin:0 auto;
    }
    #printVs{
        width:386px;
        margin:0 auto;
    }
    #printEpa{
        width:647px;
        margin:0 auto;
    }
#logo{
    height:1100px;
    padding-top:50px;
    background-color:#2A3542;
    color:#fff;
    }
    #logo .artwork{
        width:480px;
        height:150px;
        background-color:#fff;
    }
     #logo .desc {
        width:450px;
        height:120px;
        padding-top:30px;
     }
    #logo .plus{
        padding:0!important;
    }
    #m9Logo {
        background: url('../images/m9.gif') center;
    } 
    #bjdLogo {
        background: url('../images/bjd.gif') center;
    }
    #tltLogo {
        background: url('../images/tlt.gif') center;
    }
    #ptzLogo {
        background: url('../images/9ptz.gif') center;
    }
    #qbLogo {
        background: url('../images/qb.gif') center;
    }
    #zLogo {
        background: url('../images/z.gif') center;
    }
#about{
    height:850px;
    padding-top:50px;
    color:#2A3542;
}
    #about .artwork.first {
        height:250px;
    }
    #about .artwork.first .copy{
        padding-top:20px;
    }
    #about .desc.first {
        height:250px;
    }
    #about .title.first{
        padding-top:100px;
    }
    #about .artwork {
        width:480px;
        height:150px;
        background-color:#2A3542;    
    }
    #about .desc {
        width:450px;
        height:150px;
    }
    #about .title{
        padding-top:50px;
    }
    #about .copy{
        color:#fff;
        padding:30px 30px 0 30px;
    }
    .copy a{
        color:#fff;
    }

#copyright{
    background-color:#2A3542;
    height:160px;
}
.connect{
    width:50%;
}
#tW{
    background: url('../images/connect.png');
    background-position: 0px 0px;
}
#tW:hover{
    background-position: 30px 0px;
    border:1px solid #4099ff;
}
#iN{
    background: url('../images/connect.png');
    background-position: 0px 90px;
}
#iN:hover{
    background-position: 30px 90px;
    border:1px solid #0e76a8;
}
#pI{
    background: url('../images/connect.png');
    background-position: 0px 60px;
}
#pI:hover{
    background-position: 30px 60px;
    border:1px solid #c92229;    
}
#mL{
    background: url('../images/connect.png');
    background-position: 0px 30px;
}
#mL:hover{
    background-position: 30px 30px;
    border:1px solid #762f21;   
}
.btn{
    width:30px;
    height:30px;
    border:1px solid #fff;
    float:left;
    margin:70px 10px 0 0;
}
#copyright .connect{
    width:100%;
}
#copyright a{
    text-decoration:none;
    color:#fff;
}
#copyright .copy{
    text-align:right;
    padding-top:84px;
    color:#fff;
}