.introWrapper {
    background-image: url('/cisiweb2/image/disciplinary/disc.jpg');
    background-position: 0 30px;
    background-attachment: fixed;
    background-repeat: no-repeat;
}
.introWrapper h1 {
    margin-top: 0;
}
.row.hotf {
    text-align: center;
    margin-top: 40px;
}
.hotf h3 {
    margin-top: 10px;
}
.hotf .glyphicon {
    color: #68A09A;
    font-size: 40px;
}
.cocIcons{
    color: #68A09A;
    font-size: 40px;
}
/* what is a disciplinary offense */
.whatis ul {
    padding-left: 20px;
}
.whatis ul li {
    list-style: none;
}
.whatis ul li span {
    font-weight: 500;
    margin-right: 5px;
}
.videoBlock .row{
    display: flex;
    justify-content: space-between;
}
/* disciplinary self declaration form */
.dsdf {
    background: #CBDEDC;
    padding: 25px;
    margin-top: 60px;
}
.dsdf h2 {
    margin-top: 0;
}
/* principles v2 */
.col-md-6.col-md-offset-0.col-lg-1.col-lg-offset-2, 
.col-md-6.col-lg-1 {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}
.row.pv2 {
    text-align: center;
    margin-top: 30px;
}
.row.pv2 div.col-md-6 {
    border: 1px solid white;
    background: #CBDEDC;
    padding: 20px 10px;
    transition: 0.5s all;
}
.row.pv2 div.col-md-6:hover {
    transform: scale(1.1);
    z-index: 1;
}
.row.pv2 div.col-md-6 div.title {
    font-size: 15px;
    font-weight: 500;
    color: #239393;
}
.row.pv2 div.col-md-6 div.desc {
    font-size: 14px;
    font-weight: 500;
}
.row.pv2 a.btn.btn-default {
    background: #CBDEDC;
    border: 1px solid #239393;
    font-weight: 500;
    font-size: 12px;
    padding: 5px;
    margin-top: 20px;
    border-radius: 20px;
    color: #239393;
    transition: 0.5s all;
}
.row.pv2 a.btn.btn-default:hover {
    background: white;
}
@media(max-width: 1199px) {
    .row.pv2 div.col-md-6 div.title {
        font-size: 15px;
        font-weight: 400;
        padding: 0;
    }
    .row.pv2 a.btn.btn-default {
        width: 70%;
        margin: 0 auto;
    }
    .row.pv2 div.col-md-6 div.title {
        margin-bottom: 5px;
    }
    .row.pv2 div.col-md-6 div.desc {
        margin: 5px;
    }
}
/* principles v3 */
.col-sm-12.col-md-3 {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}
.pv3 .col-md-3 {
    border: 1px solid #fff;
    background: #CBDEDC;
    padding: 30px 20px;
    text-align: center;
    transition: 0.5s all;
}
.pv3 .col-md-3:hover {
    transform: scale(1.09);
    z-index: 1;
}
.pv3 .col-md-3 .title {
    font-size: 20px;
    font-weight: 500;
    color: #239393;
    margin-bottom: 5px;
}
.pv3 .col-md-3 .stake {
    font-weight: 500;
}
.pv3 .col-md-3 a.btn {
    margin-top: 20px;
    background: #CBDEDC;
    border: 1px solid #239393;
    font-weight: 500;
    font-size: 14px;
    padding: 5px 20px;
    border-radius: 20px;
    color: #239393;
    transition: 0.5s all;
}
.pv3 .col-md-3 a.btn:hover {
    background: white;
}
@media(max-width: 991px) {
    .pv3 .col-md-3 a.btn {
        width: 70%;
        margin: 10px auto;
    }
}
/* principles pop ups */
.modal-body, .modal-footer {
    text-align: center;
    background: #CBDEDC;
}
.modal-body .number {
    font-size: 30px;
    font-weight: 500;
    color: #239393;
}
.modal-body {
    padding-bottom: 0;
}
.stakeholder {
    font-weight: 500;
}
.modal-footer { 
    border-top: none;
}
.modal-footer button {
    background: #CBDEDC;
    border: 1px solid #239393;
    font-weight: 500;
    padding: 5px 20px;
    margin-top: 20px;
    border-radius: 20px;
    color: #239393;
    transition: 0.5s all;
}
.modal-footer button:hover {
    background: white;
    border: 1px solid #239393;
}
/* the show/hide buttons */
.questionWrapper,
.answerBlock{
    display:none;
    text-align: center;
}
.answerBlock, .questionWrapper, .questionWrapper a {
    font-weight: 500;
    font-size: 20px;
}
.questionWrapper h2 {
    font-weight: 300;
}
.well {
    background: #fff;
}
.well h2 {
    margin-top: 10px;
}
div.reset a.btn.btn-primary {
    background-color: #c15454;
    border: 1px solid #c15454;
    transition: 0.5s all;
}
div.reset a.btn.btn-primary:hover {
    background-color: #882525;
}
/* slider */
.lSSlideOuter .lSPager.lSpg > li a {
    background-color:#b0b0b0;
}
.lSSlideOuter .lSPager.lSpg {
    margin-top:30px !important;
}
.lslide p {
    margin-bottom:10px;
}
.lSSlideOuter .lightSlider > *, .lSSlideOuter .lSGallery li {
    padding: 0px 10px;
}
.lSSlideOuter .lightSlider, .lSSlideOuter .lSPager {
    height:auto !important;
}
.lSSlideOuter .lSPager.lSpg > li:hover a, .lSSlideOuter .lSPager.lSpg > li.active a {
    color: #000 !important;
}
.feature .content-slider p {
    color: #000;
    padding: 10px;
    font-size: 16px;
}
/* change this once colors are sorted */
.feature .lSAction > a {
    background-image: url(/cisiweb2/image/master/controls_white.png);
}
.feature .container {
    padding-bottom: 50px;
}
.feature .lSAction > .lSNext {
    right:20px;
}
.feature .lSAction > .lSPrev {
    left: 20px;
}
/* custom slider bits */
.feature .col-sm-3 h3 {
    font-weight: 400;
    font-size: 40px;
}
@media(max-width: 770px) {
    .videoBlock .row {
        flex-direction: column;}
}
@media(max-width: 991px) {
    .feature .col-sm-3 h3 {
        font-size: 25px;
    }
}
.feature .col-sm-9 span {
    display: block;
    font-size: 20px;
}
/* alternate flow layout */
.flowchart {
    width: 50vw;
    margin: 25px auto;
    text-align: center;
    color: #fff;
}
@media(max-width: 1599px) {
    .flowchart {
        width: 60vw;
    }
}
.flowchart .step {
    font-size: 20px;
}
.flowchart div div div.step {
    font-weight: 500;
    color: #fff;
}
div.flowchart div.row div {
    padding: 10px 20px;
}
.one .col-xs-12 { background: #81C3C1; }
.two .col-xs-12 { background: #7cbcba; }
.two12 .yes { background: #76B6B2; }
.two12 .no { background: #76B6B2; }
.three .col-xs-12 { background: #71AFAB; }
.three12 .yes { background: #6CA8A4; }
.three12 .no { background: #6CA8A4; }
.four .col-xs-12 { background: #66A19C; }
.five .col-xs-12 { background: #619B95; }
.six .col-xs-12 { background: #5B948D; }
.six12 .yes { background: #568D86; }
.six12 .no { background: #568D86; }
.seven .col-xs-12 { background: #51867F; }
.one .col-xs-12, .two .col-xs-12, .two12 .yes, .two12 .no, .three .col-xs-12,
.three12 .yes, .three12 .no, .four .col-xs-12, .five .col-xs-12, .six .col-xs-12,
.six12 .yes, .six .no, .seven .col-xs-12 {
    transition: 0.7s all;
}
.one .col-xs-12:hover, .two .col-xs-12:hover, .two12 .yes:hover, .two12 .no:hover,
.three .col-xs-12:hover, .three12 .yes:hover, .three12 .no:hover, .four .col-xs-12:hover,
.five .col-xs-12:hover, .six .col-xs-12:hover, .six12 .yes:hover, .six12 .no:hover,
.seven .col-xs-12:hover {
    background: #3E6761;
}
.flowchart .glyphicon {
    color: white;
    font-size: 15px;
    margin-top: 20px;
}