/* ------------------ Variables  --------------- */
:root {
	--branding-color: #0066BA;
}

/* ------------------ Layout  ------------------ */
body, button, input, select, textarea {
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	line-height: 1.5;
}
body { background: #fff; color: #333; }

/* ------------------ Header ------------------ */
#header .navbar { background-color: #0066BA; box-shadow: 0 3px 6px rgba(15, 15, 15, 0.25); }
#header .region-header { display: flex; }

@keyframes slide-down { 0% { opacity: 0; transform: translateY(-100%); } 100% { opacity: 0.9; transform:translateY(0); }}
#header .fixed-top { animation: slide-down .7s; }

#header .logo { float: left; margin-right: 10px; }
#header .escap.logo { display: none; padding-right: 10px; border-right: 1px solid #fff; }
#header .logo img { height: 68px; }

#menu-branding { display: none; }
#header .navigation { display: none; align-items: center; }
#header .sidr-toggle { display: block; float: right; }

#header .fixed-top .logo img { height: 40px; }

@media only screen and (min-width: 768px) {
	#header .escap.logo { display: block; }
	#header .logo img { height: 36px; }

	#header .navigation { display: flex; }
	#header .sidr-toggle { display: none; }
	#header .fixed-top .sidr-toggle { display: block; }
	#header .fixed-top .navigation { display: none; }
}
@media only screen and (min-width: 992px) {
	#header .logo img { height: 52px; }

	#header .fixed-top .sidr-toggle { display: none; }
	#header .fixed-top .navigation { display: flex; }
}
@media only screen and (min-width: 1200px) {
	#header .logo img { height: 68px; }

	#header .fixed-top .sidr-toggle { display: none; }
	#header .fixed-top .navigation { display: flex; }
}

/* ------------------ Navigation ------------------ */
#header .main-menu .nav-item { margin: 0 0.5rem; }
#header .main-menu .nav-item .nav-link { padding: 0.25em; color: #eee; text-decoration: none; font-weight: 400; cursor: pointer; }
#header .main-menu .nav-item > .nav-link { font-weight: 700; color: #eee; }
#header .main-menu .nav-item > .nav-link:hover { color: #fff; }
#header .main-menu .menu-item--expanded { position: relative; }
#header .main-menu .menu-item--expanded .dropdown-menu {
	margin: 0;
	padding: 0.5em;
	font-size: 0.9em;
	font-weight: 400;
  border: none;
  border-radius: 0;
	background-color: #fff;
	box-shadow: 0 3px 10px rgba(15, 15, 15, 0.5);
}

#header .main-menu .menu-item--expanded .dropdown-menu .dropdown-item { display: block; padding: 0.5em; }
#header .main-menu .menu-item--expanded .dropdown-menu .dropdown-item:hover { background-color: rgba(0, 104, 184, 0.2); border-radius: 0.25em; }
#header .main-menu .menu-item--expanded .dropdown-menu .dropdown-item .nav-link { padding: 0.25em 0; text-decoration: none; white-space: nowrap; color: #0F52BA; }
#header .main-menu .menu-item--expanded .dropdown-menu .dropdown-item .nav-link:hover { color: #0F52BA; }
#header .main-menu .menu-item--expanded .dropdown-menu .dropdown-item .dropdown-menu { margin-top: -2.5em;	margin-left: 11em; }
#header .main-menu .menu-item--expanded .dropdown-menu .dropend .dropdown-toggle:after { float: right; margin-top: .51em; }

#header .main-menu { font-size: 0.7rem; }
@media only screen and (min-width: 768px) {
	#header .main-menu { font-size: 0.8rem; }
}
@media only screen and (min-width: 992px) {
	#header .main-menu { font-size: 0.95rem; }
}
@media only screen and (min-width: 1200px) {
	#header .main-menu { font-size: 1rem; }
}

/* ------------------ Slideshow ------------------ */
#slideshow .carousel-caption h5 {
	font-size: 3rem;
	font-weight: 500;
	line-height: 1.25;
	color: #FFF;
}
#slideshow .overlay-gradient {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.09) 42%, rgba(0, 0, 0, 0.80) 100%);
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
}

