/* CSS Document */
body {
    height: 100%;
    margin: 0;
    color: #58585b;
    position: relative;
}
.text-primary {
    background-color: transparent;
    color: #4c7fa7;
}
.affix > .nav > li {
    font-size: 4em;
    padding: 0;
    line-height: .5em;
}
.navbar-inverse {
    background-color: #4c7fa7;
}

.contact-bar {
    margin: 10px 0 30px;
    border: 1px solid #688c50;
}
.contact-bar > div {
    padding: 30px 0;
}
.contact-bar li {
    font-size: .9em;
    top: 0;
}
.contact-bar li:first-child {
    text-align: left
}
.contact-us {
    background: url("https://nclhx5yj.tinifycdn.com/support-mpa/annual-reports/2019-20/images/contact-bg.png") center right;
    padding-left: 20px !important;
}
p, ul:not(.navbar-nav) {
    font-size: 1.2em;
}
.btn-intro .glyphicon-chevron-down {
    top: 6px;
}
.footer-container {
    background: #4c7fa7;
    color: #fff;
    margin-top: 0;
}
.footer-container > .container-fluid {
    background-color: transparent;
}

.progress-sidebar {
    top: 30%;
    right: 3em;
}
.progress-sidebar .nav>li>a {
    padding-left: 0;
    padding-right: 0;
}
.progress-sidebar a {
    color: #58585B;
}
.progress-sidebar li.active a {
    color: #bad97e !important;
}
.nav > li > a:hover, .nav > li > a:focus {
    background-color: transparent!important;
}
.main {
    margin-top: 40px;
}
.jump-button:hover {
    color: #fff;
}

/* parallax styles */

.bgimg {
    position: relative;
/*    opacity: 0.65;*/
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.bgimg-1 {
    background-image: url("https://nclhx5yj.tinifycdn.com/support-mpa/annual-reports/2019-20/images/photo1.png");
    min-height: 100%;
}
.bgimg-2 {
    background-image: url("https://nclhx5yj.tinifycdn.com/support-mpa/annual-reports/2019-20/images/photo2.png");
    min-height: 800px;
}
.bgimg-3 {
    background-image: url("https://nclhx5yj.tinifycdn.com/support-mpa/annual-reports/2019-20/images/photo3.png");
}
.bgimg-4 {
    background-image: url("https://nclhx5yj.tinifycdn.com/support-mpa/annual-reports/2019-20/images/photo4.png");
    min-height: 800px;
}
.bgimg-5 {
    background-image: url("https://nclhx5yj.tinifycdn.com/support-mpa/annual-reports/2019-20/images/photo5.png");
    min-height: 800px;
}
.bgimg-6 {
    background-image: url("https://nclhx5yj.tinifycdn.com/support-mpa/annual-reports/2019-20/images/photo6.png");
    min-height: 100%;
}
.bgimg-7 {
    background-image: url("https://nclhx5yj.tinifycdn.com/support-mpa/annual-reports/2019-20/images/photo7.png");
}
.bgimg-8 {
    background-image: url("https://nclhx5yj.tinifycdn.com/support-mpa/annual-reports/2019-20/images/photo8.png");
    min-height: 800px;
}
.bgimg-9 {
    background-image: url("https://nclhx5yj.tinifycdn.com/support-mpa/annual-reports/2019-20/images/photo9.png");
    min-height: 800px;
}
.quote {
    color: #fff;
    font-size: 1.5em;
    width: 50%;
    padding: 2.5em 2em;
    position: absolute;
    bottom: 0;
}

.quote small {
    display: block;
    width: 100%;
    margin-top: 1em;
}

.list-inline:not(.colleges) > li {
    padding-right: 1em 
}

.list-inline.colleges > li {
    padding: 0 10px 0 20px;
    background-image: url(https://nclhx5yj.tinifycdn.com/support-mpa/annual-reports/2019-20/images/Map-dot.png);
    background-position: center left;
    background-repeat: no-repeat;
}

.constrained {
    margin: auto;
    display: flex;
}

.constrained > div > div:not(.stats) {
    height: 100%;
}

.constrained .img-responsive {
    display: initial;
}

.stat {
    font-size: 7em;
    margin: 0;
}

.stat-label, .photo-label {
    display: block;
    text-align: center;
    width: 100%;
    padding: 0 2em;
}

.photo-label {
	position: absolute;
	bottom: .2em;
    left: 0;
	font-size: 26px;
	color: #fff;
    text-transform: uppercase;
}

.caption, .center-vertical {
    position: absolute;
    top: calc(50% - 1em);
    width: 100%;
    text-align: center;
    color: #58585b;
    line-height: 1;
}

.center-vertical.stats {
    top: calc(50% - 6.5em);
    line-height: 1.3
}

.caption span.border {
    background-color: #4c7fa7;
    color: #fff;
    padding: 18px;
    font-size: 25px;
}

.circle{
    width: 100%;
    height: 100%;
    font-size:20px;
    color:#fff;
    text-align:center;
    padding:25% 0;
    margin: auto;
    shape-outside: circle(100%);
    -webkit-shape-outside: circle(100%);
    clip-path: circle();
    -webkit-clip-path: circle();
}

.circle-fill {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
}

.circle-row {
    bottom: 3em;
    position: absolute;
    right: 0;
    left: 0;
    padding: 0 20px;
    margin: 0;
}

.bg-white {
    background-color: #fff;
}

.fade-img {
        visibility: hidden;
    }

    .fadeIn {
        -webkit-animation: animat_show 0.8s;
        animation: animat_show 0.8s;
        visibility: visible !important;
    }

    @-webkit-keyframes animat_show{
        0%{opacity:0}
        100%{opacity:1}
    }

hr { 
    border-color: #4c7fa7;
    border-width: 3px;
    width: 75%;
}

h1 {
    text-transform: uppercase;
    color: #4c7fa7;
    text-align: center;
    font-size: 2.2em;
    margin-bottom: 1em;
}

.auction.visible-md, .auction.visible-lg {
        display: flex !important;
    }

/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-width: 1024px) {
.bgimg {
    background-attachment: scroll;
}
    .quote {
    width: 65%;
}
}

@media screen and (min-width: 0px) and (max-width: 768px) {
    .center-vertical {
        position: relative;
        }
    .circle-row {
        position: initial;
    }
    .constrained {
        display: grid;
        width: 100%;
        padding: 50px 0;
    }
    .quote {
        position: initial;
    }
    .circle-row {
/*        position: initial;
        width: initial;*/
    }
    .circle {
        margin-bottom: 3em;
    }
    .auction {
        padding: 0;
    }
    .auction .stats {
        padding: 1em;
    }
}
@media screen and (min-width: 0px) and (max-width: 600px) {
    .col-xs-4 {
        width: 100%;
    }
    .stat { font-size: 6em}
    .quote { width: 100% }
    
}
@media screen and (min-width: 600px) and (max-width: 2000px) {
.progress-sidebar {
    right: .45em!important;
}
    .constrained {
        padding: 0 50px;
    }
    .auction > div {
        padding: 0;
    }
}