/*---------------------------------------------------------

	CSS for wedg.waterfrontalliance.org

------------------------------------------------------------

+ Original Design by Decker Design, Inc.

+ by MANYFOLD
	- wearemanyfold.com
	- Questions? support@wearemanyfold.com

*/

/*
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 767px
*/
@media only screen and (min-width: 320px) and (max-width: 767px) {

	.mobile {
		display: block;
	}

	/* --------------------------------------- */
	/* GLOBAL STYLES
	/* --------------------------------------- */

		#content-wrap {
			margin: 0 auto;
		}

		h2.headline {
			font-size: 36px;
			line-height: 42px;
			margin-bottom: 14px;
		}

		#content .cta {
			padding: 12px 22%;
		}

		#content ul {
			margin: 0 0 0 25px;
		}

		.page .content-section:not(:last-child) {
			margin-bottom: 35px;
			padding-bottom: 40px;
		}

		.page .content-section p,
		.page .content-section ul li {
			font-size: 20px;
			line-height: 28px;
		}

		/* Feature Image */
		.featured-image:after {
			border-top: 36px solid;
		}

		.featured-image div {
			height: 290px;
		}

		.featured-image_caption {
			max-width: inherit;
		    right: inherit;
		    bottom: 0;
		    display: block;
		    width: 100%;
		    box-sizing: border-box;
		}

		/* Download Buttons */
		body #content a.external-link,
		body #content a.ddownload-link {
			text-align: left;
			padding-right: 70px;
		}

		body #content a.external-link:not(:last-of-type),
		body #content a.ddownload-link:not(:last-of-type) {
			margin: 0 0 20px 0;
			text-align: left;
			padding-right: 70px;
		}

		body #content a.external-link:last-of-type,
		body #content a.ddownload-link:last-of-type {
			margin: 0;
		}

		body #content a.external-link:after,
		body #content a.ddownload-link:after {
			right: 0;
		    background-size: auto 24px;
		}

	/* --------------------------------------- */
	/* TOP BAR
	/* --------------------------------------- */

		#top-bar #top-bar_donate {
			padding: 5px 0;
		}

		#top-bar #top-bar_donate > span {
		    background-position: 0 50%;
		    width: 100%;
		    height: 12px;
			margin-left: 0;
		}

		#top-bar_donate .donate-interaction {
			display: none;
		}

	/* --------------------------------------- */
	/* HEADER
	/* --------------------------------------- */

		#header {
			margin-bottom: 80px;
		}

		#mid-header {
			display: block;
		}

		#header #title {
			height: 80px;
		    flex: inherit;
		    position: absolute;
		    top: 0;
		    width: 50%;
		    z-index: 10;
		}

		#logo-symbol {
			display: none !important;
		}

		#wrap-top-nav-menu {
			display: none;
		}

		body .slicknav_menu {
			display: block;
			margin-bottom: 30px;
		}

		body .slicknav_menu .slicknav_btn {
			right: 0;
			margin-bottom: 20px;
		}

		body .slicknav_nav {
			margin-top: 100px;
		}

		body .slicknav_nav ul {
			padding: 10px 0;
		}

		body .slicknav_nav li {
			min-height: inherit;
			line-height: inherit;
		}

		body .slicknav_nav li:hover,
		body .slicknav_nav li {
			background-color: transparent;
		}

		body .slicknav_nav .sub-menu-panel {
			display: none;
		}

		body .slicknav_nav .menu-item-has-children.active > a {
			background-image: url(../images/mobile-menu-carrot-open.svg);
			background-size: auto 8px; 
		}

		body .slicknav_nav .menu-item-has-children.active .sub-menu-panel {
			display: block;
		}
		body .slicknav_nav .menu-item-has-children.active .sub-menu-panel .sub-menu {
			background:#268fd4; 
		}

		body .slicknav_nav .menu-item-has-children.active .sub-menu-panel .sub-menu a {
			background-image: none; 
		}

		body .slicknav_nav a {
			margin-left: 0;
		    font-weight: 500;
		    color: #fff;
			font-size: 23px;
		    line-height: 28px;
		    display: inline-block;
		    padding: 10px 25px;
		    text-transform: inherit;
		    width: 100%;
			background-image: url(../images/mobile-menu-carrot.svg);
			background-position: calc(100% - 30px) 50%;
			background-repeat: no-repeat;
			background-size: 8px auto;
		}

		body .slicknav_nav a:hover {
			background-image: url(../images/mobile-menu-carrot.svg);
			background-position: calc(100% - 30px) 50%;
			background-repeat: no-repeat;
			background-size: 8px auto;
		}

		body .slicknav_menu .slicknav_icon-bar {
			width: 1.5em;
			height: .18em;
			border-radius: 0;
		}

		body .slicknav_btn .slicknav_icon-bar+.slicknav_icon-bar {
			margin-top: 5px;
		}

	/* --------------------------------------- */
	/* HOME
	/* --------------------------------------- */

		/* Intro */
		body #content #intro {
			padding-bottom: 40px;
		}

		body #content #intro .content-wrap {
			margin: 0;
			flex-direction: column-reverse;
		}

		body #content #intro-copy {
			padding-right: 0;
			flex: inherit;
		}

		body #content #intro h2 {
			font-size: 32px;
			line-height: 38px;
			margin-top:30px;
		}

		body #content #intro p {
			padding: 0;
			font-size: 20px;
			line-height: 28px;
		}

		body #content #intro-animation {
			padding: 30px 0;
			width: 100%;
	    	transform: scale(.8) translateX(-40px);
		}

		body #content #intro.active #intro-animation {
			transform: scale(.8) translateX(0px);
		}

		/* CTA */
		.home #content #home-cta-images {
			margin-bottom: 30px;
		}

		.home #content #home-cta li a {
			height: auto;
		}

		.home #content #home-cta .slideshow-pager {
			display: flex;
			justify-content: center;
			padding: 20px 25px;
			top: 100%;
		    left: 0;
		    right: inherit;
		    bottom: inherit;
			width: 100%;
			position: relative;
			max-width: inherit;
			box-sizing: border-box;
			text-align: center;
		}

		.home #content #home-cta h3 {
			font-size: 32px;
			line-height: 38px;
			width: 100%;
		}

		.home #content #home-cta .cta {
			margin-top: 0;
		}

		/* Tiles */
		.home #content .home-tiles {
			margin: 0;
			display: block;
			flex-wrap: inherit;
		}

		.home #content #home-tiles .home-tile {
			margin: 0 0 15px 0;
			flex: inherit;
		}

		.home #content #home-tiles .home-tile:last-child {
			margin-bottom: 0;
		}

		.home #content #home-tiles .home-tile-image:before {
			display: none;
		}

		.home #content #home-tiles .home-tile img {
			float: left;
		    width: auto;
		    height: 150px;
			opacity: 1;
		}

		.home #content #home-tiles .home-tile .home-tile-title {
			position: relative;
			height: 150px;
			width: auto;
			padding-right: 25px;
		}

		.home #content #home-tiles .home-tile .home-tile-title a {
			padding-right: 15px;
		    padding-left: 20px;
		    font-size: 20px;
		    line-height: 24px;
		    opacity: 1;
		    width: 70%;
		    flex: inherit;
		}

		.home #content #home-tiles .home-tile .home-tile-title span {
			margin-right: 0;
			margin-left: auto;
		}

		.home #content #home-tiles .home-tile-content.mobile {
			width: 100%;
			background-color: #fff;
			padding-bottom: 30px;
		}

		.home #content #home-tiles .home-tile-content.mobile.active {
			display: block;
		}

		.home #content #home-tiles .home-tile-content.desktop {
			display: none;
		}

		.home #content #home-tiles .home-tile-content h3 {
			font-size: 26px;
			line-height: 30px;
			margin-bottom: 20px;
		}

		.home #content #home-tiles .home-tile-content p,
		.home #content #home-tiles .home-tile-content li {
			font-size: 20px;
			line-height: 28px;
		}

		.home #content #home-tiles .home-tile-content li {
			margin-top: 15px;
		}

		.home #content #home-tiles .home-tile-content ul {
			margin: 0 0 0 20px;
		}

		.home #content #home-tiles .home-tile .home-tile-title span {
			background-color: transparent;
			background-image: url(../images/home-tile-plus.svg);
			width: 16px;
			height: 16px;
			background-repeat: no-repeat;
			background-position: 50% 50%;
		}

		.home #content #home-tiles .home-tile.active .home-tile-title span {
			background-color: transparent;
			background-image: url(../images/home-tile-minus.svg);
		}

		/* Highlights */
		.home #content #home-highlights li .image {
			max-width: 380px;
		}

		.home #content #home-highlights li .content {
			padding-left: 60px;
		}

		.home #content #home-highlights li strong {
			font-size: 36px;
			line-height: 40px;
		}

	/* --------------------------------------- */
	/* ABOUT
	/* --------------------------------------- */

		#intro-to-wedg {
			margin-top: 30px;
		}

	/* --------------------------------------- */
	/* RESOURCES
	/* --------------------------------------- */

		.page-template-tm-resources form input[type="text"],
		.page-template-tm-resources form input[type="email"] {
			width: 100%;
		}

		.page-template-tm-resources form input[type="submit"] {
			padding: 12px 22%;
		}

	/* ------------------------------------------ */
	/* RESOURCES / CATEGORY / COMMUNITY / PROJECTS
	/* ------------------------------------------ */

		.has-projects #projects-filters ul {
			flex-wrap: wrap;
		}

		.has-projects #projects-filters ul li {
			margin-right: 15px;
		}

		.has-projects #projects-filters ul li a {
			font-size: 18px;
			line-height: 18px;
		}

		.has-projects #projects-list li .project-hero {
			display: block;
			min-height: inherit;
		}

		.has-projects #projects-list li .project-image {
			margin-bottom: 20px;
			height: 180px;
		}

		.has-projects #projects-list li .project-header {
			padding-left: 0;
		}

		.has-projects #projects-list li .project-hero h3 {
			font-size: 36px;
			line-height: 40px;
			margin-bottom: 30px;
		}

		.has-projects #projects-list li .project-hero .project-city,
		.has-projects #projects-list li .project-hero .project-neighborhood {
			font-size: 24px;
			line-height: 26px;
		}

		.has-projects #projects-list li .project-hero .project-neighborhood {
			padding-top: 5px;
			margin-bottom: 0;
		}

		.has-projects #projects-list li .project-hero .ddownload-link {
			margin-top: 30px;
		}

		.has-projects #find-projects {
			margin-top: 45px;
		}

		.has-projects #find-projects #map-canvas {
			height: 310px !important;
		}

		.has-projects #find-projects #map-canvas:after {
			border-top: 46px solid #0072BC;
		}

		.has-projects #find-projects #map-caption {
			max-width: inherit;
			right: inherit;
			bottom: 0;
			display: block;
			width: 100%;
			box-sizing: border-box;
		}

	/* --------------------------------------- */
	/* CONTACT
	/* --------------------------------------- */

		.page-template-tm-contact #team-members .member-text {
			display: block;
		}

		.page-template-tm-contact #team-members ul.member-links {
			text-align: left;
		}

	/* --------------------------------------- */
	/* JOIN
	/* --------------------------------------- */

		.page-template-tm-join form input[type="text"],
		.page-template-tm-join form input[type="email"] {
			width: 100%;
		}

		.page-template-tm-join form input[type="submit"] {
			padding: 12px 22%;
		}

	/* --------------------------------------- */
	/* FOOTER
	/* --------------------------------------- */

		#footer {
			margin-bottom: 0;
		}

		#footer-wrap {
			margin-top: 50px;
		}

		#footer-bottom {
			display: block;
			text-align: center;
		}

		#footer-waterfront span {
			margin: 0 auto 20px;
		}

		#footer-waterfront a:last-child {
			width: fit-content;
			margin: 0 auto;
		}

		#footer-waterfront a br {
			display: none;
		}

		#wrap-footer-nav-menu {
			display: none;
		}

		#footer-donate {
			text-align: center;
		}

		#footer-donate a {
			padding: 8px 26px 6px;
			font-size: 17px;
			line-height: 20px;
		}

		#footer-nav .social-menu {
			display: block;
			margin-top: 30px;
			align-items: inherit;
		}

		#footer-nav .social-menu > p {
			display: block;
			font-size: 14px;
			line-height: 16px;
			margin-bottom: 30px;
		}

		#wrap-footer-social-menu {
			padding-top: 25px;
			border-top: 2px solid #0072BC;
			margin: 0;
		}

		#footer-nav .social-menu ul {
			display: block;
		}

		#footer-nav .social-menu li:first-child {
			float: none;
			display: block;
			max-width: inherit;
			width: 100%;
			margin: 0 0 10px 0;
			padding: 0;
			border: none;
		}

		#footer-nav .social-menu li:first-child a {
			font-size: 14px;
			line-height: 16px;
		}

		/* TML and ACF Front Forms */

		#content ul.tml-links a, .tml input[type='submit'] { width:100%; margin-bottom:20px; }

}

