section {
padding: 50px 0;
}
body, html {
height: 100%; margin: 0; opacity: 1; transition: opacity 0.5s ease-in;
}
.wrapper {
@include media-breakpoint-up(md) { min-height: calc(100vh - 315px); }
}
.content-default {
background-color: $white; box-shadow: 0 5px 10px 0 rgba(0, 35, 75, 0.15); margin: 80px 0; padding: 50px 10px; @include media-breakpoint-up(md) { padding: 50px; }
}
.section-indent {
margin-top: -100px; @include media-breakpoint-down(md) { margin-top: 0; }
}
.bg-navy {
color: $white;
}
.image-center-container {
height: 100%; text-align: center; img { min-height: 100%; min-width: 100%; } @include media-breakpoint-down(md) { img { max-width: 100%; min-width: 0; } }
}
.modal-open {
position: fixed;
}
.program {
align-items: center; display: -webkit-flex; display: -ms-flex; display: flex; @include media-breakpoint-down(xs) { flex-wrap: wrap; }
}
.program-body {
border-top: solid 1px $blue-grey; margin-top: 1rem; padding-top: 1rem; @include media-breakpoint-up(sm) { border-left: solid 1px $blue-grey; border-top: 0; flex: 1; margin-left: 30px; margin-top: 0; padding-left: 30px; padding-top: 0; }
}
.program-image {
flex-basis: 92px; min-width: 92px; @include media-breakpoint-down(xs) { flex-basis: 100%; margin-bottom: 1rem; min-width: 100%; text-align: center; }
}
.section-dark {
background-color: #e4e8ea;
}
.timeline-section {
display: flex; flex-wrap: wrap;
}
.timeline-section li {
list-style: none; position: relative; text-align: left; width: 100%; @extend .clearfix; .timeline-item { padding: 0 50px; position: relative; &:before { background-color: #e2e2e2; border: 1px solid theme-color("primary"); border-radius: 50%; content: ""; display: block; height: 1rem; position: absolute; top: 6px; width: 1rem; z-index: 10; } } &:nth-child(2n) { padding-right: 50%; text-align: right; .timeline-item { &:before { right: -0.5rem; } } } &:nth-child(2n+1) { padding-left: 50%; .timeline-item { &:before { left: -0.5rem; } } }
}
.timeline-wrapper {
min-height: 400px; position: relative;
}
.timeline-section {
padding: 0;
}
.timeline-nested {
max-height: 0; position: absolute; top: 0; transform: scale(0); transition: all ease-in; transition-delay: 0s; transition-duration: 0.2s; &:after { border-left: 1px solid theme-color("primary"); bottom: 0; content: ""; left: 50%; margin-left: -0.5px; position: absolute; top: -10px; } &.collapse-show { max-height: 900px; position: relative; transform: scale(1); transition-delay: 0.2s; transition-duration: 0.5s; }
}
.timeline {
max-height: 450px; transform: scale(1); transition: all ease-in; transition-delay: 0.2s; transition-duration: 0.5s; &:after { border-left: 1px solid theme-color("primary"); bottom: 0; content: ""; left: 50%; margin-left: -0.5px; position: absolute; top: -10px; } &.collapse-hide { max-height: 0; transform: scale(0); transition-delay: 0s; transition-duration: 0.2s; }
}
.timeline-nested-close {
position: absolute; top: 0; z-index: 10;
}
.timeline-nested-title {
align-items: center; background-color: theme-color("primary"); border-radius: 50%; color: $white; display: flex; height: 100px; justify-content: center; margin: 0 auto 40px; position: relative; width: 100px; z-index: 20; h4 { margin-bottom: 0; }
}
.card {
background-color: $white; box-shadow: 0 5px 10px 0 rgba(0, 35, 75, 0.15); margin-bottom: 30px;
}
.card-horizontal {
@include media-breakpoint-up(md) { flex-direction: row; } .card-body { margin-left: 10px; }
}
.section-footer {
padding: 30px 0 80px;
}
.section-bio {
margin-top: 50px;
}
.bio-wrapper {
background-color: $white; box-shadow: 0 5px 10px 0 rgba(0, 35, 75, 0.15); margin-top: 20px; padding: 50px;
}
.editor-link {
display: none;
}
.cms-editor-active .editor-link {
background-color: #f7e064; display: block; margin: 0 auto; padding: 10px 20px;
}
.btn-link {
@extend .text-primary;
}
.fill-blue g, .fill-blue path {
fill: #546c7e;
} // Modal
.modal-open {
bottom: 0; left: 0; right: 0; top: 0;
}
.modal-title {
color: $navy; line-height: 1;
}
.modal-header {
padding: 1.5rem 2.5rem;
}
.modal-body {
max-height: 500px; overflow: scroll; padding: 0;
}
.modal-content {
border-radius: 0; box-shadow: 0 5px 10px 0 rgba(0, 35, 75, 0.15); &:after { background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.78) 61%, $white); bottom: 0; content: ""; height: 53px; left: 0; pointer-events: none; position: absolute; right: 0; }
}
.modal-header .close {
padding: 0;
}
.modal-nav {
align-items: center; display: -webkit-flex; display: -ms-flex; display: flex; justify-content: space-between; margin-bottom: 1rem; padding: 0 2.5rem; .breadcrumb { margin-bottom: 0; }
} @media (max-width: 768px) {
.modal-body { padding: 0 40px; }
} // Breadcrumb
.breadcrumb {
font-size: 12px; font-weight: 500;
}
.breadcrumb-item {
a { @extend .text-info; }
} // Dropdown
.dropdown-toggle {
font-size: 12px;
}
.dropdown-menu {
box-shadow: 0 5px 10px 0 rgba(0, 35, 75, 0.15);
}
.dropdown-item {
font-size: 12px; @extend .text-info; font-weight: 500;
}
.dropdown-toggle {
white-space: nowrap;
}
.dropdown-toggle:after {
background-image: url("data:image/svg+xml;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgdmlld0JveD0iMCAwIDQ1MS44NDcgNDUxLjg0NyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDUxLjg0NyA0NTEuODQ3OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgY2xhc3M9IiI+PGc+PGc+Cgk8cGF0aCBkPSJNMjI1LjkyMywzNTQuNzA2Yy04LjA5OCwwLTE2LjE5NS0zLjA5Mi0yMi4zNjktOS4yNjNMOS4yNywxNTEuMTU3Yy0xMi4zNTktMTIuMzU5LTEyLjM1OS0zMi4zOTcsMC00NC43NTEgICBjMTIuMzU0LTEyLjM1NCwzMi4zODgtMTIuMzU0LDQ0Ljc0OCwwbDE3MS45MDUsMTcxLjkxNWwxNzEuOTA2LTE3MS45MDljMTIuMzU5LTEyLjM1NCwzMi4zOTEtMTIuMzU0LDQ0Ljc0NCwwICAgYzEyLjM2NSwxMi4zNTQsMTIuMzY1LDMyLjM5MiwwLDQ0Ljc1MUwyNDguMjkyLDM0NS40NDlDMjQyLjExNSwzNTEuNjIxLDIzNC4wMTgsMzU0LjcwNiwyMjUuOTIzLDM1NC43MDZ6IiBkYXRhLW9yaWdpbmFsPSIjMDAwMDAwIiBjbGFzcz0iYWN0aXZlLXBhdGgiIHN0eWxlPSJmaWxsOiMwMDIzNEIiIGRhdGEtb2xkX2NvbG9yPSIjMDAyMzRiIj48L3BhdGg+CjwvZz48L2c+IDwvc3ZnPg=="); background-repeat: no-repeat; background-size: contain; border: 0; height: 8px; vertical-align: 0; width: 9px;
} // Alerts @each $color, $value in $theme-colors {
.alert-#{$color} { .alert-close { @include alert-close-variant($value) } }
}
.alert {
.close { position: absolute; right: 1.25rem; top: 50%; transform: translateY(-50%); }
} // Map
map {
height: 450px; width: 100%;
}
.map-wrapper {
position: relative; @include media-breakpoint-up(md) { .tiles-wrapper { max-width: 400px; position: absolute; right: 50px; top: 50%; transform: translateY(-50%); z-index: 100; } }
}
.sub-category-content {
img { display: block; height: auto; margin-bottom: 1rem; max-width: 100%; }
}
.content-main {
a { text-decoration: underline; }
} // Sidebar
.sidebar {
background-color: $white; box-shadow: 0 5px 10px 0 rgba(0, 35, 75, 0.15); margin-bottom: 1rem;
}
.category {
.list-group-item { border: 0; } > a { color: $blue-grey; display: block; font-size: 16px; font-weight: 600; letter-spacing: -0.2px; line-height: 1.75; padding: 20px 21px; text-transform: capitalize; @include media-breakpoint-up(lg) { font-size: 20px; padding: 28px 30px; } &[data-toggle="collapse"] { position: relative; &:after { content: "\e903"; font-size: 12px; position: absolute; top: 50%; right: 20px; transform: translateY(-50%); font-family: 'icomoon' !important; } &.collapsed { position: relative; &:after { content: "\e902"; } } } } &:not(.active) { position: relative; margin-top: -1px; [data-toggle="collapse"] { &:after { color: theme-color("secondary"); } } .category-inactive { border-bottom: solid 1px #dee2e3; } } & + .category:not(.active) { position: relative; &:before { border-top: solid 1px #dee2e3; content: ""; display: block; position: absolute; right: 0; left: 0; top: 0; z-index: 10; @include media-breakpoint-up(lg) { right: 20px; left: 20px; } } } &.active { .category-active { background-color: theme-color("primary"); color: $white; } }
}
.sub-category {
padding: 20px 0; .list-group-item { border: none; border: 0; color: theme-color("secondary"); font-weight: 500; font-size: 14px; line-height: 1.5; padding: 11px 40px; text-transform: capitalize; @include media-breakpoint-up(lg) { color: $blue-grey; font-size: 16px; padding: 11px 30px; } &.sub-category-active { color: theme-color("secondary"); position: relative; &:before { background-color: theme-color("primary"); bottom: 5px; content: ""; display: block; left: 0; position: absolute; top: 5px; width: 5px; } } }
}
.component__body {
padding: 1rem; margin: 1rem 0 0; border: solid #f7f7f9; border-width: 0.2rem 0 0; border-width: 0.2rem;
}