@charset "UTF-8";
/* CSS Document
Client: HACAP
Company: Informatics, Inc
Author: Jeff S
Date: November 2020

*/

/* Variables */
:root {
  --primary: #004b8c;
  --secondary: #fbab13;
  --green: #609639;
  --bkg: #f4f4f4;
  --dark: #333;
  --header: '',;
  --body: 'Montserrat', sans-serif;
  --serif: Georgia, 'Times New Roman', Times, serif;
  --spacer: 2rem;
  --text-color: rgba(0,0,0,.65);
}

/* TYPOGRAPHY */
html {font-size: 100%;}
body {background: url(../img/bkg.jpg) 0 0 no-repeat var(--bkg); background-size: 100% auto;
font-family: var(--body); font-weight: 400; font-size: 100%; line-height: 1.6; color: rgba(0,0,0,.65);
width: 100hw; overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
-moz-font-feature-settings: "liga" on;
}
body.no-bkg {background: var(--bkg);}
h1, h2, h3, h4, h5 {font-family: var(--body); font-weight: 800; color: var(--dark); margin: 0 0 1rem 0;line-height: 1;}
h1 {font-size: 2.25rem; margin-bottom: .8rem; padding-bottom: 1rem; position: relative; text-transform: uppercase; }
h1:after {width: 50px; height: 10px; background: var(--secondary); content: ""; position: absolute; left: 0; bottom: 0;}
h2 {font-size: 2.5rem; margin-bottom: .75rem; text-transform: uppercase; }
h3 {font-size: 1.5rem; font-weight: 800; line-height: 1.1; letter-spacing: -1px;}
h4 {font-size: 1rem; text-transform: uppercase; letter-spacing: 1px; margin: 25px 0;}
span.gold {color: var(--secondary); display: inline-block;}

