/*
Theme Name: SapphireClub
Theme URI: https://wordpress.org/themes/twentysixteen/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Sixteen is a modernized take on an ever-popular WordPress layout — the horizontal masthead with an optional right sidebar that works perfectly for blogs and websites. It has custom color options with beautiful default color schemes, a harmonious fluid grid using a mobile-first approach, and impeccable polish in every detail. Twenty Sixteen will make your WordPress look beautiful everywhere.
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, blue, gray, red, white, yellow, dark, light, one-column, two-columns, right-sidebar, fixed-layout, responsive-layout, accessibility-ready, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, flexible-header, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready
Text Domain: twentysixteen

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/


/**
 * Table of Contents
 *
 * 1.0 - Normalize
 * 2.0 - Genericons
 * 3.0 - Typography
 * 4.0 - Elements
 * 5.0 - Forms
 * 6.0 - Navigation
 *   6.1 - Links
 *   6.2 - Menus
 * 7.0 - Accessibility
 * 8.0 - Alignments
 * 9.0 - Clearings
 * 10.0 - Widgets
 * 11.0 - Content
 *    11.1 - Header
 *    11.2 - Posts and pages
 *    11.3 - Post Formats
 *    11.4 - Comments
 *    11.5 - Sidebar
 *    11.6 - Footer
 * 12.0 - Media
 *    12.1 - Captions
 *    12.2 - Galleries
 * 13.0 - Multisite
 * 14.0 - Media Queries
 *    14.1 - >= 710px
 *    14.2 - >= 783px
 *    14.3 - >= 910px
 *    14.4 - >= 985px
 *    14.5 - >= 1200px
 * 15.0 - Print
 */


/**
 * 1.0 - Normalize
 *
 * Normalizing styles have been helped along thanks to the fine work of
 * Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
 */