/*
  ##Device = Tablets, Ipads
  ##Screen = B/w 768px to 1024px
*/
@media only screen and (min-width: 768px) and (max-width: 1024px) {

	.mobile {
		display: block;
	}

	/* --------------------------------------- */
	/* GLOBAL STYLES
	/* --------------------------------------- */

		#content {
			float: none;
		}

		#content-wrap {
			margin-bottom: 70px;
		}

		#logo-symbol {
			display: none !important;
		}

		h2.headline {
			margin-top: 20px;
			font-size: 50px;
			line-height: 62px;
		}

		/* Featured Image */
		.featured-image div {
			height: 490px;
		}

		/* CTA */
		#content .cta {
			padding: 12px 8%;
		}

		/* Download Buttons */
		body #content a.external-link,
		body #content a.ddownload-link {
			text-align: left;
			padding-right: 70px;
		}

		body #content a.external-link:not(:last-of-type),
		body #content a.ddownload-link:not(:last-of-type) {
			margin: 0 20px 0 0;
			text-align: left;
			padding-right: 70px;
		}

		body #content a.external-link:last-of-type,
		body #content a.ddownload-link:last-of-type {
			margin: 0;
		}

		body #content a.external-link:after,
		body #content a.ddownload-link:after {
			right: 0;
		}

	/* --------------------------------------- */
	/* TOP BAR
	/* --------------------------------------- */

		#top-bar #top-bar_donate {
			padding: 5px 0;
		}

		#top-bar #top-bar_donate > span {
		    background-position: 0 50%;
		    width: 100%;
		    height: 12px;
			margin-left: 0;
		}

		#top-bar_donate .donate-interaction p {
			display: none;
		}

		#top-bar #top-bar_donate .donate-interaction a {
			margin-left: auto;
		}

	/* --------------------------------------- */
	/* HEADER
	/* --------------------------------------- */

		#header {
			margin-bottom: 40px;
			float: none;
		}

		#header .sub-menu-panel {
			display: none !important;
		}

	/* --------------------------------------- */
	/* HOME
	/* --------------------------------------- */

		body #content #intro .content-wrap {
			margin-top: 0;
		}

		body #content #intro-copy {
			padding-right: 0;
			flex: 0 1 60%;
		}

		body #content #intro h2 {
			font-size: 46px;
			line-height: 58px;
		}

		body #content #intro p {
			font-size: 22px;
			line-height: 26px;
		}

		body #content #intro-animation {
			transform: translateX(-40px);
		}

		body #content #intro.active #intro-animation {
			transform: translateX(-10px);
		}

		body #content #intro-animation .animation-value-2 {
			transform: translateX(-10px);
		}

		.home #content #home-cta h3 {
			width: 90%;
		}

		.home #content #home-cta .cta {
			margin-top: 20px;
		}

		.home #content #home-tiles .home-tile-content h3 {
			margin-top: 50px;
		}

		.home #content #home-tiles .home-tile .home-tile-title a {
			padding: 20px;
		    flex: 0 1 auto;
		    width: 60%;
			line-height: 26px;
			font-size: 22px;
		}

		.home #content #home-tiles .home-tile-content ul {
			margin: 0 0 0 12%;
		}

		.home #content #home-tiles .home-tile .home-tile-title span {
			margin-right: 0;
			position: absolute;
			right: 15px;
		}

	/* --------------------------------------- */
	/* ABOUT
	/* --------------------------------------- */

		#intro-to-wedg {
			margin-top: 30px;
		}

	/* ------------------------------------------ */
	/* RESOURCES / CATEGORY / COMMUNITY / PROJECTS
	/* ------------------------------------------ */

		.has-projects #projects-list li .project-hero {
			min-height: inherit;
		}

		.has-projects #projects-list li .project-image {
			flex: 1;
		}

		.has-projects #projects-list li .project-hero h3 {
			font-size: 42px;
			line-height: 46px;
			margin-bottom: 30px;
		}

		.has-projects #projects-list li .project-hero .project-city,
		.has-projects #projects-list li .project-hero .project-neighborhood {
			font-size: 26px;
			line-height: 28px;
			margin-bottom: 0;
		}

		.has-projects #projects-list li .project-hero .ddownload-link {
			margin-top: 20px;
		}

		.has-projects #find-projects #map-canvas {
			height: 470px !important;
		}

	/* --------------------------------------- */
	/* JOIN
	/* --------------------------------------- */

		.page-template-tm-join #content #intro {
			margin-bottom: 0;
		}

		.page-template-tm-join form input[type="text"],
		.page-template-tm-join form input[type="email"] {
			width: 75%;
		}

		.page-template-tm-join form input[type="submit"] {
			padding: 12px 8%;
		}

	/* --------------------------------------- */
	/* FOOTER
	/* --------------------------------------- */

		#footer {
			overflow: inherit;
		}

}

