@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);

/*COLOURS:*/
.BLUE {
    color: #1f9fd9;
}

.DARKGREY {
    color: #3c4a55;
}

.txt-medium-grey {
    color: #b9babe;
}

.txt-light-grey {
    color: #d1d3d4;
}


/*CUSTOM CHASSIS STYLES*/
/*CSS TEMPLATE STRUCTURE*/

.nav.hyperlink {
    display: none;
}

.favicon {
    background: #fff;
}


.navbar-inverse {
    background-color: #3c4a55;
    border-color: #fff;
}

    .navbar-inverse .navbar-nav > li > a {
        color: #fff;
    }

        .navbar-inverse .navbar-nav > li > a:hover {
            color: #fff;
            text-decoration: underline;
        }

.topNav .navbar-brand {
    padding: 10px 10px 10px 10px;
    width: 170px;
    height: 52px;
    background: #fff;
}

    .topNav .navbar-brand:hover {
        background: #fff;
    }

.sideNav {
    background: #3c4a55 url(../images/B9WVO3vqRNUA.png) right repeat-y;
}


    .sideNav.collapseNav {
        color: #fff;
    }

    .sideNav .logo {
        background: #fff;
    }

    .sideNav ul li {
        border-bottom: 1px solid #2d3841;
        background: none;
    }

    .sideNav > ul > li:first-child {
        background: none;
    }

    .sideNav ul li a {
        color: #fff;
        background: rgba(0, 0, 0, 0.05);
    }

        .sideNav ul li a:hover, .sideNav ul li.active a {
            color: #fff;
            background: rgba(0, 0, 0, 0.3);
        }

    .sideNav ul li li a {
        background: #555;
    }

        .sideNav ul li li a:hover {
            background-image: none;
            background-color: #464646;
        }

    .sideNav .collapseButton a {
        color: #a3a3a3;
    }

/*
    Certificates Layout
*/
.certificate hr {
    margin-top: 5px;
    margin-bottom: 5px;
    border: 0;
    border-top: 1px solid #eee;
}

.certificate {
    font-size: 14px;
    color: #3c4a55;
    padding: 40px;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-repeat:no-repeat;
    background-position:center center;
    max-width: 1000px;
    margin:0 auto;
}

    .certificate .inner-container {
        background: #fff;
        padding: 20px 20px 20px 20px;  
    }

    .certificate .inner-container-border {
        background: #fff;
        padding: 20px;
        border-style: solid;
        border-width: 5px;
    }

