:root {
  --pennblue: #0F2057;
  --bluegray: #629ad3;  
  --darkcyan: #00888b;
  --aquamarine: #90e1c1;
  --royalpurple: #644da8;
  --periwinkle:#b7b3e5;
  --white: #ffffff;
  --black: #000000;
}
@font-face {src: url("fonts/jost-regular.woff2") format("woff2");unicode-range: U+22,U+25-3F,U+41-5F,U+61-7D;font-display: fallback;font-family:Jost;font-weight:normal;}
@font-face {src: url("fonts/jost-medium.woff2") format("woff2");unicode-range: U+22,U+25-3F,U+41-5F,U+61-7D;font-display: fallback;font-family:Jost;font-weight:500;}
@font-face {src: url("fonts/jost-bold.woff2") format("woff2");unicode-range: U+22,U+25-3F,U+41-5F,U+61-7D;font-display: fallback;font-family:Jost;font-weight:bold;}
@font-face {src: url("fonts/jost-italic.woff2") format("woff2");unicode-range: U+22,U+25-3F,U+41-5F,U+61-7D;font-display: fallback;font-family:Jost;font-weight:normal; font-style: italic;}

  
body{font-family: jost, arial, Helvetica, sans-serif;color: var(--pennblue);font-size: 16px;line-height: 1.3;}

h1 {font-size: 30px;margin-bottom: 20px;color: var(--pennblue);line-height: 1.2;text-transform: uppercase;font-weight: regular;}
h2 {font-size: 24px;margin-bottom: 20px;color: var(--darkcyan);line-height: 1.2;font-weight: regular;}
h3 {font-size: 20px;margin-bottom: 20px;color: var(--royalpurple);line-height: 1.2;font-weight: regular;}
h4 {font-size: 18px;margin-bottom: 20px;color: var(--bluegray);line-height: 1.2;font-weight: regular;}
h5 {font-size: 16px;margin-bottom: 20px;color: var(--pennblue);line-height: 1.2;font-weight: regular;}
h6 {font-size: 16px;margin-bottom: 20px;color: var(--royalpurple);line-height: 1.2;font-weight: regular;}
a{color: var(--royalpurple);}
.color{min-height:150px;}
li::marker {
  color: var(--royalpurple);
}

