/*
    Responsive layout is handlied by the boostrap grid system http://getbootstrap.com/docs/4.0/layout/grid/
    spacing utilities (responsively set margin and padding) http://getbootstrap.com/docs/4.0/utilities/spacing/
    and display utilities (responsively set display: none, e.g. for the banner image) http://getbootstrap.com/docs/4.0/utilities/display/
    logo image position and sizing is inlined
*/

body {
	font-family:Arial,Gill Sans, Gill Sans MT, Myriad Pro, DejaVu Sans Condensed, Helvetica, Arial," sans-serif";
	background: no-repeat; 
	max-width:100%;
	background-image: url("Images/abstract-background-calm-waters-2276928.jpg");
	background-size: cover;
	background-position: center top;
	background-attachment: fixed;
	font-size: 14px;	
}

h1{
	font-weight: 700;
	font-size: 22px;
}
h2{
	font-size: 16px;
	font-weight: 700;
}
h3{
	font-weight: 600;
	font-size: 14px;
	font-style: italic;

	
}
button{
	border: none;
	background: none;
}
.captions{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#666666;
	font-style: italic;
	margin-top: 5px;
}
.article {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 14px;
	margin-top: 5px;
}
.article a{
	color: #cd2026;
}
	.panel-body a{
	color:#cd2026;
	}
    .panel-default > .panel-heading {
        border-radius: 10px;
        background-color: #981b1e;
    }

    .panel-title {
        font-size: 15px;
    }
.panel-title > a {
        display: block;
        padding: 15px;
        text-decoration: none;
		color: #ffffff;
		font-weight: bold;
    }
    .doclibrary .panel-title > a {
        display: block;
        padding: 15px;
        text-decoration: none;
		color: #ffffff;
		font-weight: bold;
    }

    .more-less {
        float: right;
        color: #212121;
    }

    .panel-default > .panel-heading + .panel-collapse > .panel-body {
        border-top-color: #EEEEEE;
    
}.doclibrary a{
	color:#212121;
}

/*
    customize navbar color
*/
.custom-navbar {
    background-color: #981b1e;
    color: white;
}

.navbar-brand {
    color: white;
}
.navbar-brand:hover {
    color: white;
}
.nav-link {
    color: black;
	border-bottom: thin solid #d6d7d9;
}
.nav-link:hover {
    color: #981b1e;
}

.custom-navbar-menu {
    background-color: white;
	font-size: 16px;
}

.custom-navbar-menu .dropdown-item:hover {
    background-color:#981b1e;
    color: white;
}

/*
    customize navbar toggler
    
*/
.custom-toggler.navbar-toggler {
    border-color: rgb(255,255,255);
} 
.custom-toggler .navbar-toggler-icon { /* white version of default bootstrap burger icon */
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.custom-footer {
    background-color: #981b1e;
}

.custom-footer .nav-link {
    color: white;
	border-bottom: hidden;
}
.custom-footer .nav-link:hover {
    color: white;
	text-decoration: underline;
}


/*
    Here I'm just enumerating the normal bootstrap breakpoints in case we want to do anything fancy.
    I updated the max-width of the container for small device sizes so it's full width
*/

/* Extra small devices (portrait phones, less than 576px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {

}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {

}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {

}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

}

/* Extra small devices (portrait phones, less than 576px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (landscape phones, 576px and up) */
@media (max-width: 576px) {

}

/* Medium devices (tablets, 768px and up) */
@media (max-width: 768px) {
    .container {
        max-width: 100%; /* means container expands to full width when viewport is tablet size or smaller */
    }
}

/* Large devices (desktops, 992px and up) */
@media (max-width: 992px) {

}

/* Extra large devices (large desktops, 1200px and up) */
@media (max-width: 1200px) {

}