/*Certificates Styling */
    .certificate .condensed {
        font-size: 20px;
        font-family: 'Open Sans Condensed', sans-serif;
    }
    .certificate h4 {
        font-size: 18px;
    }
    .certificate ul.list{
        margin:20px 0;
    }
    .certificate ul.list li {
        list-style-image: url(../images/Znymja5I6e47.png);
    }
    .certificate .ribbon {
        min-width: 50%;
    }


    /*Master Certificate - BLUE*/
    .certificate.master {
        background-image: url(../images/dmPxjdkDWai9.gif);
    }
        .certificate.master .inner-container-border {
            border-color: #013370;
        }
        .certificate.master .ribbon {
            /*background: #013370;
            border: solid 1px #013370;*/
            color: #013370;
        }
            /*.certificate.master .ribbon .ribbon-content:before, .certificate.master .ribbon .ribbon-content:after {
                border-color: #4d709b transparent transparent transparent;
            }
            .certificate.master .ribbon:before {
                border-color: #99adc6;
                border-left-color: transparent;
            }
            .certificate.master .ribbon:after {
                border-color: #99adc6;
                border-right-color: transparent;
            }*/

    /*Percentage Payout Report Certificate - LIGHT GREY*/
    .certificate.percentage-payout {
        background-image: url(../images/dEakOkumJ0Ce.gif);
    }
        .certificate.percentage-payout .inner-container-border {
            border-color: #a4a4a4;
        }
        .certificate.percentage-payout .ribbon {
            /*background: #a4a4a4;
            border: solid 1px #a4a4a4;*/
            color: #2e2e2e;
        }
            /*.certificate.percentage-payout .ribbon .ribbon-content:before, .certificate.percentage-payout .ribbon .ribbon-content:after {
                border-color: #bfbfbf transparent transparent transparent;
            }
            .certificate.percentage-payout .ribbon:before {
                border-color: #dbdbdb;
                border-left-color: transparent;
            }
            .certificate.percentage-payout .ribbon:after {
                border-color: #dbdbdb;
                border-right-color: transparent;
            }*/

    /*Randomness Review Certificate - DARK GREY*/
    .certificate.randomness-review {
        background-image: url(../images/JRBJGwpGVDBg.gif);
    }

    .certificate.randomness-review .inner-container-border {
        border-color: #2e2e2e;
    }

    .certificate.randomness-review .ribbon {
        /*background: #2e2e2e;
        border: solid 1px #2e2e2e;*/
        color: #2e2e2e;
    }

        /*.certificate.randomness-review .ribbon .ribbon-content:before, .certificate.randomness-review .ribbon .ribbon-content:after {
            border-color: #6c6c6c transparent transparent transparent;
        }

        .certificate.randomness-review .ribbon:before {
            border-color: #ababab;
            border-left-color: transparent;
        }

        .certificate.randomness-review .ribbon:after {
            border-color: #ababab;
            border-right-color: transparent;
        }*/

/*Ribbon CSS Structure*/
.ribbon {
    /* This ribbon is based on a 16px font side and a 24px vertical rhythm. I've used em's to position each element for scalability. If you want to use a different font size you may have to play with the position of the ribbon elements */
    position: relative;
    color: #013370;
    text-align: center;
    padding: 20px 40px; /* Adjust to suit */
    margin: 0 auto;
    font-size: 35px;
    font-weight: normal;
    display: inline-block;
    border: none;
}

    /*.ribbon:before, .ribbon:after {
        content: "";
        position: absolute;
        display: block;
        bottom: -0.5em;
        border: 1em solid #986794;
        z-index: -1;
    }

    .ribbon:before {
        left: -2em;
        border-right-width: 1.5em;
        border-left-color: transparent;
    }

    .ribbon:after {
        right: -2em;
        border-left-width: 1.5em;
        border-right-color: transparent;
    }*/

    /*.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
        content: "";
        position: absolute;
        display: block;
        border-style: solid;
        border-color: #804f7c transparent transparent transparent;
        bottom: -0.5em;
    }

    .ribbon .ribbon-content:before {
        left: 0;
        border-width: 0.5em 0 0 0.5em;
    }

    .ribbon .ribbon-content:after {
        right: 0;
        border-width: 0.5em 0.5em 0 0;
    }*/

.non-semantic-protector {
    position: relative;
    z-index: 1;
}

/*footer*/
.certificate footer {
    margin-top: 50px;
    height: auto;
}


.table{margin: 0 auto; width:50%;}

@media (max-width: 768px){
    .container {
        margin-right: auto;
        margin-left: auto;
    }
    header{
        margin:0 0 40px 0;
    }
    .certificate {
        padding: 10px;
    }
    .certificate .ribbon{
        margin: 0 -10px;
        display: block;
    }
    .certificate .ribbon:before,
    .certificate .ribbon:after {
        border: none;
    }
    .certificate .ribbon .ribbon-content:before,
    .certificate .ribbon .ribbon-content:after {
    border: none;
    }
    .certificate .inner-container {
        background: #fff;
        padding: 0;  
    }

    .certificate .inner-container-border {
        background: #fff;
        padding: 10px;
        border-style: solid;
        border-width: 5px;
    }
    .award{
        margin:40px 0;
    }
    .mobile-center {
        text-align:center;
    }
    .xs-txt-center{text-align:center;}
}