.leads{color: var(--emu);font-style: italic;}
blockquote{padding-left: 30px;border-left: 5px solid var(--bluegray);font-style: italic;}
.column{padding: 20px;text-align: center;color: #fff;}

header{padding: 0px;box-shadow: 0px 5px 5px rgba(0,0,0,0.1);}

header svg{fill: var(--pennblue);width: 24px;height: 24px;margin-left: 10px; display: block;}
header svg:nth-child(2){fill: var(--darkcyan);}
header svg:nth-child(3){fill: var(--royalpurple);}
header svg:hover{fill: var(--bluegray); cursor: pointer;}
.main-menu{ display:flex;list-style:none;padding:0px;margin:0px; }
.main-menu ul,.menu-account ul{padding:0px;margin:0px;list-style:none;}
.main-menu li,.menu-account li{ padding:0px;margin:0px;display:block;list-style:none; }
.main-menu a{ display:block;padding:13px 10px; text-transform:uppercase; color:var(--pennblue); text-decoration:none; }
.main-menu > li > a:hover{background:var(--aquamarine);}
.menu-dropdown{ display:none; position: absolute;z-index:100;background:var(--darkcyan);color:#fff;}
.menu-dropdown > li{ text-align:left;}
.menu-dropdown a{ color:#fff; padding:10px 20px;border-bottom:1px solid rgba(255,255,255,0.2);background:var(--darkcyan);display:block; text-transform: uppercase; text-decoration: none;}
.menu-dropdown a:hover{ color:#fff; background:var(--royalpurple) }
/* .has-dropdown:hover .menu-dropdown{ display:block; } */

.menu-account .menu-dropdown{right:0px;font-size:90%;padding-top:10px; background: none;}
.menu-account .menu-dropdown a{padding:5px 20px;}

.light{ background:rgba(0,0,0,0.05); }
.button-project{ color:var(--pennblue); text-transform:uppercase; text-decoration:none; font-family: inherit;font-size:100%;padding: 0px;background: none; border:0px; outline:0px;}
.button-project:hover;{ color:var(--royalpurple);}
.dropdown-project .dropdown-menu{ background:#fff;color:var(--pennblue);border:0px;padding:0px;box-shadow: 1px 1px 5px rgba(0,0,0,0.1); }
.menu-bottom{ background:#f2f2f2; }
.menu-bottom a{font-size:90%;}

.close {box-sizing: content-box;cursor: pointer;width:100%;height: 20px;display:none;background: url(../images/close.svg) no-repeat center right;background-size: contain;opacity: 0.5;text-align:right;}
.close:hover{opacity: 1;}

.dropdown-menu a{display: block;color: var(--pennblue);text-decoration: none;padding: 5px 10px;border-bottom: #ccc;}
.dropdown-menu a:hover{background: var(--royalpurple);color: var(--white);}

.d-block{ width:100%;}
.button{border: 0px;font-size: 100%; display:inline-block;font-family: jost, arial, Helvetica, sans-serif; text-decoration:none;color: #fff;padding: 10px 30px; text-transform:uppercase;box-shadow:2px 2px 5px rgba(0,0,0,0.1)}
.button-primary{ background:var(--darkcyan); }
.button-white{ color:var(--darkcyan);background:var(--white); }
.button-secondary{ background:var(--royalpurple); }
.button:hover{ opacity:0.8; color:#fff;}
.button.disabled{background:#ccc;color:#666;}
.button.active{background:var(--pennblue);}

.disabled{opacity: 0.5;}
.active>.page-link, .page-link.active {    color: #fff;background-color: var(--darkcyan); border-color: var(--darkcyan);}
.pagination {--bs-pagination-color: var(--darkcyan); --bs-pagination-border-color: var(--darkcyan);
    --bs-pagination-border-radius:0;
    --bs-pagination-hover-color: var(--white);
    --bs-pagination-hover-bg: var(--pennblue);
    --bs-pagination-hover-border-color: var(--darkcyan);
    --bs-pagination-focus-color: var(--darkcyan)}

.popup{box-shadow: 0px 0px 10px rgba(0,0,0,0.3);position: relative;overflow: hidden;}
.popup2{background: url(../images/architecture.webp) no-repeat left top;min-height: 400px;padding:100px 30px 30px 30px;background-size: cover;text-align: center;}
.popup2:before{background: rgba(0,0,0,0.5);width: 100%;height: 100%;content: '';position: absolute;z-index: 0;top: 0px;left: 0px;}
.popup-text{font-size: 120%;position: relative;}

.accordion-button:not(.collapsed) {
    color: var(--darkcyan);
    background-color: var(--white);
    box-shadow: inset 0 calc(var(--moss) * -1) 0 var(--moss);
}
.accordion-button:not(.collapsed)::after {
    background-image: var(--bs-accordion-btn-active-icon);
    transform: var(--bs-accordion-btn-icon-transform);
}

.accordion-button {font-size: 110%;font-weight: 500;}
.text-medium{font-weight:500;}
.alert {padding: 20px 30px;border-radius:0px;}
.alert-success {
    --bs-alert-color: var(--white);
    --bs-alert-bg: var(--darkcyan);
    --bs-alert-border-color: var(--darkcyan);
}
.alert-danger {
    --bs-alert-color: var(--white);
    --bs-alert-bg: var(--aquamarine);
    --bs-alert-border-color: var(--aquamarine);
}
.alert-warning {
    --bs-alert-color: var(--white);
    --bs-alert-bg: var(--royalpurple);
    --bs-alert-border-color: var(--royalpurple);
}
.alert-info {
    --bs-alert-color: var(--white);
    --bs-alert-bg: var(--bluegray);;
    --bs-alert-border-color: var(--bluegray);
}
.form-control,.form-select{font-size: 100%;padding: 15px 20px;border-radius: 0px;}
.form-label{margin-bottom: 5px;}
.form-check-input:checked {
    background-color: var(--royalpurple);
    border-color: var(--royalpurple);
}



.table-striped>tbody>tr:nth-of-type(odd)>* {--bs-table-accent-bg: rgba(83,144,204,0.2);}
footer{background: var(--emu);color: #fff;font-size: 90%;padding: 20px 0px;text-align: center;}
.socmed ul,.socmed li{list-style: none;padding: 0px;margin: 0px;}
.socmed svg{fill: #fff;width: 24px;height: 24px;}
.socmed a:hover svg{fill: var(--moss);}
.socmed li{display: inline-block;}

footer a{ text-decoration: none;color:#fff; }
footer a:hover{color: var(--bluegray);}
.main-banner{background: url(../images/cranes.webp) no-repeat center center;background-size: cover;position: relative;padding: 120px 0px;}
.main-banner:before{background: rgba(0,0,0,0.5);width: 100%;height: 100%;content: '';position: absolute;top: 0px;left: 0px;z-index: 0;}
.banner{background: url(../images/iron-rods.webp) no-repeat center center;background-size: cover;padding: 80px 0px; position: relative;}
.banner:before{background: rgba(0,0,0,0.5);width: 100%;height: 100%;content: '';position: absolute;top: 0px;left: 0px;z-index: 0;}

span.bg{line-height: 1;padding: 5px 10px;margin-bottom: 10px;display: inline-block;}
.page-content{padding:20px 0px;min-height:calc(100vh - 150px);}

.text-lg{font-size:300%;}
.text-small{font-size:80%;}

.left-menu ul,.left-menu li{ list-style:none;padding:0px;margin:0px;font-size:95%; }

.left-menu a{padding:10px;border-bottom:1px solid #ccc;display: block; text-decoration: none; font-weight:bold; color: var(--pennblue);}
.left-menu a.active{background:var(--bluegray);color:#fff;}
.left-menu{ border-right:1px solid #ccc;height:100%; padding-right:20px;}

.list-group-item-action{ background:url(../images/arrow-right-short.svg) no-repeat right 10px center;padding-right:30px;}



@media(max-width: 991px){
        .left-menu{border-right:0px;padding-right:0px;}
    .menu-bottom{background: var(--darkcyan); padding-top:15px; display: none;}
    .menu-bottom .main-menu{ display:block;position: relative; font-size:110%;margin-right: -0.75rem;margin-left:-0.75rem;}
    .main-banner{padding: 40px 0px;}
  
    .socmed{margin-bottom:20px;}
    .main-menu a{ color:var(--white);border-bottom:1px solid rgba(255,255,255,0.2); padding:15px 20px;}
    .main-menu > li > a:hover{background:var(--royalpurple); }
    .menu-bottom .menu-dropdown{  position: relative;background: rgba(255, 255, 255, 0.2);}
    .menu-dropdown a{ border-bottom:1px solid rgba(0,0,0,0.1);background:none; padding:10px 30px;}
    .menu-dropdown a:hover{ color:#fff; background:var(--royalpurple) }
    .close{ display:block;margin-bottom:20px;} 
    .has-dropdown{ position:relative; }
    .menu-bottom .has-dropdown:before{content:'+';position: absolute;top:12px;right:20px; color: #fff}   
    .has-dropdown:hover .menu-dropdown{ display:none; }
    .menu-bottom  .has-dropdown.active:before{content:'-';}
    .menu-account .menu-dropdown{ background:var(--darkcyan);width:120px;padding-top:0px;margin-top:6px;}
    .menu-top{ display:none;width:120px; position: absolute;background:var(--darkcyan);top:38px;right:10px;font-size:85%;}
    .menu-top .main-menu li,.menu-top .main-menu { display:block; }
    .menu-top .main-menu > li > a{border-bottom:1px solid rgba(0,0,0,0.1);padding: 5px 20px;}

}
    

.pennblue{background: var(--pennblue)}
.darkcyan{background: var(--darkcyan)}
.royalpurple{background: var(--royalpurple)}
.bluegray{background: var(--bluegray)}
.aquamarine{background: var(--aquamarine)}
.periwinkle{background: var(--periwinkle)}
.black{background: var(--black)}



.pennblue.opacity20{background:rgba(15,32,87,0.2);}
.pennblue.opacity40{background:rgba(15,32,87,0.4);}
.pennblue.opacity60{background:rgba(15,32,87,0.6);}
.pennblue.opacity80{background:rgba(15,32,87,0.8);}

.darkcyan.opacity20{background:rgba(0,136,139,0.2);}
.darkcyan.opacity40{background:rgba(0,136,139,0.4);}
.darkcyan.opacity60{background:rgba(0,136,139,0.6);}
.darkcyan.opacity80{background:rgba(0,136,139,0.8);}

.aquamarine.opacity20{background:rgba(144,225,193,0.2);}
.aquamarine.opacity40{background:rgba(144,225,193,0.4);}
.aquamarine.opacity60{background:rgba(144,225,193,0.6);}
.aquamarine.opacity80{background:rgba(144,225,193,0.8);}

.royalpurple.opacity20{background:rgba(100,77,168,0.2);}
.royalpurple.opacity40{background:rgba(100,77,168,0.4);}
.royalpurple.opacity60{background:rgba(100,77,168,0.6);}
.royalpurple.opacity80{background:rgba(100,77,168,0.8);}

.bluegray.opacity20{background:rgba(83,144,204,0.2);}
.bluegray.opacity40{background:rgba(83,144,204,0.4);}
.bluegray.opacity60{background:rgba(83,144,204,0.6);}
.bluegray.opacity80{background:rgba(83,144,204,0.8);}

.text-pennblue{color: var(--pennblue)}
.text-darkcyan{color: var(--darkcyan)}
.text-royalpurple{color: var(--royalpurple)}
.text-bluegray{color: var(--bluegray)}
.text-aquamarine{color: var(--aquamarine)}