/* ------------------ Panel ------------------ */
.panel { padding: 5rem 0; }
.panel .panel-title { margin-bottom: 2rem; font-size: 3rem; font-weight: 500; color: var(--branding-color); }
.panel .card { height: 100%; background: transparent; border: none; border-radius: 0; }
.panel .calendar-box { float: left; width: 5rem; }
.panel .calendar-box .date { padding: 0.5rem 0; text-align: center; color: #fff; background-color: var(--branding-color); }
.panel .calendar-box .date .day { font-size: 2rem; font-weight: 700; }
.panel .card-title-link { display: block; font-size: 1.1rem; font-weight: 500; color: #000; text-decoration: none; }

.panel .card-img-cta { position: relative; }
.panel .card-image-overlay {
	display: block;
	width: 100%;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  transition: all 0.5s ease-in-out;
  background-color: rgba(0, 0, 0, .8);
}
.panel .card-image-overlay .wp-block-group__inner-container { height: 100%; }
.panel .card-image-overlay .wp-block-group__inner-container p { height: 100%; margin-bottom: 0; }
.panel .card-image-overlay .btn-outline-white { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.panel .card-img-cta:hover .card-image-overlay { opacity: 1; }

.panel .panel-content .card .card-body { padding: 1rem 0 2rem; }
.panel .panel-content .card-one .card-body { border-bottom: 2px solid var(--branding-color); }
.panel .panel-content .card-two .card-body { border-bottom: 2px solid #F4BE18; }
.panel .panel-content .card-three .card-body { border-bottom: 2px solid #4F8D3F; }
.panel .panel-content .card-four .card-body { border-bottom: 2px solid #A05FB4; }


/* ------------------ Front page ------------------ */
#block-introduction { padding: 8rem 0; background-color: #f5f5f5; font-size: 1.25rem; font-weight: 400; }
#block-introduction h2 { margin-bottom: 2rem; font-size: 2.75rem; font-weight: 300; color: var(--branding-color); }
#block-introduction a.btn { margin-top: 2rem; padding: 0.5rem 3rem; font-weight: 500; }

#block-tools { padding: 3rem 0 6rem 0; background-color: #CFD8DC; color: #333; }
#block-tools h2 { margin-bottom: 4rem; text-align: center; font-size: 2.75rem; font-weight: 300; color: var(--branding-color); }
#block-tools a { color: #333; text-decoration: none; }
#block-tools a img { transition: transform 0.5s; }
#block-tools a img:hover { transform: scale(1.1); }
#block-tools h5 { margin-top: 1rem; margin-bottom: 0; font-size: 1.1rem; font-weight: 700; }
#block-tools p { font-size: 0.9rem; }

/* ------------------ Content ------------------ */
.region-help .messages,
.region-content .block-system-breadcrumb-block { margin-top: 1rem; }
.region-content { padding-bottom: 3rem; }

.page-title {
	margin-bottom: 1.5rem;
	font-weight: 700;
	color: var(--branding-color);
}

#block-main-content ul.un-style,
#block-main-content ol.un-style { list-style: none; counter-reset: li; }
#block-main-content ul.un-style li,
#block-main-content ol.un-style li { margin-bottom: 1rem; }
#block-main-content ul.un-style > li:before,
#block-main-content ol.un-style > li:before {
	float: left;
	width: 1rem;
	margin-left: -1.25rem;
}
#block-main-content ul.un-style > li:before {
	content: '\2022';
	font-size: 2rem;
	line-height: 0.75;
	color: #00adef;
}
#block-main-content ol.un-style > li:before {
	content: counter(li, decimal);
	counter-increment: li;
/*	padding-right: 1rem;*/
	font-weight: 700;
	text-align: right;
}
#block-main-content ol.roman > li:before { content: counter(li, lower-roman)'.'; text-align: left; }
#block-main-content ol.alpha > li:before { content: counter(li, lower-alpha)'.'; text-align: left; }
#block-main-content ol.roman.long > li:before,
#block-main-content ol.alpha.long > li:before { width: 2.5rem; }

#block-main-content ul.un-style ul,
#block-main-content ol.un-style ol { margin-top: 1rem; margin-bottom: 0; }
#block-main-content ul.un-style li ul li:before { color: #999; }
#block-main-content ul.un-style li ol li:before,
#block-main-content ol.un-style li ol li:before { color: #666; }

.card.table-content { background-color: #E1F5FE; border-color: #29B6F6; }
.card.table-content ul li { margin-bottom: 0.5rem; }


/* --------------- Guidelines ----------------- */
#page-guidelines .table thead tr th { background-color: #eee; }
#page-guidelines .table tbody ul { padding-left: 1rem; }
#page-guidelines .table .full-row { background-color: #ddd; font-weight: 700; }

#table-policy-options thead tr th { background-color: #eee; }
#table-policy-options thead tr th p { margin-bottom: 0; }
#table-policy-options thead tr th .description { font-size: 0.8rem; font-weight: 400; color: #555; }

#table-valuation-method thead tr th { background-color: #eee; }
#table-problem-category thead tr th { background-color: #eee; }

/* --------------- Footer ----------------- */

#footer .region-footer-bottom {
	background: #020b3b;
	padding: 1.5rem 0 1rem 0;
	color: #fff;
}
#footer .unescap-logo { max-width: 320px; }
#footer ul.social-media { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; }
#footer ul.social-media li { width: 33.3%; padding: 15px 0; }
#footer ul.social-media li i.fa-brands { display: block; width: 1.3rem; height: 1.3rem; color: #fff; }
#footer ul.social-media li i.fa-brands svg { width: 100%; height: 100%; }

#footer .contact h4 { color: #fff; }
#footer .contact p { font-size: 0.9rem; }
#footer hr.footer-line { background: #fff; }
#footer ul.footer-copyright { list-style: none; margin: 0; padding: 0; padding-bottom: 1.5rem; font-size: 0.8rem; }
#footer ul.footer-copyright li { display: inline-block; padding-right: 1.5rem; }
#footer ul.footer-copyright li a { color: #fff; }
#footer ul.footer-copyright li a:hover { color: #fff; }
#footer ul.footer-copyright li.unescap { opacity: .75; }