.grad, .btn-warning {
    background: #c20808 !important; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#c20808, #960505) !important; /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#c20808, #960505) !important; /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#c20808, #960505) !important; /* For Firefox 3.6 to 15 */
    background: linear-gradient(#c20808, #960505) !important; /* Standard syntax (must be last) */
    border: none !important;
    border-radius: 0;
}
.grad:hover, .btn-warning:hover {
    background: #960505 !important; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#960505, #c20808) !important; /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#960505, #c20808) !important; /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#960505, #c20808) !important; /* For Firefox 3.6 to 15 */
    background: linear-gradient(#960505, #c20808) !important; /* Standard syntax (must be last) */
    border: none !important;
}

.img-thumbnail { border: 1px solid #000;border-radius: 0; }
hr { border-top: 1px solid #000;}

body { color: #000;}
.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th { border-top: 1px solid #000; }
.table-bordered>tbody>tr>td, .table-bordered>tbody>tr>th, .table-bordered>tfoot>tr>td, .table-bordered>tfoot>tr>th, .table-bordered>thead>tr>td, .table-bordered>thead>tr>th {
    border: 1px solid #000;
}
.table>caption+thead>tr:first-child>td, .table>caption+thead>tr:first-child>th, .table>colgroup+thead>tr:first-child>td, .table>colgroup+thead>tr:first-child>th, .table>thead:first-child>tr:first-child>td, .table>thead:first-child>tr:first-child>th {
    border-top: 1px solid #000;
}
.nav>li>a:focus, .nav>li>a:hover {
    text-decoration: none;
    background-color: #dedddd;
}
.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {background-color: #c49a52;    border-radius: 0;}
.nav-pills>li>a { border-radius: 0px;     background-color: #f3f3f3;}
.well { background-color: #f5f5f5; border: 1px solid #000; border-radius: 0px;}


nav.navbar{ margin-bottom:0;border-radius:0;}
.carousel-caption {
    position: absolute;
    right: 15%;
    bottom: 180px;
    left: 15%;
    z-index: 10;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #fff;
    text-align: center;
    text-shadow: 0 1px 4px rgba(0,0,0,1);
}
.client{ padding:40px 0; position:relative;}
.footer{ padding:20px 0; background:#333; color:#fff;}
.footer a{ color:#fff;}

.footer ul a{ font-size:12px;}
.footer p{ margin-bottom:0;}
.footer .social a{ font-size:35px; margin-right: 5px;}

.content{ padding:40px 0;}
.content .item img{ height:565px; display:initial;}
.content .tab-content{ border: 1px #E4E4E4 solid; border-radius: 4px; padding: 20px;}
.content #term ol{ text-align:left;}

.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
}

.navbar-default .navbar-nav>.current-menu-item>a, .navbar-default .navbar-nav>.current-menu-item>a:focus, .navbar-default .navbar-nav>.current-menu-item>a:hover {
    color: #555;
    background-color: #e7e7e7;
}

.logo{ position:absolute; top:8px; left:2%; z-index:999; margin:0;}
.logo a{ color:#fff; text-decoration:none;/*text-shadow: 2px 2px #000;*/}
.logo a:hover{ color: #fff;}

#showRight{ position:absolute; right:5px; top:9px; z-index:999; border: none; background: #fff; width: 120px; height: 38px; color:#c20808; outline: none;-webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease;}
#showRight.active{ right:240px; background: #fff; width: 70px; overflow:hidden;height: 52px; top: 4px; position: fixed; color:#fff;}
#showRight:before {
  content: "";
  position: absolute;
  top: 11px;
  left: 10px;
  width: 20px;
  height: 17px;
  border-top: 10px double #c20808;
  border-bottom: 3px solid #c20808;
}
#showRight.active:before{/*background: linear-gradient(-45deg, transparent 0%, transparent 48%, #c20808 49%, #c20808 51%, transparent 51%, transparent 100%), linear-gradient(45deg, transparent 0%, transparent 48%, #c20808 49%, #c20808 51%, transparent 51%, transparent 100%); height: 59px; width: 51px; top: -7px;border-top: 10px double #fff; border-bottom: 3px solid #fff;*/top: 16px; left: 15px; width: 40px;}

#cbp-spmenu-s2 ul{ margin:0; padding:0;}
#cbp-spmenu-s2 li{ list-style:none;}

.bx-controls-direction a{ font-size:35px;color: #aaa;position: absolute; top: 50px;}
.bx-next{right:0;}
.bx-prev{left:0;}
a {color: #c20808;}
a:focus, a:hover {color: #c20808;}
.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {background-color: #c20808;}

.banner{ /*border-top:4px solid #c20808;*/margin-top: 60px;}
.theme_box{ position:absolute; bottom:-2px; width:100%;}
.black_box{ background: #000;
    color: #c20808;
    padding: 10px 20px;
    min-height: 0px;
    text-align: center;}
.orange_box{ background: #000;
    color: #fff;
    padding: 20px;}
.orange_box h3{ font-size: 30px; margin-top: 35px;}

.menu_box{position: fixed; /*height: 43px;*/height: 60px; background-color: #3b3b3b; border-top: 0px solid #c20808; top: 0; left: 0; width: 100%; z-index: 9;}
.logo_box{ position: relative; height: 60px;}

.promotins-link{ float: right; margin-right: 155px; color:#fff;}
.promotins-link span{ display:inline-block; padding-top: 14px; font-size: 20px;}
.promotins-link img{ display:inline-block; float: right; padding-top: 3px;}
.promotins-link a{ text-decoration:none; color: #fff;}
.sp_title{ border-bottom:2px #c20808 solid; height: 17px;}
.sp_title span{ background:#fff; padding:0 8px;}

.footer_links{ padding:20px 0; background:#222; color:#fff;}
.footer_links h3{ border-bottom:2px #c20808 solid;}
.footer_links h3.hidden-xs{ border-bottom:2px #222 solid;}
.footer_links ul{ margin:0;}
.footer_links a{ color:#fff; line-height:25px;}

.rfriend .theme_box{ display: none;}
.rfriend img{ height: auto;}



@media only screen and (max-width : 1000px) {
    .content{ padding: 40px 20px; margin: 0 auto; width: 100%;}
}
@media only screen and (max-width : 940px) {
    .menu_box {    
        position: relative;
        height: auto;  
        padding: 10px;
    }
    .logo {
        position: relative;
        text-align: center;
    }
    .promotins-link {
        float: none;
        margin-right: 0;
        text-align: center;
    }
    .promotins-link img {
        float: none;
    }
    /**
 * #showRight.active{ right: 190px;}
 */
    .banner {
        margin-top: 0;
    }
    
}
@media only screen and (max-width : 770px) {
    
    .content .well img{ max-width: 300px;height: auto;}
    .content .well {
        max-width: 350px;
        margin: 0 auto;
        float: none;
        display: table;
    }
    
}
@media only screen and (max-width : 600px) {
    .promotins-link span {
        font-size: 17px;
    }
}
@media only screen and (max-width : 500px) {
    .logo {
        text-align: left;
    }
    p{ font-size: 12px; text-align: justify;}
    h2{ font-size: 23px;}
    h3{ font-size: 18px;}
    h4{ font-size: 15px; font-weight: bold;}
    .container.content{ padding: 40px 0;}
    .container.content .btn{ padding: 5px 6px; font-size: 13px;}
    .promotins-link {
        text-align: left;
        padding-top: 10px;
    }
    .promotins-link span {
        font-size: 11px;
    }
    .promotins-link a img {
        height: 26px;
    }
    .promotins-link a span {
        display:inline-block;
    }
    .carousel-inner>.item>a>img, .carousel-inner>.item>img{height: 250px !important;}
    .theme_box h2,.theme_box h3{ font-size: 15px; margin: 0;;}
    .carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right, .carousel-control .icon-next, .carousel-control .icon-prev{ top: 48%;}
    .banner img{height: 250px !important;}    
    .orange_box {padding:65px 20px 0;}
    .orange_box h3{ font-size: 15px;}
    #card img{ max-width: 100%;}
    .content .item img {
        height: 200px !important;
    }
    #gift img{ height: auto !important;}
    .well_member h3, .well_member h1 {
        font-size: 20px;
        margin: 0;
    }
    .well_member h5{
        display: none;
    }
    .footer p{ text-align: center;}
    
    .banner .rfriend img{height: auto !important;}
}