/* jwbs (color) class, and default styling */
@import url("../includes/assets/default.css");
@import url("jwbs.css");

@import url('https://fonts.googleapis.com/css?family=Roboto+Slab:700|Roboto:300,400,500,900&display=swap'); /* font-family: 'Roboto Slab', serif; font-family: 'Roboto', sans-serif; */

body { font-family: 'Roboto', sans-serif; font-weight: 500; }

a, .red { color: #d51f26; }
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-family: 'Roboto Slab', serif; color: #d51f26; }
h2.h1 { font-size: 2rem; }
.black { font-weight: 900; }
.btn { border-radius: 0; }
.data-link { cursor: pointer; }

body > header .container > .row { position: relative; }
#header-block-1 { position: relative; color: #d51f26; font-size: 1.5rem; z-index: 10; }
.navbar-brand { margin-left: 0; }
.navbar { padding: 1rem; }
.navbar.bg-jwbs { background-color: #fff !important; border-bottom: 6px solid #d51f26; }
#main-navbar { margin-right: 0; }
.navbar-dark .navbar-nav .nav-link, .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .show > .nav-link { padding: 0.5rem 1rem; font-size: 1.5rem; color: #4b4b4b; }
.navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .active > .nav-link { background-color: #e1e1e1; }
.navbar-dark .navbar-toggler { border-color: #d51f26; }
.navbar-dark .navbar-toggler-icon {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(213, 31, 38, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* home */
.carousel-caption { padding: 0.25% 0 0.25% 10%; top: auto; right: 0; left: 0; color: #fff; font-size: 1.5rem; background-color: rgba(0, 0, 0, 0.6);  justify-content: flex-end; text-align: left; }
.carousel-caption p { margin: 0; }
#home-bottom { font-size: 1.25rem; font-weight: 300; line-height: 1.2; color: #555; background-color: #ebebeb; }
#home-bottom .row > div { margin: 1rem 0; }
#home-bottom h3 { margin: 1.25rem 0; }
#home-bottom .btn { margin-top: 0.5rem; font-weight: 900; color: #555; border: 1px solid #555; text-transform: uppercase; }
#home-bottom .btn:hover { color: #ebebeb; background-color: #555; }

/* portfolio */
.portfolio { position: relative; }
.portfolio > figcaption { position: absolute; margin: 0; padding-right: 1em; top: auto; right: 0; bottom: 0; left: 0; font-size: 1.5rem; text-align: right; color: #fff; background-color: rgba(0, 0, 0, 0.6); }
.portfolio > figcaption a { color: #fff; }

body > footer { background-color: #636363; color: #fff; }
#inner-footer nav { float: none; width: 100%; }
#inner-footer a { color: #fff; }
#inner-footer .menu { margin: 0 0 1.5rem; padding: 0; list-style: none; }
#inner-footer .menu li { font-size: 1.25rem; }
#inner-footer #custom_html-2 { font-weight: 300; }
#inner-footer .attribution { font-weight: 400; }


/* media queries */
/* Extra Small Devices, Phones */
@media only screen and (min-width : 576px) {
}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
	#header-block-1 { position: absolute; }
	.navbar-brand { margin-left: -3rem; }
	#main-navbar { margin-right: -1rem; }
	h2.h1 { font-size: 2.5rem; }
	#home-bottom .row > div { margin: 0; }
	#inner-footer .menu { margin: 0; padding: 0; list-style: none; }
	#inner-footer nav { float: left; width: 80%; }
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
}