/* ANDREA */

img {
  object-fit: contain;
  width: 100%;
}

#navigation {
  background-color: var(--main-color);
}

body {
  padding-top: 3.5rem; 
}

#skip-to-main {
    color: var(--dark-color);
}

/* CSS for elements common to all pages (e.g., navbar, footer, and possibly more */
:root {
    --main-color: #129875;
    --dark-color: #000559;
    --lt-gray: #EBEBF2;
    --dk-gray: #3F4443;     
}

header {
    background-color: var(--main-color);
    color: var(--dark-color);
    padding-bottom: 20px;
}

header a {
    color: var(--dark-color);
}

header a:hover {
    color: #ffffff;
}

.fa-bars {    
    color: var(--dark-color);
}

.fa-bars:hover {
    color: #ffffff;
}

h1 {
    color: white;
}

h2 {
    font-weight: normal;
}

h2,
p {
    color: var(--dark-color);
}

.header {
    background-color: var(--main-color);
    text-align: center;
    margin-bottom: none;
}

.header h1 {
    font-size: 35px;
    color: #ffffff;
}

hr {
    width: 30%;
    border-bottom: 2px solid white;
}

footer {
    background-color: var(--main-color);
}

.content {
    background-color: var(--main-color);
    height: 100%;
}

.content a {
    color: var(--dark-color);
    text-decoration: underline;
}

.cta-button { 
    color: var(--dark-color);
    background-color: #FFFFFF; 
    border-color: var(--dark-color);
    box-shadow: 0px 4px 4px 0px #888888;
    text-transform: uppercase; 
} 
   
.cta-button:hover, 
.cta-button:focus, 
.cta-button:active, 
.cta-button.active, 
.open .dropdown-toggle.cta-button { 
    color: var(--dark-color); 
    background-color: var(--main-color);
    border-color: var(--dark-color);
    text-decoration: none;
} 

p {
    font-size: 18px;
}

a:hover {
    text-decoration: none;
}

.triangle{
    position:relative;
    background-color: var(--main-color);
    background-size:cover;
    height:50px;
}
svg{
    position:absolute;
    bottom:-10px; left:0;
    width:100%; height:100px;
    display:block;
}

/* SKIP NAVIGATION */

/*
 * Class for elements that are only visible to the screen reader. From
 * https://www.paciellogroup.com/blog/2012/05/html5-accessibility-chops-hidden-and-aria-hidden/
 */
.visually-hidden {
	clip: rect(1px 1px 1px 1px); /* IE 6/7 */
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
	margin: -1px;
}

/*
 * For `.visually-hidden` elements that should be visible when it gains focus.
 */
.visible-when-focused:focus {
	clip: auto;
	height: auto;
	overflow: visible;
	position: static;
	white-space: normal;
	width: auto;
	margin: auto;
}

/*
 * Style for "Skip Navigation" type links.  Should have an href linked to 
 * a `.bypass-block-target` element.
 */
.bypass-block-link {
	position: absolute;
	text-decoration: none;
	background: #ffffcc;
	padding: 0.2em;
	z-index: 10;
}

/*
 * We don't want the `.bypass-block-target` to have an outline on *just* focus,
 * since this will look strange if regular users click inside this element,
 * since it will look like it was tabbed into
 */
.bypass-block-target:focus {
  outline: none;
}

/*
 * We do, however, want the `.bypass-block-target` to have an outline when
 * it has focus and it is the target of the document (i.e. the hash tag of the
 * document URL is the same as the "Skip Nav" link).
 * 
 * Note that this style is the same as the focus state on all the tabbable 
 * elements.  It doesn't have to be.  WCAG 2.4.7 — Focus Visible (Level AA) 
 * only requires that the focus state is visible, so you can have, say, the 
 * focus state of a button different than that of a form element. 
 */
.bypass-block-target:focus:target,
[tabindex="0"]:focus,           
[tabindex="1"]:focus,
a:focus,
button:focus,
input:focus {
  outline: solid 2px orange;
}

/* END SKIP NAVIGATION */