/*
	Theme Name: DHS Stand Together Theme
	Description: HTML5 Stand Together WordPress Theme
	Version: 1.0
	Author: Kimberly Sholl
	Tags: Blank, HTML5, CSS3
*/

/*------------------------------------*\
    MAIN
\*------------------------------------*/
/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap');

/* global box-sizing */
*, *:after, *:before {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html {}
body {
  font: 600 16px/1.4 'Open Sans', sans-serif;
  color: #000;
}

/* Clear */
.clear:before, .clear:after {
  content: ' ';
  display: table;
}
.clear:after {
  clear: both;
}
.clear {
  *zoom: 1;
}

/* Images */
img {
  max-width: 100%;
  vertical-align: bottom;
}

/* Headings */
h1, h2, h3, h4, h5 {
  font-weight: bold;
}
h1 {
  font-size: 32px;
  margin-bottom: 35px;
}
h2 {
  font-size: 28px;
  margin-bottom: 35px;
}
h3 {
  font-size: 24px;
}
h4 {
  font-size: 20px;
}
h5 {
  font-size: 18px;
}

/* Links */
a {
  color: #000;
  text-decoration: none;
}
a:hover {
  color: #99D70F;
  cursor: pointer;
}
a:focus {
  outline: 0;
}
a:hover, a:active {
  outline: 0;
}

/* Forms */
input:focus {
  outline: 0;
  border: 1px solid #04A4CC;
}

/*------------------------------------*\
    STRUCTURE
\*------------------------------------*/

/* Wrappers */
.wrapper {
  margin: 0 auto;
  position: relative;
}
.pageWrap {
  max-width: 1200px;
  margin: 50px auto;
  padding: 0 20px;
}
.search-results .pageWrap, .search-no-results .pageWrap {
  padding: 0 20px 100px;
}
.projectWrap {
  margin: 0 auto 50px;
}
.howWrap {
  max-width: 100%;
  margin: 100px auto;
  padding: 0 20px;
  text-align: center;
}
.whyWrap {
  max-width: 800px;
  margin: 50px auto;
  padding: 0 20px;
  text-align: center;
}
.aboutWrap {
  max-width: 1200px;
  margin: 100px auto;
}
.awardsWrap {
  max-width: 100%;
  margin: 50px auto 0;
  background-color: #F9F9F9;
  border-top: 1px solid #707070;
  padding: 50px 20px;
}
.insideWrap {
  background-color: #F9F9F9;
  padding: 100px 0;
}

/* Header */
.header {
  align-items: center;
  padding: 20px;
}

/* Logo */
.logo {
  float: left;
}
.logo-img {
  max-width: 250px;
}

/* Nav */
.topnav {
  float: left;
  display: inline-block;
  padding-left: 50px;
  margin-top: 6px;
}
.topnav ul, .navBTM ul {
  display: inline-block;
  list-style: none;
  margin-bottom: 0;
  padding-inline-start: 0;
}
.topnav ul li, .navBTM ul li {
  float: left;
  margin-right: 30px;
}
.topnav ul li:last-child, .navBTM ul li:last-child {
  float: left;
  margin-right: 0;
}
.topnav ul li a {
  font-size: 16px;
  font-weight: bold;
}
.navBTM ul li a {
  font-size: 13px;
  font-weight: bold;
}
.topnav ul li a:hover, .navBTM ul li a:hover {
  text-decoration: none;
  color: #632398;
}
.topnav ul li.current-menu-item a, .navBTM ul li.current-menu-item a {
  text-decoration: none;
  color: #632398;
}
.topnav li {
  position: relative;
}
.topnav ul ul {
  display: none;
  position: absolute;
  top: 25px;
  left: 0;
  z-index: 99999;
  width: 165px;
  margin-top: -5px;
  padding: 5px 10px 10px;
  background: #fff;
  box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
}
.topnav ul li:hover > ul {
  display: block;
}
.topnav ul ul li {
  float: left;
  margin-top: 10px;
  margin-right: 0;
}
.footerNav {
  text-align: center;
  padding-top: 8px;
}
.navBTM {
  display: inline-block;
}
.navBTM ul ul {
  display: none;
}

/* Search */
.searchBar {
  float: right;
  border: 1px solid;
  padding: 0 5px;
  margin-top: 6px;
}
.search-input {
  border: none;
  font-size: 12px;
}
.search-submit {
  background: url(/wp-content/themes/dhsStandTogether/img/icons/searchIcon.png);
  background-size: cover;
  height: 15px;
  width: 15px;
  border: none;
}
input:focus {
  border: none;
}
.alert-info {
  color: #632398;
  background-color: #e5f4f5;
  border-color: #bee5eb;
}
li.searchResults:nth-child(even) {
  background-color: #F9F9F9;
}
li.searchResults {
  padding: 40px 0 40px 20px;
  border-bottom: 1px solid #cecece;
  list-style: none;
}
li.searchResults:last-child {
  border-bottom: none;
}
li.searchResults a.view-article {
  display: none;
}

/* Buttons */
button:focus {
  outline: none;
}
.stBtn {
  border-radius: 20px;
  padding: 7px 20px;
  background-color: #632398;
  color: #ffffff;
  border: none;
  font-size: 17px;
  font-weight: bold;
}
.stBtn:hover {
  background-color: #99D70F;
  color: #ffffff;
}
.storyBtn {
  margin-top: 50px;
}
.bannerBtn {
  margin-left: 10px;
}

/* Footer */
.footer {
  padding: 20px;
  background-color: #F9F9F9;
  border-top: 1px solid #707070;
  font-size: 13px;
}
.search-results .footer, .search-no-results .footer {
  padding: 20px;
  background-color: #F9F9F9;
  border-top: 1px solid #707070;
  font-size: 13px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}
.footer .logo {
  text-align: right;
}
.footerCR {
  text-align: left;
  padding-top: 8px;
}

/*------------------------------------*\
    HOMEPAGE
\*------------------------------------*/

/* Slider */
.metaslider {
  margin-bottom: -35px !important;
}
.metaslider .flexslider {
  margin-bottom: 0 !important;
}
.metaslider .caption-wrap {
  bottom: 50% !important;
  background-color: transparent !important;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
}
.metaslider .flex-control-nav {
  bottom: 75px !important;
}
.flex-control-paging li a {
  background: #cecece !important;
}
.flex-control-paging li a.flex-active {
  background: #ffffff !important;
}

/* Sticky Bar */
.stickyWrap {
  margin: 0 auto;
  width: 713px;
  height: auto;
  background-color: #ffffff;
  text-align: center;
  border: 1px solid #707070;
  position: relative;
  z-index: 1;
}
.sticky {
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  padding-left: 15px;
  padding-right: 15px;
  -webkit-box-shadow: 0 8px 6px -6px #B8B8B8;
  -moz-box-shadow: 0 8px 6px -6px #B8B8B8;
  box-shadow: 0 8px 6px -6px #B8B8B8;
  border: none;
}
.stickyBackground {
  background-color: #ffffff;
  width: 100%;
  margin: 30px 0;
}
.stickyBackground p {
  font-size: 18px;
  font-weight: bold;
}

/* Stories */
.imgBox1, .imgBox2, .imgBox3 {
  padding: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  min-height: 600px;
}
.imgBox1 {
  background-image: url(/wp-content/themes/dhsStandTogether/img/story1.png);
}
.imgBox2 {
  background-image: url(/wp-content/themes/dhsStandTogether/img/story2.png);
}
.imgBox3 {
  background-image: url(/wp-content/themes/dhsStandTogether/img/story3.png);
}
.colorBox1, .colorBox2, .colorBox3 {
  text-align: center;
}
.colorBox1 h3, .colorBox2 h3, .colorBox3 h3 {
  color: #000000;
  font-size: 20px;
  font-weight: 400;
  text-align: left;
}
.colorBox1 {
  background-color: #F9F9F9;
  border-top: 1px solid #707070;
  background-image: url(/wp-content/themes/dhsStandTogether/img/computerBG.png);
  background-size: 40%;
  background-repeat: no-repeat;
  background-position: bottom left;
}
.colorBox2 {
  background-color: #ffffff;
  background-image: url(/wp-content/themes/dhsStandTogether/img/headphoneBG.png);
  background-size: 40%;
  background-repeat: no-repeat;
  background-position: bottom right;
}
.colorBox3 {
  background-color: #F9F9F9;
  border-bottom: 1px solid #707070;
  background-image: url(/wp-content/themes/dhsStandTogether/img/soccerBG.png);
  background-size: 30%;
  background-repeat: no-repeat;
  background-position: bottom left;
}
.colorBoxTxtWrap {
  display: flex;
  width: 60%;
  margin: auto;
  min-height: 600px;
}
.colorBoxTxt {
  margin: auto;
  text-align: left;
}

/* Fade In Images for Stories */
.fadeImg, .fadeImg3, .fadeImg4 {
  min-height: 600px;
  visibility: hidden;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.fadeImg {
  background-image: url(/wp-content/themes/dhsStandTogether/img/story1Overlay.png);
}
.fadeImg3 {
  background-image: url(/wp-content/themes/dhsStandTogether/img/story2Overlay.png);
}
.fadeImg4 {
  background-image: url(/wp-content/themes/dhsStandTogether/img/story3Overlay.png);
}
.fadeIn {
  -webkit-animation: animat_show 5s;
  animation: animat_show 5s;
  visibility: visible !important;
}
@-webkit-keyframes animat_show {
  0% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}

/* Featured Blog Posts */
.featuredWrap {
  max-width: 1200px;
  margin: 50px auto !important;
}
.showfeaturedonly {
  padding: 0 30px;
  margin-bottom: 30px;
}
.featuredImgWrap {
  padding: 0;
  border: 1px solid #cecece;
  max-width: 336px;
  margin: auto;
}
.featuredTxtWrap {
  padding: 15px;
  border: 1px solid #cecece;
  max-width: 336px;
  margin: auto;
  background-color: #F9F9F9;
}
.featuredTxtWrap h5 {
  margin-bottom: 0;
}
.showfeaturedonly a img {
  filter: grayscale(1);
}

/* Zoom In Featured Post Image */
figure.zoomIn {
  margin: 0;
  padding: 0;
  background: #fff;
  overflow: hidden;
  max-height: 252px;
}
figure.zoomIn:hover + span {
  bottom: -36px;
  opacity: 1;
  cursor: pointer;
}
.hover02 figure img {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
.hover02 figure:hover img {
  -webkit-transform: scale(1.3);
  transform: scale(1.3);
  cursor: pointer;
}

/*------------------------------------*\
    INTERIOR PAGES
\*------------------------------------*/

/* About */
.aboutTxt {
  padding: 0 20px;
}
.aboutImg img {
  max-height: 400px;
}
.imgBoxAbout {
  background-image: url(/wp-content/themes/dhsStandTogether/img/aboutHeroImg.jpg);
  padding: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  min-height: 600px;
}
.colorBoxAbout {
  background-color: #e5f4f5;
  text-align: center;
}
.colorBoxAboutTxtWrap {
  display: flex;
  width: 80%;
  margin: auto;
  min-height: 600px;
}
.colorBoxAboutTxt {
  margin: auto;
  text-align: left;
  padding: 20px 0;
}
.colorBoxAboutTxt h1 {
  margin-top: 0;
}
.colorBoxAboutTxt h4 {
  font-weight: 600;
}
.howContain {
  margin-top: 100px;
}
.howContain img {
  max-width: 150px;
  margin-top: 20px;
  margin-bottom: 30px;
}
.howContain img.arrowHow {
  max-width: 75%;
}
.whyContain {
  margin-top: 50px;
  text-align: left;
}
.whyContain img {
  max-width: 150px;
  margin-bottom: 20px;
}
.awardsContain {
  max-width: 1200px;
  margin: 0 auto !important;
  text-align: center;
}
.awardItem {
  padding: 0 20px;
  max-width: 400px;
  margin: 0 auto 50px;
}
.awardItem img {
  max-width: 200px;
}

/* Implementation */
.imgBoxImplement {
  background-image: url(/wp-content/themes/dhsStandTogether/img/implementHeroImg.jpg);
  padding: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  min-height: 600px;
}
.colorBoxImplement {
  background-color: #f3e9fd;
  text-align: center;
}
.colorBoxImplementTxtWrap {
  display: flex;
  width: 80%;
  margin: auto;
  min-height: 600px;
}
.colorBoxImplementTxt {
  margin: auto;
  text-align: left;
  padding: 20px 0;
}
.colorBoxImplementTxt h1 {
  margin-top: 0;
}
.colorBoxImplementTxt h4 {
  font-weight: 600;
}
.insideSchools {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
.insideSchools a {
  color: #632398;
}
.insideSchools a:hover {
  color: #99D70F;
}
.schoolsImgContain {
  margin-top: 20px;
}
.chapter {
  max-width: 800px;
  margin: 100px auto;
  padding: 0 20px;
}
.chapter a {
  color: #632398;
}
.chapter a:hover {
  color: #99D70F;
}

/* Projects */
.projectHero {
  height: 500px;
  background-image: url(/wp-content/themes/dhsStandTogether/img/projectHero.jpg);
  background-size: cover;
  margin-bottom: 100px;
}
.heroTxtWrap {
  display: flex;
  width: 60%;
  margin: auto;
  min-height: 500px;
}
.heroInnerWrap {
  margin: auto;
  text-align: center;
  color: #ffffff;
}
.projectTitle {
  font-size: 45px;
  font-weight: 600;
}
.wonderplugin-gridgallery-tags {
  margin: 0 auto 50px;
}
#wonderplugingridgallery-1 .wpp-category-greybutton .wonderplugin-gridgallery-tag {
  border-radius: 20px !important;
  font-size: 14px !important;
  font-weight: bold !important;
  font-family: "Open Sans", "Arial", "Helvetica", sans-serif !important;
  background: none !important;
  border: 1px solid #632398 !important;
  color: #632398 !important;
}
#wonderplugingridgallery-1 .wpp-category-greybutton .wonderplugin-gridgallery-tag-selected {
  background: #632398 !important;
  color: #ffffff !important;
}
.html5-elem-box {
  border-radius: 10px;
  border: 1px solid #000000;
}
.html5-playpause {
  display: none !important;
}
.html5-title-prefix {
  display: none;
}
#html5lightbox-watermark {
  display: none !important;
}
.wonderplugin-gridgallery-item a div {
  display: none;
  z-index: -5;
  background-color: transparent !important;
  color: transparent !important;
}
.html5-prev-inside .mh-icon-left, .html5-next-inside .mh-icon-right {
  display: none !important;
}
.html5-prev-outside .mh-icon-left, .html5-next-outside .mh-icon-right, .html5-prev-fullscreen .mh-icon-left, .html5-next-fullscreen .mh-icon-right {
  display: none !important;
}
#wonderplugingridgallery-1 .wonderplugin-gridgallery-item-text {
  background-color: rgba(255, 255, 255, 0.59) !important;
  color: #632398 !important;
  font: 16px Open Sans, Arial, Helvetica, sans-serif !important;
  font-weight: bold !important;
  padding: 8px 5px !important;
}