p, ul, ol {margin-bottom: 1.75em;}
strong {color: #333;}
.lead {font-size: 1.5rem; font-weight: 300; letter-spacing: -.5px;}
img {max-width: 100%; height: auto;}
.img-round > img {border-radius: 15px; box-shadow: 10px 10px 25px rgba(0,0,0,.1); margin: 0 0 25px 0;}
.img-right > img, .img-left > img {margin: 0 0 25px 0; box-shadow: 10px 10px 15px rgba(0,0,0,.2); border-radius: 10px;}
.border-left {padding-left: 20px; border-left: 1px solid #ccc;}
h4 + .border-left {margin-top: -10px;}

hr {border-color: #ccc; margin: 30px 0; position: relative;}

.quote, blockquote {font-family: Georgia, 'Times New Roman', Times, serif; font-size: 1.5rem; line-height: 1.4;}
.fun-list ul {list-style: none; padding: 0;}
.fun-list ul li {position: relative; padding: 7px 5px 7px 25px;}
.fun-list ul li:before {content: "\f00c";font-family: FontAwesome; color: var(--secondary);margin: 0 10px 0 0; position: absolute; left: 0; top: 7px;}

.link-list ul {list-style: none; padding: 0 0 0 25px; margin: 0 0 2rem; border-left: 1px solid #ccc;}
.link-list ul li {position: relative; padding: 7px 5px 7px 25px;}
.link-list ul a {font-weight: 700; text-decoration: underline;}
.link-list ul li:before {content: "\f08e";font-family: FontAwesome; color: var(--secondary);margin: 0 10px 0 0; position: absolute; left: 0; top: 7px;}

.file-list ul {list-style: none; padding: 0 0 0 25px; margin: 0 0 2rem; border-left: 1px solid #ccc;}
.file-list ul li {position: relative; padding: 7px 5px 7px 25px;}
.file-list ul a {font-weight: 700; text-decoration: underline;}
.file-list ul li:before {content: "\f0f6";font-family: FontAwesome; color: var(--secondary);margin: 0 10px 0 0; position: absolute; left: 0; top: 7px;}

/* LINKS */
a {color: var(--primary);}
a:hover {color: var(--secondary);}
a:visited {opacity: .8;}
a.btn-theme, .btn-theme > a, input.btn-theme, input.btn-success {background: var(--green); color: #fff; text-transform: uppercase; font-weight: 800; font-size: .8rem; padding: .8rem 1.25rem; display: inline-block; border-radius: 5px; position: relative; top: 0; left: 0; box-shadow: 5px 5px 5px rgba(0,0,0,.1); border: none;}
a.btn-theme:hover, .btn-theme > a:hover, input.btn-theme:hover, input.btn-success:hover {background: var(--primary); text-decoration: none; color: #fff; border: none;}
.content p a {text-decoration: underline;}

.btn-text > a, span.btn-text {text-transform: uppercase; font-weight: 900; color: var(--primary); padding: 5px 0; letter-spacing: 1px; display: inline-block; font-size: 1rem;}
.btn-text > a:after, span.btn-text:after {content: "\f054";font-family: FontAwesome; margin: 0 0 0 5px;}
.btn-text > a:hover:after, .blog-item:hover span.btn-text:after {margin-left: 10px;}
.btn-text > a:hover {background: none; text-decoration: none;}

/* Animate */
.ccm-page a, #site-header:before, input.btn-theme, .btn-success {
-webkit-transition: all .25s linear;
-moz-transition: all .25s linear;
-o-transition: all .25s linear;
transition: all .25s linear;
}
.bezier, .page-link *, .feature-blue *, #menu, #site-header, .page-link:after, a:after, #nav-main ul, .extranet-item i {
  -webkit-transition: all 600ms cubic-bezier(0.165, 0.84, 0.44, 1);
  transition:         all 600ms cubic-bezier(0.165, 0.84, 0.44, 1);
 }

/* --------------
/* GLOBAL */
.container {padding: 0 25px; width: 100%; max-width: 1250px; position: relative;}
#hero .text {padding: 0 10px; margin: -25px 0 0 0;}
#hero .text h1 {font-size: 3.25rem; text-shadow: 8px 8px 0 rgba(0,0,0,.05);}
#hero .text p {font-size: 21px; font-weight: 300; line-height: 1.3;}
#hero figure {border-radius: 10px; overflow: hidden; height: 60vh;}
#hero figure img, #hero figure .simpleParallax {width: 100%; height: 100%; object-fit: cover;}
.text-wrapper {position: relative;display: block;overflow: hidden;height: 50px;width: 100%;}
.phrase  {position: absolute; width: 100%; height: 500px; left: 0;}
.letter {display: inline-block;line-height: 1em;transform-origin: 0 0;color: var(--secondary);}
.partners {padding: 25px; border-left: 1px solid #ccc; border-bottom: 1px solid #ccc; width: 50%;}

.text-center {padding: 50px 0;}
.text-center p {font-weight: 300; font-size: 21px; max-width: 850px; margin: 0 auto;}
.page-list {display: grid;grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));grid-gap: 25px;padding: 0px;}
.page-link {display: block; position: relative; background: #111; border-radius: 10px; overflow: hidden;box-shadow: 5px 5px 15px rgba(0,0,0,.2);}
.page-link img {opacity: .9; width: 100%;}
.page-link h3, .page-link.nav-path-selected h3 {position: absolute; left: 0; bottom: 0; color: #fff; margin: 0; padding: 0 25px 50px 25px; text-shadow: 3px 3px 0px rgba(0,0,0,.1); letter-spacing: -.5px; z-index: 5; width: 100%;}
.page-link h3:before {position: absolute; left: 0; top: -20px; width: 100%; height: 100%; background: var(--primary); content: ""; z-index: -1; min-height: 120px; opacity: .7;
background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 66%, rgba(0,0,0,0.65) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 66%,rgba(0,0,0,0.65) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 66%,rgba(0,0,0,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */}
.page-link:hover img, .page-link.nav-path-selected img {transform: scale(1.1); opacity: .2;}
.page-link:hover h3 {color: var(--secondary); padding-bottom: 50px;}
.page-link:after {position: absolute; left: 25px; bottom: 25px; content: "Learn More"; color: #fff; font-size: .8rem; text-transform: uppercase;}
.page-link.nav-path-selected:after {content: "You Are Here";}

.feature-blue {background: var(--primary); position: relative; border-radius: 10px; overflow: hidden; box-shadow: 5px 5px 15px rgba(0,0,0,.2); margin: 0 0 25px 0;}
.feature-blue img {position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; opacity: .1;}
.feature-blue .text {padding: 25px; color: #fff; position: relative; z-index: 5;}
.feature-blue h3 {color: var(--secondary); font-size: 2rem; text-shadow: 3px 3px 3px rgba(0,0,0,.1);}
.feature-blue .btn-theme {font-size: 1rem;}
.feature-blue .btn-theme a:hover {background: var(--secondary);}
.feature-blue:hover img {transform: scale(1.1);}

.arrow-btm {background: url(../img/arrow.png) 50% bottom no-repeat; padding: 50px 0;}
.arrow-left {position: relative;}
.arrow-top {background: url(../img/arrow.png) 50% -450px no-repeat; padding-top: 100px;}
.animate-in {opacity: 0; transform: translate(0, 25px)}
.animate-in.visible {
opacity: 1;
transform: translate(0, 0);
transition-delay: .15s;
transition-duration: .50s;
transition-timing-function: ease-out;}

#page-header {padding: 25px 0;}
#page-header .breadcrumb {background: none; padding: 0; margin: 25px 0 0 0; font-size: .8rem;}
#page-header p {font-size: 19px; font-weight: 300;}
#page-header h1 {margin: 10px 0 25px 0; word-break: break-word;}
#page-header figure {height: 400px;}
.img-combo {height: 100%; display: grid;  grid-gap: 15px; min-height: 500px;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
}
.img-combo .col img {border-radius: 15px; width: 100%; height: 100%; object-fit: cover; position: absolute; left: 0; top: 0;}
.img-combo .col {position: relative;
  grid-column: 3 / 5;
  grid-row: 1 / 3;
}
.img-combo .col:nth-of-type(2) {
  grid-column: 3 / 5;
  grid-row: 3 / 5;
}
.img-combo .col:nth-of-type(3) {
  grid-column: 1 / 3;
  grid-row: 3 / 4;
}
.img-combo .col:nth-of-type(4) {
  grid-column: 1 / 2;
  grid-row: 4 / 5;
}
.img-combo .col:nth-of-type(5) {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}
.img-combo.alt .col:first-of-type {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}
.img-combo.alt .col:nth-of-type(2) {
  grid-column: 4 / 5;
  grid-row: 4 / 5;
}
.img-combo.alt .col:nth-of-type(3) {
  grid-column: 3 / 5;
  grid-row: 1 / 3;
}
.img-combo.alt .col:nth-of-type(4) {
  grid-column: 2 / 4;
  grid-row: 3 / 5;
}
.img-combo.alt .col:nth-of-type(5) {
  grid-column: 1 / 2;
  grid-row: 3 / 4;
}
.row + .row {margin-top: 25px;}
#page-header .img-combo {min-height: 0;}
.box {padding: 50px 0; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; background: var(--primary); padding: 50px; margin: 50px 0; color: #fff; box-shadow: 10px 10px 25px rgba(0,0,0,.3);}
.box h2, .box h3 {color: #fff; font-size: 1.85rem;}
.box p {font-size: 1.35em;}
.box p:last-of-type {margin: 0;}
.box p a {font-weight: 700; position: relative; color: var(--secondary);}
.box p a:hover {color: #fff; text-decoration: none;}
.box p a:hover:after {height: 100%;}
.box p a:hover:after {opacity: .7;}
#page-header + .box {margin: 0 0 75px;}

.light-box {padding: 25px; background: #fff; box-shadow: 0 0 25px rgba(0,0,0,.1); border-radius: 25px;}

#sec {margin: 0 0 25px 0;}
#sec ul {list-style: none; padding: 0; margin: 0; background: #f9f9f9; border-top: 5px solid var(--primary); box-shadow: 10px 10px 0 rgba(0,0,0,.05);}
#sec ul a {display: block; padding: 15px; color: var(--dark);}
#sec ul a {border-bottom: 1px dotted #ccc;}
#sec ul a:hover {background: #fff; padding: 15px 10px 15px 20px;}
#sec ul .nav-path-selected a {font-weight: bold; background: #fff; color: var(--primary);}

.icon-item {position: relative; padding: 0 20px 20px 20px; font-size: 14px; margin: 0;}
.icon-item img, .icon-item i {position: absolute; left: 0px; top: 0; font-size: 30px; color: #222; width: 50px; text-align: center; color: var(--secondary);}
.icon-item h3 {margin: 0 0 10px 0; padding-left: 30px;}
.icon-item p {border-left: 3px solid #f1f1f1; padding: 0 0 0 30px;}
.icon-item p:last-of-type {margin: 0;}
.info-grid {
display: grid;
grid-gap: 20px;
}

#page-header.full {display: block; position: relative; text-align: center; background: var(--dark); padding: 0; overflow: hidden; height: auto; min-height: auto; margin-bottom: 25px;}
#page-header.full .text {width: 100%; display: block; padding: 50px 25px; position: relative; z-index: 5;}
#page-header.full figure {width: 100%;}
#page-header.full img {position: absolute; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: .2; object-position: center center;}
#page-header.full .text h1 {font-size: 2.5rem; color: #fff;}
#page-header.full .text h1:after {left: calc(50% - 25px); bottom: -10px;}
#page-header.full .text p {color: #fff; max-width: 800px; margin: 0 auto 50px auto;}
#page-header.full .breadcrumb a {color: var(--secondary);}
#page-header.full .breadcrumb li {color: #fff;}
#page-header.full + .container .content .arrow-top {margin-top: -75px;}

#page-header.full.full-short {background: url(../img/hdr-geo.jpg) center center; background-size: cover;}
#page-header.full.full-short .text {padding: 40px 25px;}

.grid {display: flex; flex-wrap: wrap; justify-content: flex-start; margin: 0 -1% 25px -1%;}
.extranet-item {display: flex; flex-direction: column; justify-content: center; padding: 25px; background: #eee; width: 48%; text-align: center;;color: #555; border-radius: 15px; margin: 1%;}
.extranet-item i {font-size: 30px; color: var(--secondary); position: relative; top: 0;}
.extranet-item h3 {margin: 10px 0;}
.extranet-item p {font-size: 14px; margin: 0;}
.extranet-item:hover {background: #fff; box-shadow: 0 0 15px rgba(0,0,0,.065); color: #222; text-decoration: none;}
.extranet-item:hover h3 {color: var(--primary);}
.extranet-item:hover i {top: -6px;}

aside .box {display: block; padding: 25px; border-top: 5px solid var(--secondary);}
aside .box h2, aside .box h3 {font-size: 28px; border: none; border-bottom: 1px dotted rgba(255,255,255,.5); margin: 0 0 25px 0; padding: 0 0 25px 0;}
aside .box p {font-size: 14px;}

/* Clean List Item */
.clean-list-item {display: block; overflow: hidden; border-bottom: 1px dotted #ccc; padding: 25px 0; color: #555;}
.clean-list-item time {font-weight: bold; color: #333; margin: 0 0 10px 0; display: block;}
.clean-list-item h2 {font-size: 32px; text-transform: none; font-style: normal;line-height: 36px; margin: 0 0 20px 0; color: var(--primary);}
.clean-list-item p {font-size: 15px;}
.clean-list-item .btn-theme {padding: 10px 15px; font-size: 14px;}
.clean-list-item img {border-radius: 10px; box-shadow: 5px 5px 10px rgba(0,0,0,.1); margin: 0 0 25px 0;}
.clean-list-item:hover {text-decoration: none; color: #333;}
.clean-list-item:hover .btn-text {color: var(--primary);}
.clean-list-item:hover h2 {text-decoration: underline;}

/* BLOG SIDEBAR ITEMS */
.ccm-block-topic-list-wrapper h5 {font-size: 18px; border-top: 5px solid var(--secondary); padding: 10px;}
.ccm-block-topic-list-wrapper ul {list-style: none; padding: 0; margin: 0 0 25px 0;}
.ccm-block-topic-list-wrapper ul a {display: block; padding: 10px; border-bottom: 1px dotted #ccc;}
.ccm-block-topic-list-wrapper .ccm-block-topic-list-topic-selected {background: #f4f4f4;}
.ccm-block-tags-wrapper h5 {font-size: 18px; border-top: 5px solid var(--secondary); padding: 10px;}
.ccm-block-tags-wrapper .ccm-block-tags-tag-selected {background: #ccc;}

/* BLOG DETAIL STYLES */.container.skinny {max-width: 900px;}
#blog-entry header {border-top: 1px dotted #ccc; border-bottom: 1px dotted #ccc; margin: 0 0 25px 0; text-align: center; padding: 25px 0;}
#blog-entry header h1 {font-size: 46px; margin: 0 0 25px 0; text-transform: none; font-style: normal; letter-spacing: -1px;}
#blog-entry header h1:after {left: calc(50% - 25px);}

#blog-entry header .breadcrumb {background: none; padding: 0; margin: 15px 0; font-size: 14px;}
#blog-entry {font-size: 18px;}
#blog-entry .lead {color: var(--primary); padding: 25px 25px 25px 35px; border-left: 10px solid var(--secondary); background: #fff; margin: 25px 0; font-size: 28px;}
#blog-entry .skinny {max-width: 900px;}
#blog-entry .social {text-align: center;}

.grid-two-third {display: grid; grid-gap: var(--spacer);}

.content .col-md-9 img, .content .ccm-image-block {margin: 0 0 25px 0;}
.volunteer-form {border-left: 3px solid #f1f1f1; padding: 0 0 0 30px; margin: 0 0 0 20px;}
.volunteer-form label {font-size: .8rem;}

/* --------------
/* TABLETS */
@media (min-width: 768px) {
hr {margin: 50px 0;}
#hero {height: 75vh; margin-top: 25px; position: relative;}
#hero figure {width: 50%; float: right; height: 90%; border-radius: 20px; box-shadow: 10px 10px 25px rgba(0,0,0,.3);}
#hero figure .simpleParallax {width: 100%; height: 100%; object-fit: cover; border-radius: 20px; }
#hero .text {display: flex; flex-direction: column; justify-content: space-between; float: left; width: 100%; height: 100%; padding: 0; text-align: left; position: absolute; left: 0; z-index: 25; margin: 0;}
.line-one {border-left: 1px solid #ccc; display: block; height: 15%;}
.partners {border-bottom: 1px solid #ccc; width: 50%; padding: 30px 0 50px 30px;}
#hero .text h1 {font-size: 5rem;}
#hero .text p {font-size: 24px; max-width: 45%;}
.text-wrapper, .phrase {height: 115px;}

.help-grid {
display: grid;
grid-template-columns: auto auto;
grid-template-rows: auto auto;
grid-gap: 30px;}
.help-grid .feature-blue {margin: 0;}
.info-grid {display: grid;grid-template-columns: repeat(2, 1fr);}

#page-header {border-top: 1px solid #ccc;}

#page-header {margin-bottom: 50px; padding: 50px 0; overflow: hidden; }
#page-header .line-one {min-height: 10%;}
#page-header .text {flex: 1; padding-right: 50px; display: flex; flex-direction: column; justify-content: space-between; width: 50%; float: left; position: relative; z-index: 15;}
#page-header h1 {font-size: 4.5rem; word-break: normal;}
#page-header figure {flex: 1; overflow: hidden; height: 55vh; width: 50%; float: left;}
#page-header.full .text h1 {font-size: 4rem;}

.icon-item {margin: 0;}
.img-combo .col:nth-of-type(5) {
  grid-column: 2 / 3;
  grid-row: 1/ 2;
}
}

/* --------------
/* SMALL DESKTOPS */
@media (min-width: 992px) {
h1 {font-size: 5rem;}
.img-left {max-width: 50%; float: left; margin: 0 35px 35px 0;}
.img-right {max-width: 50%; float: right; margin: 0 0 35px 35px;}

#hero .text h1 {font-size: 6.5rem;}
#hero figure {width: 45%; height: 100%;}

.page-link h3 {padding: 0 25px 25px 25px;}
.page-link:after {opacity: 0; bottom: 10px;}
.page-link.nav-path-selected h3 {color: var(--secondary);}
.page-link:hover:after, .page-link.nav-path-selected:after {opacity: 1; bottom: 25px;transition-delay: .2s;}

.feature-blue .text {padding: 50px; font-size: 18px;}

#page-header {display: flex; height: 70vh; margin-bottom: 50px; min-height: 600px; border-top: none; padding: 25px 0;}
#page-header.full {margin-bottom: 50px;}
#page-header .text {width: 50%;}
#page-header p {font-size: 24px;}
#page-header figure {height: 100%;}
.img-combo .col:nth-of-type(3) {
  grid-column: 1 / 3;
  grid-row: 2 / 4;
}

.box {overflow: hidden; display: flex;}
.box h2 {display: block; border-right: 1px dotted rgba(255,255,255,.5); margin: 0 25px 0 0; padding-right: 25px; font-size: 2.25rem;}

#page-header.full .text {padding: 100px 0;}

.row .col-sm-5 .img-round {max-width: 95%;}

.content aside {padding-right: 35px;}
.extranet-item {width: 23%;}

.grid-two-third {grid-template-columns: 1fr 2.5fr;}

}

/* LARGE DESKTOPS */
@media (min-width: 1200px) {

#hero .text h1 {font-size: 6.5rem;}
}

/* MEGA DESKTOPS */
@media (min-width: 1400px) {
}

/* TALL AND WIDE DESKTOPS */
@media (min-height: 900px) and (min-width: 1200px) {
}

/* ----------------------*/
/* -- MENU AND HEADER -- */
/* ----------------------*/
#site-header {
  display: grid;
  grid-template-columns: 115px auto;
  grid-template-rows: 1fr 40px;
  grid-gap: 10px;
  padding: 20px 25px;
  position: relative; z-index: 50;
}

#btn-menu {display: block; width: 100%; background: var(--dark); color: #fff; border: none; border-radius: 5px;
  grid-column: 1 / 3;
  grid-row: 2 / 3;
}

#menu {position: absolute; top: 300px;}
#menu ul {list-style: none; padding: 0; margin: 0;}
#menu a {display: block; font-size: 1.1rem; color: var(--dark); font-weight: 600; text-transform: uppercase; padding: 5px;}
#nav-main ul {padding: 10px;}
#nav-main ul a {text-transform: none; font-weight: 400; font-size: 1rem; opacity: .8;}
#nav-main ul .nav-selected {font-weight: bold; color: var(--primary);}

.footer {background: #fff; padding-top: 50px; margin-top: 50px;}
.footer h3 {text-transform: uppercase;}
.footer .flex .col img {width: 100px; margin: 0 10px 10px 0; display: inline;}
.footer .copy {text-align: center; font-size: 12px; color: #fff; background: var(--primary); margin: 25px 0 0 0; padding: 25px;}
.footer .copy a {color: #fff;}

.social {display: block; margin: 35px 0 15px 0;}
.social a {display: inline-block; width: 45px; height: 45px; font-size: 22px; background: var(--secondary); color: #fff; text-align: center; margin: 0 5px 5px 0; opacity: .9; line-height: 45px; text-align: center; padding: 0; border-radius: 50%;}
.social a i {color: #fff; margin: 0}
.social a:hover {background: var(--primary); opacity: 1; transform: scale(1.1,1.1);}

/* ONLY MOBILE */
@media (max-width: 767px) {
#hdr-cta {display: flex; flex-direction: column; justify-content: space-between;}
#hdr-cta .btn-theme {display: block; text-align: center;}

#menu {position: absolute; top: 25px; left: 0; width: 100%; background: #fff; z-index: 50; padding: 50px; opacity: 0; visibility: hidden;}
#menu.open {opacity: 1; top: 0; visibility: visible;}
#btn-close {border: none; background: #ccc; width: 50px; height: 50px; text-align: center; position: absolute; right: 25px; top: 25px;}
}

@media (min-width: 768px) {
#site-header {display: grid; 
  grid-template-columns: 125px auto;
  grid-template-rows: 1fr auto;
  grid-gap: 0;
}
#logo { position: relative; transform-origin: left center; top: 0;
  grid-column: 1 / 2;
  grid-row: 1 / 3;
}
#btn-menu {display: none;}
#menu {position: relative; top: auto;
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}
#btn-close {display: none;}
#menu ul {display: flex;}

#hdr-cta {text-align: right;}
#nav-main {justify-content: flex-end;}
#nav-main a {padding: 15px; font-size: 1rem;}
#nav-main > li > a:after {position: absolute; left: 50%; bottom: -3px; width: 0; height: 6px; background: var(--secondary); content: ""; z-index: 5;}
#nav-main > li:hover > a, #nav-main > .nav-path-selected > a {color: var(--primary); text-decoration: none;}
#nav-main > li:hover > a:after {width:100px; opacity: 1; left: calc(50% - 50px);}
#nav-main li {position: relative;}
#nav-main ul {position: absolute; left: 50%; top: 115%; width: 250px; margin-left: -125px; background: #fff; box-shadow: 5px 5px 25px rgba(0,0,0,.1);display: block; border-radius: 10px; opacity: 0; visibility: hidden;}
#nav-main ul a {border-bottom: 1px dotted #ccc;}
#nav-main ul li:last-of-type a {border: none;}
#nav-main > li:hover ul {top: 100%; visibility: visible; opacity: 1;}
#nav-main ul a:hover {padding: 15px 10px 15px 20px; color: var(--primary); text-decoration: none;}

#nav-mini {position: absolute; right: 240px; top: -45px;}
#nav-mini a {position: relative; font-size: .75rem; font-weight: 400; opacity: .7; padding: 5px 10px;}
#nav-mini a:before {width: 1px; height: 10px; background: rgba(0,0,0,.5); content: ""; display: block; position: absolute; left: -1px; top: 10px;}
#nav-mini a:hover {opacity: 1;}
#nav-mini li:first-of-type a:before {display: none;}
#nav-mini li:last-of-type a {padding-right: 0;}

.footer .flex {display: flex; font-size: 14px; margin: 0 -25px;}
.footer .flex .col {flex: 1 1 30%; padding: 25px;}
}

@media (min-width: 992px) {
#hero, #page-header, #blog-entry header {margin-top: 155px;}
#site-header {display: grid; position: fixed; top: 0; width: 100%; max-width: 1200px; z-index: 100;
  grid-template-columns: 115px auto 280px;
  grid-template-rows: 1fr auto;}
#site-header:before {position: absolute; left: -50%; opacity: 0; top: 0; width: 200%; background: #fff; content: ""; height: 140px; display: block; box-shadow: 0 10px 10px rgba(0,0,0,.05);}
#site-header.scroll {background: #fff; top: -40px;}
#site-header.scroll:before {opacity: 1;}
#site-header.scroll #logo {transform: scale(.8); top: 20px;}
#hdr-cta a {font-size: 1rem; margin-left: 5px;}
#hdr-cta {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
}
#nav-mini {right: -280px;}
}

@media (min-width: 1200px) {
  #site-header {left: 50%; margin-left: -600px; padding: 20px 0;}
}

#cvms-alert {position: fixed; left: 0; bottom: 0; z-index: 200; margin: 0; border-radius: 0; padding: 20px 50px 20px 20px; font-size: .85rem; color: #fff; width: 100%; background: var(--primary); border: none; box-shadow: 0 0 25px rgba(0,0,0,.5); border-top: 1px solid rgba(0,0,0,.2);}
#cvms-alert .alert-dismissable .close, .alert-dismissible .close {right: 25px; top: calc(50% - 12px); font-size: 25px; position: absolute;color: #fff; opacity: .6;}
#cvms-alert h4 {font-size: .9rem; color: #fff;}
#cvms-alert a {text-decoration: underline; font-weight: 700; color: #fff;}

#cvms-alert {display: flex; align-items: center; justify-content: center;}
#cvms-alert h4 {border-right: 1px dotted rgba(0,0,0,.5); margin: 0 15px 0 0; padding: 0 15px 0 0;}

@media screen and (max-width: 375px){
 .g-recaptcha {transform:scale(0.66);-webkit-transform:scale(0.66);transform-origin:0 0;-webkit-transform-origin:0 0;}
}

/*To remove the text on google ReCaptcha "Already verified human" */
.captcha_done {
  display: none;
}

.required {
 color: red;
}