/**************
** UTILITIES **
**************/
.hidden { display:none; visibility:hidden;}
.accessibility,
.screen-reader-text { position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }
html,body { height: 100%; }
body { min-height:100%; background: #fff; font-family: 'Helvetica Neue', Helvetica, verdana, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W6',"ＭＳ Ｐゴシック","MS PGothic", sans-serif; -webkit-backface-visibility: hidden; }
.edgeLoad-NOVATION_LOGO { }
.no-animation * { -webkit-animation: none !important; -o-animation: none !important; -ms-animation: none !important; animation: none !important; -webkit-transition: none !important; -moz-transition: none !important; -ms-transition: none !important;  -o-transition: none !important; transition: none !important; }

::selection { background: #5185b1; color: #FFF; }
::-moz-selection { background: #5185b1; color: #FFF; }

.vcard{ color: #000; }

/***********
** NAVBAR **
***********/
.navbar { z-index: 99999; position: fixed;}
.navbar-inverse .call-us { display: none; }
.navbar .container .nav li ul.fold { list-style:none;margin:0;padding:10px 0 5px 20px; display: none; position: absolute; background: url(../img/subnav.png) 0 0 no-repeat; left: 120px; top:-10px; z-index: 4;}
.navbar .container .nav li ul.fold li { float:none; background:none; font-size:13px; line-height:22px; padding: 0; margin: 0;}
.navbar .container .nav li ul.fold li a { text-indent: 0; display: block; color:#666; height:30px; padding:0; font-size:12px;}
.navbar .container .nav li ul.fold li a:hover { color: #5185b1; text-decoration: none; }


.navbar .container .nav li > a span.txtHover { display:none; position:absolute; left:0; top:-8px; background:#eee; letter-spacing: 1px; pointer-events:none; font-family: 'Helvetica Neue', Helvetica, verdana, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W6',"ＭＳ Ｐゴシック","MS PGothic", sans-serif;text-indent: 0; font-weight: bold; font-size:12px; }
.navbar .container .nav li ul.fold li a span.txtHover { background:#222; }
.navbar .container .nav li > a span { white-space:nowrap; padding-top:6px; padding-bottom:6px;  }
.navbar .m_facebook,.navbar .m_instagram { display: none; }

@media screen and (max-width: 980px) {
    .navbar .brand img { width: 30px; margin-left: 10px; }
    .navbar .brand .org { color: #000; display: inline-block; left: 80px; position: absolute; text-shadow: 0 1px 0 rgba(255,255,255,.125), 0 0 30px rgba(255,255,255,.25); top: 20px; width: 85px;}
    .navbar .btn-navbar { margin-top: 10px; }
    .navbar .container .nav li > a { font-size:13px; text-transform: uppercase; display: block; height: 22px; position: relative;}
    .navbar footer { display: none; }
    .navbar-fixed-top { margin-bottom: 0; }
    .navbar-fixed-top.static { position: fixed; }
    .navbar #Stage {display:none;}
    .navbar .container .nav li.last { display: block; }
    .navbar .container .nav li ul.fold { list-style:none;margin:0;padding:10px 20px; display: none; position: relative; background: #fff; left: 0; top:0; height:auto; z-index: 4;}

}

@media screen and (min-width:980px) {
    .navbar { background: #f6f6f6 url(../img/noise.jpg); border-right: 1px solid #D2D3D3; height: 100%; left: 0; min-height:620px; position: fixed; top: 0; width: 240px; z-index: 5000; }
    .navbar .navbar-inner { background: none; border: 0; -webkit-box-shadow: none;-moz-box-shadow: none;box-shadow: none }
    .navbar .brand { display: block; float: none; margin: 50px 0 30px 30px; width: 180px; height: 45px; background: url('../img/logo.png') no-repeat 0 0;  }
    .navbar .brand .org { display: none; }
    .navbar .container { width: auto; }
    .navbar .container .nav li { display: block; position: relative; font-family: 'BrandonGrotesqueBold', 'Helvetica Neue', verdana, sans-serif; font-size: 14px; margin: 0 0 0 40px; padding: 0 0 15px; letter-spacing: 2px; text-align: left; text-transform: uppercase; width: 200px; }
    .navbar .container .nav li.leaf { height:20px; }
    .navbar .container .nav li.sp { display: none }
    .navbar .container .nav li > a { text-shadow: none; color: #3E4143; padding: 0;}
    .navbar .container .nav li > a:hover { color: #5185b1; }
    .navbar .container .nav li > a.active { -webkit-box-shadow: none;-moz-box-shadow: none;box-shadow: none; background: none; color: #5185b1; text-decoration: none; }
    .navbar footer { bottom: 0; height: 210px; margin-left: 40px; position: absolute; }
    .navbar .brand img { display:none; }
    .navbar #Stage {margin-top: 9px;}
    .navbar .container .nav li ul.fold { list-style:none;margin:0;padding:10px 0 5px 20px; display: none; position: absolute; background: url(../img/subnav.png) 0 0 no-repeat; left: 120px; top:-10px; z-index: 4; width: 230px;}
    .navbar .container .nav li ul.fold li a { color:#ccc; }
    .about .navbar .container .nav >li.leaf:nth-child(1) a.gna { -webkit-box-shadow: none;-moz-box-shadow: none;box-shadow: none; background: none; color: #5185b1; text-decoration: none; }
    .menu .navbar .container .nav >li.leaf:nth-child(2) a.gna { -webkit-box-shadow: none;-moz-box-shadow: none;box-shadow: none; background: none; color: #5185b1; text-decoration: none; }
    .goods .navbar .container .nav >li.leaf:nth-child(4) a.gna { -webkit-box-shadow: none;-moz-box-shadow: none;box-shadow: none; background: none; color: #5185b1; text-decoration: none; }
    .shop-data .navbar .container .nav >li.leaf:nth-child(3) a.gna { -webkit-box-shadow: none;-moz-box-shadow: none;box-shadow: none; background: none; color: #5185b1; text-decoration: none; }
    .recruit .navbar .container .nav >li.leaf:nth-child(7) a.gna { -webkit-box-shadow: none;-moz-box-shadow: none;box-shadow: none; background: none; color: #5185b1; text-decoration: none; }

}

/******************
** NAVBAR FOOTER **
******************/
.navbar .fc-bnr { display: block; width: 150px; height: 50px; background: url(../img/fc.jpg) 0 0 no-repeat; }
.navbar .fc-bnr:hover { background-position: left bottom; }
.navbar .org { font-family: 'BrandonGrotesqueBold'; line-height: 30px; font-size:14px; letter-spacing: 1px; color:#333;}
.navbar .tel { margin-top: 10px; }
.navbar .sharing { margin: 20px 0 15px 5px; }
.navbar .sharing li { list-style: none; float: left; text-indent: -1000px; margin-right: 10px; }
.navbar .sharing li a { width: 32px; height: 32px; display: block; background-image: url('../img/social_icon.png'); filter: alpha(opacity=100); -khtml-opacity: 1.0; -moz-opacity: 1.0; opacity: 1.0;  -webkit-transition: opacity .25s ease-in; -moz-transition: opacity .25s ease-in; -ms-transition: opacity .25s ease-in; -o-transition: opacity .25s ease-in; transition: opacity .25s ease-in;}
.navbar .sharing li a:hover { filter: alpha(opacity=60); -khtml-opacity: .60; -moz-opacity: .60; opacity: .60;  }
.navbar .sharing-googleplus { background-position: -32px 0; }
.navbar .sharing-instagram { background-position: -64px 0; }
.navbar .locality { text-transform: uppercase; }
.navbar .copyright { display: inline-block; margin-top: 15px; color: rgb(106, 106, 106); font-size: 10px; text-align: center; }
.navbar .prefix { font-weight: 600; color: #191919; font-weight: 400; font-family: 'Proxima Nova Rg', 'Helvetica Neue', Helvetica, verdana, arial, sans-serif; }
.navbar a.email:hover, .navbar a.email:active{ text-decoration: none;}
.navbar a.email span{ color:#999; }
.navbar a.email span:hover, .navbar a.email span:active{ text-decoration:underline; color:#5185b1;}
.navbar a.email .prefix{text-decoration:none; color: #000;}
.navbar a.email .prefix:hover, .navbar .prefix:active{ text-decoration: none; color: #000; }

/*****************
** MAIN CONTENT **
*****************/

.content-container { position: relative; min-height: 100%; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
@media screen and (min-width: 980px) {
    .content-container { margin-left: 240px; }
}

/************
** SUB NAV **
************/
#sub_nav { padding:20px 0; text-align:center; }
#sub_nav ul { list-style: none; margin:0;}
#sub_nav li { list-style: none; margin:0 10px; display:inline-block; height:100px; width:100px; position: relative; text-align: center; background:#ddd; }
#sub_nav li a { display:inline-block; height: auto; width:100%; max-width: 80px; margin:0 auto; color:#333; }
#sub_nav li a img { display: block; width:100%; max-width: 100px; margin:0 auto; position: absolute; top:0; left:0; background:#ccc; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -ms-transition: all .5s ease-out;  -o-transition: all .5s ease-out; transition: all .5s ease-out;}
#sub_nav li a span { position: relative; z-index: 3; padding: 18px 0 0; display: block; }
#sub_nav li a:hover { text-decoration: none; color:#fff; }
#sub_nav li a:hover img { background:#5185b1; }
#sub_nav li.active a img { background:#444; }
#sub_nav li.active a { color:#fff; }
/************
** OPTIONS **
************/

.options { text-align: center; margin: 60px 0 0 20px; }
.options ul { margin: 0 ; list-style: none; list-style-position: inside; }
.options li { display: inline-block; vertical-align: top; width: 125px; margin-bottom: 30px; margin-right: 20px; }
.options li a { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); display: inline-block; border-radius: 0px; background: #000; color: #fff; height: 72px; padding-top: 53px; width: 129px; font-family: 'BrandonGrotesqueLight', "helvetica neue", helvetica, verdana, arial, sans-serif; text-transform: uppercase; font-size: 18px; letter-spacing: 1px; -webkit-font-smoothing: antialiased; font-weight: 200; position: relative; overflow: hidden; -webkit-background-clip: padding-box; background-clip: padding-box; text-decoration: none; }
.options li a:after { position: absolute; top: 0; left: 0; background: url('../img/rhombus-mask.png'); width: 129px; height: 125px; display: block; content: ''; }
.options li a:hover { }
.options li a span { display: block; text-align: center; position: relative; z-index: 100;}
.options li a .over { position: absolute; top: 0; left: -150px; width: 150px; height: 130px; background: #D15000; z-index: 0; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -ms-transition: all .5s ease-out;  -o-transition: all .5s ease-out; transition: all .5s ease-out;  -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; }
.options li.like-and-share a .over { top: -230px; left: -110px; }
.options li.contact a .over,
.options li.open-site a .over { top: 0; left: 130px}
.options li a:hover { text-decoration: none; }
.options li a:hover .over { top: 0px; left: 0px; }
.options li.open-site a,
.options li.like-and-share a { height: 80px; padding-top: 45px; }

/******************
** RELATED ITEMS **
******************/

div.gallery, aside.related { background: #ededed url(../img/wall.jpg) center top; border-top: 1px solid #ededed; margin-bottom: 0; padding-bottom: 30px; position: relative; text-align: center; }
div.gallery h2, aside.related h2 { color:#ccc; font-family: 'BrandonGrotesqueLight', "helvetica neue", helvetica, arial, verdana, sans-serif; font-weight: normal; letter-spacing: 2px; font-size: 16px; margin-bottom: 20px; margin-top: 30px; text-align: center; text-transform: uppercase; }
aside.related ul { margin: 0 auto; padding: 30px; width:80%; max-width: 900px; }
aside.related li { display: inline-block; vertical-align: top; width:30%; margin:0; padding: 0; list-style-type:none; position: relative; letter-spacing: 1px; font-family: 'BrandonGrotesqueRegular', 'Helvetica Neue', Helvetica, verdana, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W6',"ＭＳ Ｐゴシック","MS PGothic", sans-serif; }
aside.related li a { position: relative; display: block; color:#fff;}
aside.related li a:hover { color: #5185b1; text-decoration: none; }
aside.related li .rlink { display: block; width: 100%; padding:0 0 5px; text-align: left; }
aside.related li .rlink span { font-size: 12px; line-height: 19px; padding:0 0 0 14px; background: url(../img/rlink.jpg) left center no-repeat; }
aside.related li .rlink span.fb { padding:0 0 0 16px; background: url(../img/fb.png) left center no-repeat; }
aside.related li .rlink span.gp { padding:0 0 0 16px; background: url(../img/gp.png) left center no-repeat; }
aside.related li .plink { display: block; width: 100%; padding:10px 0 5px; text-align: left; color: #ccc; }
aside.related li .plink.mb { padding:0 0 5px; }
aside.related .copyright { display: none; color:#999; padding:20px 0 0; }

/************************************
** BLOG AND PORTFOLIO DETAIL ARROW **
************************************/

.overslide { background: #FFF; position: relative; z-index:10; margin: 0; }
.overslide .slidedown { position: absolute; left: 50%; top: -20px; width: 46px; height: 30px; margin-left: -23px; cursor: pointer; background: url('../img/btn-down.png') no-repeat; }
.overslide .slidedown .arrow { background: url('../img/btn-down-arrow.png') no-repeat; display: block; width: 12px; height: 9px; margin: 0 auto; margin-top: 15px; }
.overslide .slidedown .arrow.play { -webkit-animation: wiggle 1.5s infinite;  -o-animation: wiggle 1.5s infinite; animation: wiggle 1.5s infinite; }
.overslide .slidedown .arrow.stopped { -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused; }

/****************
** BREAKPOINTS **
****************/

/* Large desktop */
@media (min-width: 1200px) { }
@media (max-width: 1150px) and (min-width: 980px) {
    aside.related ul { margin: 0 auto !important; width: 100%; padding: 30px 0;}
}
@media (max-width: 980px) {
    .navbar-fixed-top { margin-left: 0; margin-right: 0;}
    .navbar .brand { margin: 0; width:140px; height:30px; }
    .navbar .brand img { width: 130px; margin-left: 10px; }
    .navbar .m_facebook { margin: 0; width:30px; height:30px; position: absolute; right: 70px; top:15px; display: block;}
    .navbar .m_facebook img { width: 30px; height: 30px; display: block; margin-left: 10px; }
    .navbar .m_instagram { margin: 0; width:30px; height:30px; position: absolute; right: 110px; top:15px; display: block;}
    .navbar .m_instagram img { width: 30px; height: 30px; display: block; margin-left: 10px; }
    aside.related ul { margin: 0 auto !important; }
    aside.related ul li { letter-spacing: 0; }
    .overslide .slidedown { top: -50px; }
    aside.related .copyright { display: block; }
    aside.related ul { width: 100%; max-width: 800px; padding:30px 0; margin: 0 auto !important; }
}
@media (min-width: 768px) and (max-width: 979px) { }
@media (max-width: 768px) {
    body { padding: 0; }
    .options li a .over { display: none; }
    aside.related ul { width: 100%; max-width: 600px; padding:30px 0; margin: 0 auto !important; }
    aside.related ul li { margin: 0; width: 33%; }
}
@media (max-width: 630px) {
    aside.related ul { width: 100%; max-width: 600px; padding:30px 0; margin: 0 auto !important; }
    aside.related ul li:last-child { display: none;}
}
@media (max-width: 480px) {
    .options { margin-bottom: 60px; }
    .options li { margin-right: 0; margin-bottom: -10px; height: 95px; }
    .options li a { margin-left: 0px; }
    .options li a .over { display: none; }
    .navbar-inverse .call-us {
    display: block; margin-right: 20px;
    background: #ce5f23; /* Old browsers */
    background: -moz-linear-gradient(top,  #ce5f23 0%, #ce4800 44%, #cf4b00 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ce5f23), color-stop(44%,#ce4800), color-stop(100%,#cf4b00)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ce5f23 0%,#ce4800 44%,#cf4b00 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ce5f23 0%,#ce4800 44%,#cf4b00 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ce5f23 0%,#ce4800 44%,#cf4b00 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #ce5f23 0%,#ce4800 44%,#cf4b00 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ce5f23', endColorstr='#cf4b00',GradientType=0 ); /* IE6-9 */
    background: #D15000;
    -webkit-box-shadow: inset 0px 1px 1px rgba(255, 255, 255, .3), 0 1px 0 rgba(0, 0, 0, 1); -moz-box-shadow: inset 0px 1px 1px rgba(255, 255, 255, .3), 0 1px 0 rgba(0, 0, 0, 1); box-shadow: inset 0px 1px 1px rgba(255, 255, 255, .3), 0 1px 0 rgba(0, 0, 0, 1);
    }
    .navbar-inverse .call-us:hover{ background-color:#BF4B00; background-image: -webkit-linear-gradient(top, #BF4B00, #BF4B00);}
    .call-us.btn.btn-navbar { text-transform: uppercase; font-size: 11px; line-height: 12px; font-weight: bold; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.1), 0 0 30px rgba(0,0,0,.125); -webkit-font-smoothing: anti-aliased; }
    .detail ul.gallery li { border: 0; }
    .item-list ul li { margin: 0 .75em 0.25em .75em; }
    aside.related ul { display: none; }
    #sub_nav li { list-style: none; margin:0; display:inline-block; height:100px; width:100px; position: relative; text-align: center; background:#ddd; }
}

@media (max-width: 320px) { .navbar .brand .org { display: none; }
    aside.related ul { width: 100%; margin: 0 auto !important; text-align: center; }
    aside.related ul li { margin: 0; width: 200px; margin-bottom: 20px;  }
    aside.related ul li:nth-child(3) { margin-left: 0; }
    aside.related ul li img { width: 200px; }
    aside.related ul li span { width: 120px; height: 120px;
    margin-left: -80px; margin-top: -80px; }
}