/* Blog Listing */
.blogTitle {
  text-align: center;
  margin-bottom: 70px;
}
.blogText {
  margin-bottom: 50px;
}
.blogPreview {
  padding: 50px;
}
.listWrap {
  margin-bottom: 20px;
  background-color: #F9F9F9;
  border: 1px solid #cecece;
}
.blogThumb {
  min-height: 260px;
  background-size: cover;
}
.pagination {
  display: block;
  text-align: center;
  margin-top: 30px;
}
.page-numbers {
  margin-right: 10px;
  color: #707070;
}
.pagination .prev:before {
  content: '<<';
  vertical-align: middle;
}
.pagination .next:after {
  content: '>>';
  vertical-align: middle;
}
.pagination .prev, .pagination .next {
  text-decoration: none;
}
.pagination .current {
  font-weight: bold;
  color: #34CBC8;
}

/* Blog Posts */
.blogImg img {
  max-width: 385px;
  float: left;
  margin: 0 20px 20px 0;
}

/*------------------------------------*\
    IMAGES
\*------------------------------------*/



/*------------------------------------*\
	TYPOGRAPHY
\*------------------------------------*/

@font-face {
	font-family:'Font-Name';
	src:url('fonts/font-name.eot');
	src:url('fonts/font-name.eot?#iefix') format('embedded-opentype'),
		url('fonts/font-name.woff') format('woff'),
		url('fonts/font-name.ttf') format('truetype'),
		url('fonts/font-name.svg#font-name') format('svg');
    font-weight:normal;
    font-style:normal;
}

