/*
Theme Name: E3 School
Theme URI: https://www.e3school.org/
Author: Consociate
Author URI: consociate.marketing
Text Domain: e3school
*/

/* Anchor scroll sticky menu offset */
html {
  scroll-padding-top: 125px;
}

/* WP admin bar offset */
body.admin-bar .navbar {
    margin-top: 32px;
}
.m-show { display: none }
.lg-show { display: none }
.hide { display: none }

/* General */

body { font-family: "proxima-nova", sans-serif; font-weight: 400; font-size: 19px; text-align: center; padding-top: 105px; background-color: #40838C }
body.home { padding-top: 50px }

p { margin-bottom: 1.5rem }
b, strong { font-weight: 700 }
.heavy { font-weight: 800 }
.caps { font-family: "abolition", sans-serif; font-weight: 400; }

h1, h2, h3 { font-family: "abolition", sans-serif; letter-spacing: .03em }
h1, h2, h3, h4, h5, h6 { margin-bottom: 25px }
h1 { font-size: 60px }
h2 { font-size: 50px }
h3 { font-size: 40px }
h4 { font-size: 35px }
h5 { font-size: 30px }
h6 { font-size: 25px }

.hand { font-family: "blambot-pro", sans-serif; font-weight: 700;}

.txt-green { color: #54B3B7 }
.bg-green { background-color: #54B3B7 }
.txt-dark { color: #40838C }
.bg-green-dark { background-color: #40838C }
.txt-white { color: #fff } 
.bg-white { background-color: #fff }

.extra-dark { color: #236d77 }

.box { padding: 25px 25px 15px 25px }

.navbar { padding: 20px 0; background: url("images/bg-nav-light.png") top center no-repeat; background-size: cover; 
	border-bottom: 5px solid #54B3B7; max-height: 112px }
.home .navbar { border-bottom: 0 }
.navbar .logo img { width: 100px; height: auto; margin: 0 15px }
.navbar-expand-lg .navbar-nav .nav-link { padding-right: 15px; padding-left: 15px }
.navbar-nav.mx-auto.align-items-center { margin-left: 25px !important }
.nav-item { margin: 0 5px }
.nav-link { font-size: 15px; text-transform: uppercase; color: #40838C }

.dropdown-menu { background: #52b0b4; border: 5px solid #46848f }
.dropdown-menu .menu-item a, .dropdown-menu .menu-item a.active:hover { color: #fff !important; }
.dropdown-menu .menu-item a:hover { color: #46848f !important; }
.dropdown-item.active { background-color: #40838C }
.dropdown-item:focus { background-color: #296871 }

#header { width: 95vw; height: auto; margin: 105px auto 50px auto; border: 20px solid #54B3B7 }

#intro { padding-top: 50px; padding-bottom: 50px; background: rgb(84,179,183); background: linear-gradient(180deg, rgba(84,179,183,1) 0%, rgba(75,148,154,1) 100%); text-align: left; color: #fff; position: relative; z-index: 20 }

#middle { padding-top: 100px; padding-bottom: 100px; position: relative; z-index: 30; margin-top: -30px; text-align: left; color: #fff; overflow: hidden; /* background: url("images/bg-home-dark-ragged.png") top left no-repeat; background-size: cover; */ }

#last { padding-top: 50px; padding-bottom: 50px; position: relative; z-index: 40; text-align: left; overflow: hidden; }

#intro, #middle, #last { font-size: 22px }

.ragged-white { background: url("images/border-white-ragged.png") left top no-repeat; 
	width: 100%;
    height: 48px;
    margin-top: -46px;
    margin-bottom: -10px;
    background-size: cover;
    position: relative;
    z-index: 42;
    display: inline-block 
}
.ragged-dark { background: url("images/border-dark-ragged-bottom.png") left bottom no-repeat; 
	width: 100%;
    height: 38px;
    background-size: cover;
    position: relative;
    margin-top: -2px;
	z-index: 21
}
.rotate-top { transform: rotate(180deg); margin-top: -50px; padding-top: 50px; }

.fade-top { background: rgb(84,179,183); background: linear-gradient(180deg, rgba(84,179,183,.5) 0%, rgba(84,179,183,0) 100%); 
	height: 125px; position: relative; top: 0; z-index: 3 }

#subfooter { padding-top: 75px; padding-bottom: 75px; color: #40838C;
	background: rgb(217,217,217); background: linear-gradient(180deg, rgba(217,217,217,1) 0%, rgba(239,239,239,1) 100%) }
#subfooter .logo img { max-width: 150px; height: auto; margin-bottom: 15px }
	.copyright { font-size: 15px; border-left: 1px solid #40838C; border-right: 1px solid #40838C; padding: 5px 10px }
#subfooter .social .nav-link { display: inline-block; margin: 0 5px; font-size: 22px }
#subfooter strong { font-size: 26px }

footer { color: #fff; background-color: #2f6268; padding: 25px 0 }
footer .caps { font-size: 30px }
footer p { font-size: 24px }

.text-block { position: relative }
.gr-cap { position: absolute; top: -120px; right: -25px; right: -75px; width: 45%  }
.gr-pencil { position: absolute; bottom: -130px; right: 0; width: 30%  }
.gr-plane { position: absolute; top: -170px; right: 0; right: -25px; width: 25% }
#last .icon { position: absolute; top: 20% }

/* Pages */

#submenu { background: #40838C url("images/border-dark-ragged-bottom") 150px center no-repeat; width: 100%; padding: 25px 0 0 0; font-size: 18px; }
#submenu p { margin-bottom: 0 }

#main { padding-top: 75px; padding-bottom: 75px; border-bottom: 5px solid #fff; text-align: left; color: #40838C; background: #fff }
#main.page { padding-top: 0; margin-top:-35px }

.wp-block-cover.rounded .wp-block-cover__background, 
   .wp-block-cover.rounded img.wp-block-cover__image-background { border-radius: 25px }

.wp-block-image .aligncenter>figcaption { text-align: center }

/* Forms */

div.wpforms-container-full .wpforms-field-label { color: #40838C }

/* Blog */

.page-id-41 #main, /* Blog landing */
	#main.blog { background-color: #54B3B7; margin-top:-30px }
.wp-show-posts-single { text-align: center }

.page-id-41 #main .wp-show-posts-entry-title a, 
	#main.blog .title a { color: #fff; font-size: 22px; font-weight: 700 }
.page-id-41 #main .wp-show-posts-entry-title a:hover, 
	#main.blog .title a:hover { color: #40838C }

.wpsp-load-more { text-align: center }
.wpsp-load-more a { background: #40838C;
    padding: 2px 7px;
    color: #fff;
    border-radius: 5px;
	margin: 0 5px
}
.wpsp-load-more a:hover { color: #54B3B7; }

/* WP Show Posts */
.wp-show-posts-image { height: 300px; overflow: hidden }
.wp-show-posts-image img { border: 5px solid #fff;
	object-fit: cover !important;
    width: 100%;
    height: 100% !important; 
}

#main.blog,
	.page-id-41 #main { color: #fff }
#main.blog h3 { color: #236d77; font-family: inherit; letter-spacing: normal; line-height: 1.1; }
.post .title { text-align: center; font-size: 50px; line-height: 1.1; font-weight: 700; margin-bottom: 25px }

.post .feat { height: 650px; margin-bottom: 25px }
.post .feat img { max-width: inherit; border: 10px solid #40838C;
	/* Set left edge of inner element to 50% of the parent element */
  margin-left: 50%; 
  /* Move to the left by 50% of own width */
  transform: translateX(-50%);  margin-bottom: 25px;
	object-fit: cover !important;
     width: 125%; 
    height: 100% !important; 
}
	
.wp-block-gallery { margin: 25px 0 }

/* Images */

img { max-width: 100%; height: auto }

a img, 
	.wp-block-gallery.has-lightbox img,
	.wp-block-image.has-lightbox img { transition: transform .2s }

a img:hover, 
	.wp-block-gallery.has-lightbox img:hover { transform: scale(.97) }
	.wp-block-image.has-lightbox img:hover { opacity: .8 }

/* Links */

a { text-decoration: none; font-weight: 700; color: #54B3B7 }
a:hover { color: #40838C }

footer a { color: #7fcdd0 }
footer a:hover { color: #40838C }

#submenu a { color: #fff; margin: 0 5px; border-right: 1px solid #fff; padding-right: 15px; font-weight: 700 }
#submenu a:hover { color: #54B3B7 }
#submenu a.last { border: none; padding-right: 0; margin-right: 0 }

#main.blog a { color: #236d77; text-decoration: underline }
#main.blog a:hover { text-decoration: none }

/* Buttons */

.btn { color: #fff; padding: 10px 15px; font-size: 20px }

.btn-green { background-color: #54B3B7 }
.btn-green:hover { background-color: #40838C; color: #fff }

.wp-block-button__link { background-color: #54B3B7; color: #fff !important; text-decoration: none !important; border-radius: 8px; font-size: 20px }
.wp-block-button__link:hover { background-color: #40838C }

/* Spacing / Alignment */

.right { float: right }

.center { text-align: center }

.mar-0 { margin: 0 }
.max-1000 { max-width: 1000px; margin-left: auto; margin-right: auto }

/* Shadow / Rotate */

.rotated img {
    rotate: 3deg;
    border: 8px solid #fff;
}
.rotated.alt img { rotate: -3deg; }
.shadowed img { 
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px !important;
}


/* Home offset graphics */

#intro .offset {
	left: 50%;
	margin-left: -33vw;
	margin-right: -50vw;
	max-width: 100vw;
	position: relative;
	right: 40%;
	width: 55vw;
}
#middle .offset {
	left: 50%;
	margin-left: -16vw;
	margin-right: -50vw;
	max-width: 100vw;
	position: relative;
	right: 40%;
	width: 50vw;
}
#last .offset {
	left: 50%;
	margin-left: -32vw;
	margin-right: -50vw;
	max-width: 100vw;
	position: relative;
	right: 40%;
	width: 53vw;
}

/* Nav scroll */

.navbar.navbar-fixed-top.scrolled  {
  max-height: 75px;
  transition: max-height 200ms ease
}
.navbar.navbar-fixed-top.scrolled .logo img {
  width: 75px;
  transition: width 200ms ease
}
/*
.navbar-fixed-top.scrolled .nav-link {
  font-size: 16px
}
.bg-light .navbar-toggler {
  border-color: rgb(0,0,0,1);
}
.navbar-fixed-top.scrolled .navbar-brand.m-show img {
  width: 85px;
  transition: width 200ms ease
}
*/

/*
####################################################
M E D I A  Q U E R I E S
####################################################
*/

/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap 4 breakpoints
*/

/* Custom */
@media (min-width: 1625px) {
	
	#intro .offset { margin-left: -37vw }
	#middle .offset { margin-left: -20vw }
	#last .offset { margin-left: -37vw }

}

/* Extra large devices (large desktops, 1200px and up)
 * No media query since this is the default in Bootstrap because it is "mobile first"
 */
@media (min-width: 1200px) {

}

/* Large devices (desktops, 992px and up) */
@media (max-width: 1199px) {
	
	body { padding-top: 90px; font-size: 17px; }
	
	.offcanvas { background: rgb(84,179,183);
		background: linear-gradient(352deg, rgba(84,179,183,1) 0%, rgba(35,109,119,1) 100%) }
	.nav-link {
		font-size: 18px;
		color: #fff;
		font-weight: 700;
	}
	.navbar-nav.mx-auto.align-items-center { margin-left: auto!important }
	.offcanvas-title img { width: 125px; height: auto }
	
	.lg-hide { display: none }
	.lg-show { display: block }
	
	.navbar { padding: 10px 0 }
	
	.gr-plane { top: -120px }
	.gr-pencil { bottom: -60px }
	#last .icon { top: 10% }
	
	.wp-show-posts-image { height: 250px }

}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (max-width: 991px) {
	
	.m-hide { display: none }
	.m-show { display: block }
	
	/* Breaks WP BLOCK columns early w/ tweaks */
	.wp-block-columns { display:block } 
	.wp-block-column:nth-child(2n),
		.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column:nth-child(2n) { margin-left: 0 }
	
	body.home { padding-top: 25px }
	
	h1 { font-size: 50px }
	h2 { font-size: 40px }
	h3 { font-size: 35px }
	h4 { font-size: 30px }
	h5 { font-size: 26px }
	h6 { font-size: 22px }
	
	.navbar-nav.mx-auto.align-items-center {
        margin-right: 0;
    }
	
	#header { border: 10px solid #54B3B7; margin-bottom: 25px }
	#last { padding-top: 0 }
	
	.gr-cap { top: -20px }
	.gr-plane { top: -70px }
	.gr-pencil { bottom: -40px }
	#last .icon { right: -25px; width: 125px }
	
	.fade-top { height: 75px }
	#main { padding-bottom: 50px }
		
	.post .feat { height: 450px }
	
	.wp-show-posts-image { height: 200px }
	
	#intro .offset { margin-left: -35vw }
	#last .offset { margin-left: -35vw }


}

/* Small devices (landscape phones, 544px and up) */
@media (max-width: 767px) {
	
	.reverse-mobile { flex-direction: column-reverse }	
	
	.m-center { text-align: center }
	
	#intro .offset { width: 100vw; max-width: inherit; margin-left: inherit; position: inherit }
	#middle .offset {
		left: inherit;
		margin-left: inherit;
		margin-right: inherit;
		max-width: inherit;
		right: inherit;
		width: 100vw;
		margin-top: 75px;
	}
	#last .offset {
		left: inherit;
		margin-left: inherit;
		margin-right: inherit;
		max-width: inherit;
		right: inherit;
		width: 100vw;
	}
	
	.gr-cap { top: -50px }
	.gr-plane { top: -100px }
	.gr-pencil { bottom: -80px }
	#last .icon { top: 100px; width: 75px; }
	
	.copyright { border-left: 0; border-right: 0; border-top: 1px solid #40838C; border-bottom: 1px solid #40838C; 
		padding: 25px 10px 0 10px; margin-top: 25px; margin-bottom: 25px }
	
	.post .feat { height: 350px }
	
	.wp-show-posts-image { height: 300px }

}

/* Extra small devices (portrait phones, less than 544px) */
@media (max-width: 543px) {

}

/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
Custom media queries
*/

/* Set width to make card deck cards 100% width */
@media (max-width: 950px) {

}