/**
 * Scafold
 */
html, body { width: 100%; height: 100%; }
body { background-color: #FFF; }
a, a:active, a:focus { outline: none; }

/**
 * Typography
 */
body { color: #666; font-family: 'PT Sans', sans-serif; }

figure.captcha {
    margin: 0 5px 5px 0;
}
input.captcha,
figure.captcha img {
    width: 100%;
    max-width: 150px;
}
figure.captcha img {
    border-radius: 6px;
}

/*
 * ------------------------------------------------------------------
 *  Video
 * ------------------------------------------------------------------
 */
#splashModal .modal-body .splash_img { width: 100%; }
#splashModal .modal-body .close_icon { position: absolute; top: 30px; right: 30px; z-index:1000; }
#splashModal .modal { overflow-y: auto; }
#splashModal .modal-backdrop { background-color: #333; }
#splashModal .modal-body { background-color: #000; }

/*
 * ------------------------------------------------------------------
 *  Header
 * ------------------------------------------------------------------
 */

/**
 * Navigation (Yamm)
 */
.yamm .navbar-brand { padding-right: 30px; }

.yamm .nav,
.yamm .collapse,
.yamm .dropup,
.yamm .dropdown { position: static; }

.yamm .container { position: relative; }

.yamm .dropdown-menu { left: auto; }

.yamm .yamm-content { padding: 6px 0px 24px 15px; }

.yamm .dropdown.yamm-fw .dropdown-menu { left: 0; }

.yamm .dropdown-menu { background: #FFF url('drop_bg.png') left bottom repeat-x; }
.yamm .dropdown-menu a { display: block; color: #666; }

.yamm .dropdown-menu ul { margin: 0; padding:0; list-style: none; }
.yamm .dropdown-menu ul li { float: left; margin: 0 30px 0 0; padding:0; }
.yamm .dropdown-menu ul li:last-child { margin-right: 15px; }

/**
 * Language
 */
.language { text-align: right; }
.language select { width: auto; }
.language_collapse { display: none; }

/**
 * Search
 */
.search { padding: 9px; text-align: right; line-height: 31px; }
.searchbox {
    position:relative;
    min-width:60px;
    width:0%;
    float:right;
    overflow:hidden;
    -webkit-transition: width 0.3s;
    -moz-transition: width 0.3s;
    -ms-transition: width 0.3s;
    -o-transition: width 0.3s;
    transition: width 0.3s;
}

.searchbox-input {
    top:0;
    right:0;
    border:0;
    outline:0;
    background:#FFF;
    width:99%;
    margin:0;
    padding:0px 16px 0px 16px;
    font-size:18px;
    color:#666;
}
.searchbox-input::-webkit-input-placeholder { color: #666; }
.searchbox-input:-moz-placeholder { color: #666; }
.searchbox-input::-moz-placeholder { color: #666; }
.searchbox-input:-ms-input-placeholder { color: #666; }

.searchbox-icon,
.searchbox-submit {
    display:block;
    position:absolute;
    top:0;
    width:43px;
    font-size:18px;
    right:0;
    padding:0;
    margin:0;
    border:0;
    outline:0;
    line-height:31px;
    text-align:center;
    cursor:pointer;
    color:#666;
    background:#FFF;
}

.searchbox-open { width:99%; }

/*
 * ------------------------------------------------------------------
 *  Carousel
 * ------------------------------------------------------------------
 */
.carousel { margin-top: 55px; }
.carousel-indicators li { margin: 0; padding: 9px; }

/*
 * ------------------------------------------------------------------
 *  Featured
 * ------------------------------------------------------------------
 */
.featured figure { margin: 15px 0; padding: 0px 110px 15px 15px; font-size: 13px; color: #666; }
.featured .title { clear: both; font-size: 18px; color: #333; }
.featured .title img { vertical-align: middle; margin-bottom: 3px; width: 100%; max-width: 136px; }
.featured aside { margin: 10px 0; width: 100%; line-height: 21px; }

/*
 * ------------------------------------------------------------------
 *  Breadcrumb
 * ------------------------------------------------------------------
 */
.breadcrumb_wrapper { padding: 0; background-color: #FFF; border-bottom: 1px solid #DDD; }
.ai_breadcrumb { padding: 15px; color: #BBB; background: transparent; }
.ai_breadcrumb span { padding: 0 2px; }
.ai_breadcrumb span:after { content: "»"; color: #666; }
.ai_breadcrumb span:last-child:after { content: ""; }
.ai_breadcrumb a { padding-right: 6px; text-decoration: none; color: #666; }
.ai_breadcrumb a:hover { color: #333; }

/*
 * ------------------------------------------------------------------
 *  Page Title & Content
 * ------------------------------------------------------------------
 */
.page_title { margin-bottom: 30px; font-weight: bold; color: #333; }
.page_content_container { padding-bottom: 30px; font-size: 15px; line-height: 30px; }
.page_content { padding-bottom: 30px; font-size: 15px; line-height: 30px; }

/*
 * ------------------------------------------------------------------
 *  static_bg
 * ------------------------------------------------------------------
 */
.static_bg { background: #FFF url('static_bg.png') center no-repeat; }

/*
 * ------------------------------------------------------------------
 *  Pagination
 * ------------------------------------------------------------------
 */
.pagination { padding-left: 0; margin: 20px 0; }

.pagination > li > a,
.pagination > li > span {
    padding: 5px 10px;
    font-size: 12px;
    margin-left: -1px;
    color: #333;
    background-color: #CCC;
    border: 1px solid #666;
}

.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus { color: #666; background-color: #eee; border-color: #666; }

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus { color: #fff; background-color: #999; border-color: #666; }

.pagination > .disabled > span,
.pagination > .disabled > span:hover,
.pagination > .disabled > span:focus,
.pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination > .disabled > a:focus { color: #777; background-color: #fff; border-color: #ddd; }

/*
 * ------------------------------------------------------------------
 *  Products List
 * ------------------------------------------------------------------
 */
.products_list figure { margin-bottom: 15px; text-align: center; }
.products_list h4 { display: block; }
.products_list img { width: 100%; max-width: 500px; }
.products_list .btn { /*display: block;*/ }

/* news_list */
.products_list.news_list aside { margin-bottom: 15px; text-align: center; }
.products_list.news_list img { max-width: 330px; }

/*
 * ------------------------------------------------------------------
 *  Products Detail
 * ------------------------------------------------------------------
 */
.product_detail .detail_image img { width: 100%; max-width: 500px; }
.product_detail .specs .row { padding: 6px 0; line-height: 24px; border-bottom: 1px solid #DDD; }
.product_detail .btn { display: block; }

/*
 * ------------------------------------------------------------------
 *  Lazy Load
 * ------------------------------------------------------------------
 */
.lazy { display: none; }

/*
 * ------------------------------------------------------------------
 *  Footer
 * ------------------------------------------------------------------
 */
.footer { 
    margin-top: 30px; 
    padding: 15px 0; 
    border-top: 1px solid #CCC; 
    border-bottom: 1px solid #CCC; 
    background-color: #FFF;
}

.footer .logo { padding: 15px 30px 15px 15px; }
.footer .logo img { margin-bottom: 15px; width: 100%; max-width: 183px; }

.footer nav { margin-bottom: 30px; }

.footer h4 { font-weight: bold; }
.footer h4 a { color: #333; }
.footer h4 a:hover { color: #666; text-decoration: none; }

.footer a { color: #666; display: block; margin-bottom: 6px; }
.footer a:hover { color: #999; text-decoration: none; }

.footer-nav-column { padding-left: 0; }

.footer .social_icons { text-align: left; }
.footer .social_icons a { display: inline-block; }

.footer .copyright_container { padding: 15px; color: #666; }

/*
 * ------------------------------------------------------------------
 *  Helpers
 * ------------------------------------------------------------------
 */

/* Margins */
.mrg-top-0 { margin-top: 0px; }
.mrg-top-5 { margin-top: 5px; }
.mrg-top-8 { margin-top: 8px; }
.mrg-top-10 { margin-top: 10px; }
.mrg-top-15 { margin-top: 15px; }
.mrg-top-20 { margin-top: 20px; }
.mrg-top-30 { margin-top: 30px; }
.mrg-top-55 { margin-top: 55px; } 
.mrg-bottom-0 { margin-bottom: 0px; }
.mrg-bottom-20 { margin-bottom: 20px; }

/* Paddings */
.pdg-0 { padding: 0; }
.pdg-10 { padding: 10px; }
.pdg-top-0 { padding-top: 0; }
.pdg-top-5 { padding-top: 5px; }
.pdg-top-15 { padding-top: 15px; }
.pdg-right-0 { padding-right: 0; }

/* Borders */
.brd-red { border: 1px solid red; }
.brd-blue { border: 1px solid blue; }
.txt-align-r { text-align: right; }

/* Fade */
.fade {
    opacity: 1;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
}
.fade:hover { opacity: 0.8; }

/* container-full */
.container-full { margin: 0 auto; width: 100%; }

/* clear */
.clear { clear: both; }

/*
 * ------------------------------------------------------------------
 *  Responsive
 * ------------------------------------------------------------------
 * lg: 1200 -
 * md: - 1200
 * sm: - 992
 * xs: - 768
 * xxs: - 480
 */

/* response_status */
.response_status,
.response_status:after { 
    position: fixed; display: none; z-index: 10000; 
}

.response_status:after { 
    top: 60px; left: 0px; padding: 15px; font-size: 24px; color: #FFF; background-color: orange;
}

/**
 * lg
 */
@media screen and (min-width: 1200px) {
    
    /* response_status */
    .response_status:after { content: "LG"; }
    
    /* featured */
    .featured figure { height: 270px; }
    
}

/**
 * md
 */
@media screen and (max-width: 1200px) {

    /* response_status */
    .response_status:after { content: "MD"; }
    
    /* yamm */
    .yamm .nav,
    .yamm .collapse,
    .yamm .dropup,
    .yamm .dropdown { position: relative; }

    /* navbar */
    .navbar-header { float: none; }
    
    .navbar-left,
    .navbar-right { float: none !important; }
    
    .navbar-toggle { display: block; }
    .navbar-collapse { 
        border-top: 1px solid transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }
    .navbar-fixed-top { top: 0; border-width: 0 0 1px; }
    .navbar-collapse.collapse { display: none!important; }
    .navbar-nav { float: none!important; margin-top: 7.5px; }
    .navbar-nav > li { float: none; }
    .navbar-nav > li > a { padding-top: 15px; padding-bottom: 10px;}
    .collapse.in { display:block !important; max-height: none; }

    /* search */
    .search { border-top: 1px solid #D5D5D5; }
    .searchbox { margin-bottom: 15px; }

    /* featured */
    .featured figure { height: 360px; }

}

/**
 * sm
 */
@media screen and (max-width: 992px) {

    /* response_status */
    .response_status:after { content: "SM"; }
    
    /* carousel */
    .carousel-indicators li { display: none; }

    /* featured */
    .featured figure { height: 180px; }

    /* footer */
    .footer { text-align: center; }
    .footer .logo { text-align: center; }
    .footer-nav-column { padding-left: 15px; }
    .footer .social_icons { text-align: center; }

}

/**
 * xs
 */
@media screen and (max-width: 768px) {

    /* response_status */
    .response_status:after { content: "XS"; }

    /* featured */
    .featured figure { height: 210px; }
    
    /* product_detail */
    .product_detail .detail_image,
    .product_detail .page_title { 
        text-align: center; 
    }

}

/**
 * xxs
 */
@media screen and (max-width: 480px) {

    /* response_status */
    .response_status:after { content: "XXS"; }
    
    /* navigation */
    .yamm .navbar-brand { padding-right: 15px; }

    /* featured */
    .featured figure { height: 300px; }

}

/**
 * pulse
 */
@-webkit-keyframes pulse {   

    0 { -webkit-transform: scale(1); transform: scale(1); }
    50% { -webkit-transform: scale(1.2); transform: scale(1.2); }
    100% { -webkit-transform: scale(1); transform: scale(1); }

}

@-moz-keyframes pulse {    

    0 { -moz-transform: scale(1); transform: scale(1); }
    50% { -moz-transform: scale(1.2); transform: scale(1.2); }
    100% { -moz-transform: scale(1); transform: scale(1); }

}