/*------------------------------------*\
    RESPONSIVE
\*------------------------------------*/

@media only screen and (max-width:452px) {
	.searchBar {margin-top: 0;}
}
@media only screen and (max-width:575px) {
	.whyContain {text-align: center; margin-top: 0;}
	.breakDiv {display: none;}
	.whyData {margin-top: 50px;}
}
@media only screen and (max-width:550px) {
	.colorBox1, .colorBox2 {background-size: 60%;}
	.colorBox3 {background-size: 50%;}
	.colorBoxTxtWrap {width: 90%;}
}
@media only screen and (max-width:768px) and (min-width:453px) {
	.searchBar {margin-top: 30px;}
}
@media only screen and (max-width:768px) {
	.stickyWrap {display: none;}
	.blogImg img {max-width: 100%; float: none; margin: 0 auto 20px; width: 100%;}
}
@media screen and (max-width:991px) {
	.imgBox1, .imgBox2, .imgBox3, .imgBoxAbout {display: none;}
	.colorBox1, .colorBox2, .colorBox3 {padding: 50px 0;}
	.colorBoxTxtWrap {min-height: 300px;}
	.logo {text-align: center; margin-bottom: 20px; padding: 0;}
	.colorBoxAboutTxtWrap {min-height: 400px;}
	.colorBoxAboutTxt {padding: 50px 0;}
	.howWrap {max-width: 390px;}
	.arrowHow {display: none;}
	.navBTM ul li {float: none; margin-right: 0; margin-bottom: 5px;}
	.navBTM ul li:last-child {float: none; margin-bottom: 20px;}
	.footerCR {text-align: center;}
}
@media only screen and (max-width:1050px) {
	.footerNav {text-align: center;}
	.footer .logo {text-align: center;}
}

