/*
	Theme Name: v215 Child
	Template:v215
*/
@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap');

:root {
	--navy: #0e3771;
	--blue: #47bbf4;
	--orange: #ff7f40;
	--charcoal: #464646;
}

.title-area:before {position: absolute; background: rgb(0,0,0,.15); left: 0; top: 0; content: ''; width: 100%; height: 100%;}
.title-area h1 {line-height: 50px; font-size: 44px;color: white; position: relative; z-index: 1; background: rgb(9,50,84, .75); padding: 20px 40px; display: inline-block;}
.title-area > .container {align-self: flex-end !important;}
.title-area .title-area-inner {text-align: left !important;}

#header .logo-holder {grid-column: 1/3;}
#header .menu-holder {grid-column: 2/3; justify-self: left;}
#header.sticky.scrolled .logo-holder img {height: 90px;}
#header.scrolled .header-bottom .menu a {line-height: 90px;}

#header .sub-menu li a {text-align: center;}
#header .sub-menu li {padding: 8px 0;}
#header .sub-menu:before {content: "\f078"; text-align: center; font-family: "Font Awesome 5 Free"; font-weight: 900; color: white; position: relative; left: 50%; transform: translateX(-50%); display: inline-block; font-size: 16px;}

#footer .col-2 img {margin-bottom: 20px;}
#footer .col-2 a i {background: rgb(0,47,87, .1); font-size: 22px; margin: 0 2.5px;padding: 10px; transition: .5s;}
#footer .col-2 a i::before {width: 25px; display: inline-block;}
#footer .col-2 a:hover i {background: var(--orange); color: white;}
#footer .col-1 a:hover, #footer .col-3 a:hover {color: var(--orange);}

/* .project-row {display: grid; grid-template-columns: repeat(3,1fr); gap: 40px 30px;}
.project-row .project-image {position: relative;}
.project-row a {transition: .5s;}
.project-row a p {color: var(--charcoal); margin-bottom: 0 !important;} */

/* .project-row .project-image:before {position: absolute; width: 100%; height: 100%; content: ''; background-color: rgb(39, 120, 121, .5); opacity: 0; transition: .5s; top:0; left: 0;} */
/* .project-row a:hover .project-image:before {opacity: 1} */

/* .project-row h5 {transition: .5s;}
.project-row a:hover {background-color: var(--teal);}
.project-row .project-content {padding: 20px 10px; background: white; transition: .5s;}
.project-row .project-content p {color: var(--charcoal) !important;}
.project-row .project-image > div {height: 300px; background-position: center !important; background-size: cover !important;}
.project-row a:hover .project-content {background: var(--orange);}
.project-row a:hover h5 {color: var(--navy);} */

.book-grid .book {display: flex; gap: 30px; align-items: center;}
.book-grid .book-image {width: 30%; text-align: right;}
.book-grid .book-content {width: 70%;}
.book-grid .book:not(:last-child) {margin-bottom: 30px;}
.book-grid .book-image > a {position: relative; display: inline-block; height: 300px; background-repeat: no-repeat !important; background-size: contain !important; background-position: right !important;}
.book-grid .book-image > a:before {z-index: 1;opacity: 0; transition: .5s; position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; background: rgb(9,50,84, .75);}
.book-grid .book-image > a:hover:before {opacity: 1;}
.book-grid h4 {color: var(--navy); transition: .5s;}
.book-grid a:hover h4 {color: var(--blue);}
.book-grid h5 {color: var(--orange);}
.book-grid img {height: 100%; filter: grayscale(0); transition: .5s;}

.cta {background-position: center top;}
.cta h2 {color: white;max-width: 885px; margin: auto;}

@media (min-width: 1001px) {
	#header .header-cta {position: absolute; right: 20px;}
	#header .header-cta span {background: var(--orange); color: white; padding: 12px 24px; transition: .5s;}
	#header .header-cta span:hover {background: var(--navy);}
}

@media (max-width: 1100px) {
	#header .menu-holder {justify-self: right;}
}

@media (max-width: 1023px) {
	#header ul.sub-menu a {color: #093254; text-align: left; padding-left: 20px;}
	#header ul.sub-menu:before {display: none;}
}

@media (max-width: 767px) {
	.title-area h1 {font-size: 40px;}
	
	#footer .col-2 img {margin-top: 20px;}
	
	.book-grid .book {display: flex; flex-direction: column;}
	.book-grid .book-image {width: 100%; text-align: center;}
	.book-grid .book-content {width: 100%;}
	.book-grid .book-content .book-name {font-size: 27px; line-height: 37px;}
}