/*
  ##Device = Tablets, Ipads (Landscape)
  ##Screen = B/w 768px to 1023px
*/
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

	/* --------------------------------------- */
	/* GLOBAL STYLES
	/* --------------------------------------- */

		#wrapper,
		#top-bar {
			padding-left: 100px;
			padding-right: 100px;
		}

}

/*
  ##Device = Tablets, Ipads (Portrait)
  ##Screen = B/w 768px to 1023px
*/
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
	/* --------------------------------------- */
	/* GLOBAL STYLES
	/* --------------------------------------- */

		#wrapper,
		#top-bar {
			padding-left: 40px;
			padding-right: 40px;
		}

	/* --------------------------------------- */
	/* HOME
	/* --------------------------------------- */

		body #content #intro h2 {
			font-size: 40px;
		    line-height: 44px;
		}

		body #content #intro-animation {
			padding: 30px 0;
			transform: scale(.8) translateX(-80px);
		}

		body #content #intro.active #intro-animation {
			transform: scale(.8) translateX(-40px);
		}

		.home #content #home-tiles .home-tile .home-tile-title a {
			line-height: 24px;
			font-size: 18px;
		}
}

/*
  ##Device = Smaller Desktops
  ##Screen = 1025px
*/
@media only screen and (min-width: 1025px) {

	/* --------------------------------------- */
	/* GLOBAL STYLES
	/* --------------------------------------- */

		#content {
			width: 85%;
		}

	/* --------------------------------------- */
	/* HEADER
	/* --------------------------------------- */

		#header {
			width: 85%;
		}

		#logo-symbol {
			width: 15%;
		    margin-top: 200px;
		    background-position: 50% 50%;
		    background-size: contain;
		    padding-left: 20px;
		    padding-right: 20px;
		    box-sizing: border-box;
		    /*width: 216px;*/
		}

		#header #top-nav ul.nav li {
			display: inline-block;
		}

		#header #top-nav ul.nav > li > a {
			padding: 0;
		}

}