/*------------------------------------*\
    MISC
\*------------------------------------*/

::selection {
	background:#04A4CC;
	color:#FFF;
	text-shadow:none;
}
::-webkit-selection {
	background:#04A4CC;
	color:#FFF;
	text-shadow:none;
}
::-moz-selection {
	background:#04A4CC;
	color:#FFF;
	text-shadow:none;
}

/*------------------------------------*\
    BOOTSTRAP FIXES
\*------------------------------------*/

.row {margin-left: 0; margin-right: 0;}


/*------------------------------------*\
    WORDPRESS CORE
\*------------------------------------*/

.alignnone {
	margin:5px 20px 20px 0;
}
.aligncenter,
div.aligncenter {
	display:block;
	margin:5px auto 5px auto;
}
.alignright {
	float:right;
	margin:5px 0 20px 20px;
}
.alignleft {
	float:left;
	margin:5px 20px 20px 0;
}
a img.alignright {
	float:right;
	margin:5px 0 20px 20px;
}
a img.alignnone {
	margin:5px 20px 20px 0;
}
a img.alignleft {
	float:left;
	margin:5px 20px 20px 0;
}
a img.aligncenter {
	display:block;
	margin-left:auto;
	margin-right:auto;
}
.wp-caption {
	background:#FFF;
	border:1px solid #F0F0F0;
	max-width:96%;
	padding:5px 3px 10px;
	text-align:center;
}
.wp-caption.alignnone {
	margin:5px 20px 20px 0;
}
.wp-caption.alignleft {
	margin:5px 20px 20px 0;
}
.wp-caption.alignright {
	margin:5px 0 20px 20px;
}
.wp-caption img {
	border:0 none;
	height:auto;
	margin:0;
	max-width:98.5%;
	padding:0;
	width:auto;
}
.wp-caption .wp-caption-text,
.gallery-caption {
	font-size:11px;
	line-height:17px;
	margin:0;
	padding:0 4px 5px;
}
.sticky {

}
.bypostauthor {

}

/*------------------------------------*\
    PRINT
\*------------------------------------*/

@media print {
	* {
		background:transparent !important;
		color:#000 !important;
		box-shadow:none !important;
		text-shadow:none !important;
	}
	a,
	a:visited {
		text-decoration:underline;
	}
	a[href]:after {
		content:" (" attr(href) ")";
	}
	abbr[title]:after {
		content:" (" attr(title) ")";
	}
	.ir a:after,
	a[href^="javascript:"]:after,
	a[href^="#"]:after {
		content:"";
	}
	pre,blockquote {
		border:1px solid #999;
		page-break-inside:avoid;
	}
	thead {
		display:table-header-group;
	}
	tr,img {
		page-break-inside:avoid;
	}
	img {
		max-width:100% !important;
	}
	@page {
		margin:0.5cm;
	}
	p,
	h2,
	h3 {
		orphans:3;
		widows:3;
	}
	h2,
	h3 {
		page-break-after:avoid;
	}
}