﻿
/*
  added for new board pages by Mark Vogler
*/
.boardbackground {
    background-color: #F0F0F0;
    margin: 0 15px;
}

.newlogo {
    padding: 50px 0 0 0;
}

.boardname {
    font-family: 'Herr Von Muellerhoff', cursive;
    font-size: 100px;
    color: #000000;
    padding: 50px 0;
    line-height: 130px;
}

.boardname-index {
    font-family: 'Herr Von Muellerhoff', cursive;
    font-size: 46px;
    color: #444;
    padding: 10px 0;
    line-height: 56px;
    text-align: center;
}

.boardcert {
    font-family: 'Belleza';
    font-size: 26px;
    color: #000000;
    padding: 0 0 20px 0;
    letter-spacing: 0.2em;
}

.boardcert-index {
    font-family: 'Belleza';
    font-size: 22px;
    color: #444;
    padding: 0;
    letter-spacing: 0.1em;
    text-align: center;
}

.boardp {
    font-family: 'Raleway';
    padding: 0 30px 20px 0;
    font-size: 20px;
    line-height: 1.5em;
    color: #52422a;
}

.boardheader {
    font-family: 'Arimo';
    font-size: 30px;
    color: #000000;
    padding: 0;
    margin: 10px 0 0 -45px;
    text-align: center;
    display: block;
}

.boardphoto {
    padding: 0 0 0 20px;
    margin: 30px 0 0 0;
    overflow: hidden;
}

.boardedu {
    font-family: 'Raleway';
    padding: 40px 0 0 20px;
    font-size: 16px;
    line-height: 1.8em;
    color: #444;
    text-align: left;
    font-weight: bolder;
    margin: 0;
    display: block;
}

.boardexp {
    font-family: 'Raleway';
    padding: 40px 0 0 20px;
    font-size: 16px;
    line-height: 1.8em;
    color: #444;
    font-weight: bolder;
    text-align: left;
    display: block;
}

.boardlink {
    font-family: 'Raleway';
    font-size: 20px;
    line-height: 1.5em;
    color: #000000;
    text-align: left;
    padding: 0 0 0 20px;
    display: block;
}

.boardlink-index {
    font-family: 'Raleway';
    font-size: 20px;
    line-height: 1.5em;
    color: #000000;
    text-align: center;
    padding: 20px 0;
    display: block;
}

.boardcontact {
    font-family: 'Raleway';
    font-size: 18px;
    line-height: 1.5em;
    color: #444;
    text-align: left;
    font-weight: bolder;
    padding: 0 0 0 20px;
    display: block;
}

.boardcontact-index {
    font-family: 'Raleway';
    font-size: 1.5em;
    line-height: 1.5em;
    color: #444;
    text-align: center;
    font-weight: bolder;
    padding: 20px 0;
    display: block;
}

.boardcontact a, .boardcontact a:hover, .boardlink a, boardlink a:hover, .boardlink-index a, boardlink-index a:hover {
    color: #444;
}

.margin-bottom-spacer-70 {
    margin-bottom: 70px;
}

body {
    overflow-x: hidden;
}

#main {
    min-height: 100vh;
}

.trustee {
    z-index: 0;
    color: #fff;
}

    .trustee:before {
        background-image: url("/Images/NBCCFBiosLeft.png");
        background-repeat: no-repeat;
        content: '';
        display: block;
        position: absolute;
        z-index: -1;
        width: 445px;
        /* allow for bootstrap column padding */
        top: -15px;
        left: 0px;
        bottom: -15px;
        overflow-x: hidden;
    }

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    .boardphoto {
        text-align: center;
    }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    .boardphoto {
        text-align: center;
    }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    .boardphoto {
        text-align: center;
    }
}

/* Large devices (laptops/desktops, 992px and up) */
/* Extra large devices (large laptops and desktops, 1200px and up) */
/*Butter CMS Styles*/
.flex-override {
    display: block !important;
}

.banner-image {
    width: 100%;
    margin-bottom: 20px;
    border-radius: 0.625rem;
}

/*MHF Pyramid Styles*/
.wrapper {
    margin: 5vh auto 0;
}

.pyramid {
    shape-outside: polygon(310px 0px, 130px 405px, 558px 405px);
    width: auto;
    height: auto;
}

.zone {
    padding: 35px 0;
    margin: 0 auto;
    text-align: center;
}

    .zone:nth-child(1) {
        background-color: #d3d8e3;
        width: 25%;
        clip-path: url("../styles/#part1");
        clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
        -webkit-clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    }

    .zone:nth-child(2) {
        background-color: #d3d8e3;
        width: 50%;
        clip-path: url("../styles/#part2");
        clip-path: polygon(25% 0%, 75% 0, 100% 100%, 0% 100%);
        -webkit-clip-path: polygon(25% 0%, 75% 0, 100% 100%, 0% 100%);
    }

    .zone:nth-child(3) {
        width: 75%;
        background-color: #9dc5cd;
        clip-path: url("../styles/#part3");
        clip-path: polygon(16.5% 0, 83% 0, 100% 100%, 0% 100%);
        -webkit-clip-path: polygon(16.5% 0, 83% 0, 100% 100%, 0% 100%);
    }

    .zone:nth-child(4) {
        width: 100%;
        background-color: #6294ad;
        clip-path: url("../styles/#part4");
        clip-path: polygon(12.5% 0, 0%, 87.5% 0, 100% 100%, 0% 100%);
        -webkit-clip-path: polygon(12.5% 0, 87.5% 0, 100% 100%, 0% 100%);
    }

/*NBCC Awards*/
.btn-awards-1 {
    color: #fff;
    background-color: #2f3478;
    border-color: #2f3478;
}

    .btn-awards-1:hover {
        color: #fff;
        background-color: #23275a;
        border-color: #23275a;
    }

.btn-awards-2 {
    color: #fff;
    background-color: #382263;
    border-color: #382263;
}

    .btn-awards-2:hover {
        color: #fff;
        background-color: #1e1e44;
        border-color: #1e1e44;
    }

.btn-awards-3 {
    color: #fff;
    background-color: #1e1e44;
    border-color: #1e1e44;
}

    .btn-awards-3:hover {
        color: #fff;
        background-color: #171733;
        border-color: #171733;
    }

.container {
    max-width: 1220px;
}

a {
    color: #2389F9;
}

    a:hover {
        color: #A0CAF9;
    }

svg.icon * {
    fill: #72984b;
}

label {
    font-size: 16px;
}

a.btn.disabled,
fieldset:disabled a.btn {
    pointer-events: auto;
    cursor: not-allowed;
}
