/*
Theme Name:     Jupiter Child Theme
Theme URI: 			http://themeforest.net/user/artbees
Description:    Child theme for the Jupiter theme 
Author:         Andy Ernst
Template:       jupiter
Version:        4.0.8
*/

/*------------ Global overwrites ------------*/
* {
	box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6 {
	font-family:'Trade Gothic W01 Cn_18';
	line-height: 1.1em;
}
a:hover {
	text-decoration: underline;
}
/* The div makes this beat out the Jupiter style */
div#theme-page h1 {
	font-size: 72px;
}
@media screen and (max-width: 767px){
	div#theme-page h1 {
		font-size: 36px;
	}
	div#theme-page h2 {
		font-size: 30px;
	}
	div#theme-page h3 {
		font-size: 24px ;
	}
	div#theme-page h3 {
		font-size: 20px ;
	}
}
/* The classes "trade-gothic", "trade-gothic-condensed", and "meta" set fonts too  */
.big-label, .menu-item-link, .widgettitle {
	font-family:'Trade Gothic W01 Cn_18', sans-serif;
}

html body {
	font-family: 'Meta Offc W01 Normal', sans-serif;
}
input, select {
	font-family: sans-serif;
}


/* Equivalent of stick-template and remove title */
#mk-page-introduce {
	display: none;
}
#theme-page .theme-page-wrapper {
	margin: 0 auto;
}
#theme-page .theme-content {
	padding: 0 !important;
}


/* Easier to control spacing without this adding more */
.vc_separator.wpb_content_element {
	margin-bottom: 0;
}

/* Remove orange shadow from these (just for this shortcode, not the circle and text one)*/
#theme-page .mk-circle-image > .item-holder {
	box-shadow: none;
}


/*------------  CSS for custom HTML  ------------*/

/* Header text for thanking sponsors */
/* USAGE: Put this class on a div or span wrapping your text */
#theme-page .thank-you-header {
	font-size: 28px;
	line-height: 1.3;
	font-family:'Trade Gothic W01 Cn_18', sans-serif;
	margin-top: 50px;
	margin-bottom: 50px;
}

@media screen and (max-width: 767px){
	#theme-page .thank-you-header {
		font-size: 20px;
	}
}

/* Custom tool tip */
/* USAGE: (the following HTML)
	<a class= "tool-tip-link" ontouchstart="this.classList.toggle('hover');">
		LINK TEXT <span class="tool-tip">TOOL TIP TEXT</span>
	</a>
*/
.tool-tip-link {
	position: relative;
	cursor: pointer;
}
.tool-tip {
	position: absolute;
	left: -9999px;
	bottom: 100%;
	min-width: 300px;
	padding: 15px;
	z-index: 10;
	background-color: white;
	border: 1px solid #e0e0e0;
	text-align: left;
	line-height: 1.4;
	font-family: "Meta Offc W01 Normal";
  text-transform: none;
  font-size: 14px;
  color: #777;
}
.tool-tip-link:hover .tool-tip, .tool-tip-link.hover .tool-tip {
	left: -50%;
}

#theme-page .zoom-bullet-points {
	max-width: 720px;
	margin: auto;
	float: none;
}

/* checkmark bullet points */
/* USAGE: just wrap every snippet of text that needs a bullet point with this class */
.bullet-point {
  padding: 1em 0 1em 2em;
  position: relative;
 	text-align: left;
	clear: left;
}
.bullet-point:before  {
  content: '\f00c'; /* mk-icon-check  */
  position: absolute;
  left: 0;
  top: .4em;
  font-family: 'FontAwesome';
  color: #FF7F21;
  font-size: 32px;
}

/* Progress bars like Jupiter's but more customizable */
/* USAGE: requires custom html, see /leadership-giving/leadership-giving/ for example */
.progress-bars > .label {
	font-size: 24px;
}
.progress-bar-container{
	background-color: #e2e2e2; 
	width: 100%;
	height: 30px;
	position: relative;
	text-align: right;
	margin-bottom: 30px;
	font-family: 'Trade Gothic W01 Cn_18';
}
.progress-bar {
	position: absolute;
	height: 100%;
}
.progress-color {
	width: 0 !important;
	opacity: 1;
	background-color: #f57814;
	height: 100%;
  -webkit-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}
.mk-in-viewport.progress-color {
	width: 100% !important;
}
.progress-bar-container > .amount{
	padding-right: 10px;
	position: relative;
	font-size: 20px;
  line-height: 30px;
}
.progress-bar-container > .small-text {
	font-size: 14px;
	position: absolute;
	bottom: -24px;
	right: 10px;
}


/*------------   Custom styled elements on top of WP elements   ------------*/

/* USAGE: curently this applies to all edge sliders */
/* edge slider size and font overrides to dynamically scale height */
.mk-edge-slider .edge-slide-content {
	width: 80% !important;
  margin-left: 6em; /* fallback for below */
  margin-left: 10vw;
  margin-bottom: 9em;
}
.main-hero-slider .mk-grid {
  position: absolute;
  bottom: 0;
}
.main-hero-slider .edge-title {
	margin-bottom: 0;
	font-size: 900% !important;
	color: #FF8010 !important;
	font-family: 'TradeGothicW01-BoldCn20_675334';
}
.main-hero-slider .edge-desc {
  margin: 0;
	line-height: 1.2em !important;
	font-size: 450% !important;
	color: white;
	font-family:'Trade Gothic W01 Cn_18';
	font-weight: bold !important;
}

.mk-edge-slider .edge-title-area {
  font-size: 12px; /* edge-desc and edge-title derive their size from this number */
}
@media all and (max-width: 820px) {
	.mk-edge-slider .edge-title-area {
	  font-size: 8px; 
	}
}

@media screen and (max-width: 480px) {
	.mk-swiper-container, .swiper-slide {
		max-height: 400px;
	}
	.mk-edge-slider .edge-title-area {
	  font-size: 6px;
	}
	.mk-edge-slider .edge-slide-content {
		margin-bottom: 3em;
	}
}
@media screen and (max-width: 320px) {
	.mk-edge-slider .edge-title-area {
	  font-size: 4px;
	}
}

/* Inline Milestone (number counting up) styles */
/* USAGE: add "milestone-container" to containing textbox, add "inline-block" to each milestone
					milestones on the events page are also styled using the "event-milestone" class */

.milestone-container {
	font-size: 28px;
	font-family:'Trade Gothic W01 Cn_18';
}
.small-milestone-container {
	font-size: 16px;
	font-family:'Trade Gothic W01 Cn_18';
}
.mk-milestone.milestone-medium {
	margin: 0 5px;
}
.mk-milestone.milestone-medium .milestone-number, 
.mk-milestone.milestone-medium .milestone-suffix, 
.mk-milestone.milestone-medium .milestone-prefix {
	font-size: 180%;
	letter-spacing: -1px;
}

.milestone-header { /* the "One day of Impact" text */
	margin: .5em;
	color: #18387b;
	font-size: 20px;
}
.milestone-top { /* the numbers and their labels below */
	font-family:'Trade Gothic W01 Cn_18';
	text-align: center;
}
.mk-milestone .milestone-text { /* labels below */
	margin: 0;
	padding: 5px 0;
	font-size: 90% !important;
	width: auto;
} 

@media screen and (max-width: 767px) {
	.milestone-container {
		font-size: inherit;
	}
}
@media screen and (max-width: 480px) {
	.milestone-container .inline-block, .small-milestone-container .inline-block {
		display: block !important;
		margin-top: .5em;
		margin-bottom: .5em; 
	}
}
.mk-milestone .milestone-text:after {
	content: none; /* remove the hr-like-thing that the shortcode adds */
}
.event-milestone .inline-block {
	vertical-align: top;
}
.event-milestone .milestone-text {
  color: #969696 !important;
}
.event-milestone .milestone-header {
	margin-right: 0;
	margin-left: 0;
}
.event-milestone .milestone-top {
	font-size: 20px;
}
.event-milestone .milestone-text {
	width: 100px;
}

/* Image with color ribbon and text in middle */
/* USAGE: Use a "Single Image" element, place text in title, and give it this class */
.image-ribbon-container {
	position: relative;
  max-width: 720px;
  margin: auto;
}
.image-ribbon-container .vc_single_image-wrapper, 
.image-ribbon-container .vc_single_image-img {
	width: 100%;
}
#theme-page .image-ribbon-container .wpb_heading {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  background-color: rgba(24, 56, 123, 0.5);
  color: white;
  font-size: 250%;
  width: 100%;
  font-weight: bold;
  padding: 5px;
  text-transform: none;
}


/* Classes for text on bottom of image */
/* USAGE: Use an "Image" element (not "single image") and place text in caption title and caption description */
#theme-page .image-caption-center .mk-image-caption {
	display: initial !important;
  margin: 0;
	background-color: transparent;
	font-family:'Trade Gothic W01 Cn_18';
}

/* White text bottom center */
#theme-page .image-caption-center .mk-image-caption {
  width: 100%;
	text-align: center;
  line-height: 1;
}
#theme-page .image-caption-center .mk-caption-title {
	font-size: 600%;
	line-height: 1;
}
#theme-page  .image-caption-center .mk-caption-desc {
	font-size: 200%;
	line-height: inherit;
	text-transform: uppercase;
}
@media screen and (max-width: 767px) {
	#theme-page .image-caption-center .mk-image-caption {
		font-size: 12px;
	}
}
@media screen and (max-width: 600px) {
	#theme-page .image-caption-center .mk-image-caption {
		font-size: 8px;
	}
	#theme-page .image-caption-center .mk-image-title {
		line-height: .9;
	}
}
#theme-page .image-caption-center.small .mk-caption-title{
	font-size: 26px;
}
#theme-page .image-caption-center.small .mk-caption-desc {
	font-size: 20px;
}

/* Page title box used for parallax header on many pages */
/* USAGE: A page title box at with Title (font-size ignored, letter spacing should be 1) 
					and optionally Subtitle text (font 50px),
					underline off (that's important), background effect set to parallax */

@media screen and (max-width: 600px) { 
	#theme-page .mk-page-title-box {
		height: 300px; /* fallback for vw property below */
	}
}

#theme-page .mk-page-title-box {
	height: 45vw;
	max-height: 600px;
}
#theme-page .mk-page-title-box > .mk-effect-bg-layer {
	background-size: cover;
	height: 100%;
	top: 0;
}
.mk-page-title-box .mk-page-title-box-content {
	display: block;
	position: absolute;
	width: 100%;
	bottom: 0;
}
#theme-page .mk-page-title-box-content .mk-page-title-box-title {
	position: relative;
  padding: .1em;
  margin-bottom: 20px;
  letter-spacing: 0px;
  background-color: white;
  color: #18387b;
  font-size: 72px;
  line-height: 80px;
	font-family: 'TradeGothicW01-BoldCn20_675334';
}
@media screen and (max-width: 1080px) {
	#theme-page .mk-page-title-box-content .mk-page-title-box-title {
		line-height: 56px;
		margin-bottom: 0;
	}	
}
@media screen and (max-width: 767px) {
	#theme-page .mk-page-title-box-content .mk-page-title-box-title {
		font-size: 36px;
		line-height: 36px;
	}	
}
@media screen and (max-width: 400px) {
	#theme-page .mk-page-title-box-content .mk-page-title-box-title {
		font-size: 30px;
		line-height: 30px;
	}	
}
#theme-page .mk-page-title-box-title:after {
  content: "";
  position: absolute;
  right: -.6em;
  top: 0;
  height: 100%;
  z-index: -1;
  border-right: 100px solid white;
	-webkit-transform: skew(-33.3deg);
	-moz-transform: skew(-33.3deg);
	-ms-transform: skew(-33.3deg);
	transform: skew(-33.3deg); 
}
#theme-page .mk-page-title-box-title:before {
  content: "";
  position: absolute;
  left: -.6em;
  top: 0;
  height: 100%;
  z-index: -1;
  border-left: 100px solid white;
	-webkit-transform: skew(-33.3deg);
	-moz-transform: skew(-33.3deg);
	-ms-transform: skew(-33.3deg);
	transform: skew(-33.3deg); 
}
.mk-page-title-box .mk-grid {
	margin-bottom: 5%;
}

/* Two bands of colored lines below images */
/* USAGE: separator with class colored-lines, all colors and sizes are overwritten here */
.colored-lines {
  border-bottom: 15px solid #f57814;
  height: 2px;
  background-color: white;
}
.colored-lines .vc_sep_line {
	border-width: 0;
}

/* The Upcoming events event list*/
.ecs-event-list {
  text-align: left;
}


/*------------ Menu style ------------*/


/* Fix some bad link underline behavior on links */
.menu-hover-style-5 .main-navigation-ul > li.current-menu-item > a.menu-item-link:after {
  transform: scale(0, 1);
}
#mk-header .header-logo .mk-desktop-logo {
  max-height: 98%; /* to avoid covering the border */
  padding: .7em;
}

/* Overwrite Jupiter's fat mobile menu */
@media screen and (max-width: 780px) {
	.header-style-1 .header-logo, .header-style-1 .mk-header-inner {
		height: 50px !important;
	}
	#mk-header .header-logo .mk-desktop-logo {
		margin-top: 0;
	}
}
/* This item is only visible on mobile*/
#mk-main-navigation .hidden-desktop-menu {
	display: none;
}
.menu-donate-button {
	overflow: auto;
}
#mk-responsive-wrap {
	position: relative;  /*Makes mobile menu push down page content  */
  max-height: 100vh !important;
}
#mk-responsive-nav {
	border: 1px solid #666;
/*  top: -50px;
  padding-top: 50px;*/
}
#mk-responsive-nav .menu-donate-button.menu-item > .menu-item-link{
	margin: .5em;
	border: 3px solid #f57814;
	color: #f57814 !important;
	text-align: center;
	padding: 10px;
  transition: all 0.25s ease-in-out;
}
#mk-responsive-nav .menu-donate-button.menu-item > .menu-item-link:hover{
	background-color: #f57814;
	color: #fff !important;
}
#mk-responsive-nav .menu-item{
	border: none;
}
#mk-responsive-nav .menu-item-link{
	font-weight: 100;
}
#mk-responsive-nav > .menu-item > .menu-item-link{
	margin: -2px 0;
	border: 2px solid #666;
	border-right: none;
	border-left: none;
	font-size: 26px;
	letter-spacing: -1px;
}
#mk-responsive-nav .sub-menu .menu-item-link {
	font-size: 20px;
}
#mk-responsive-nav .mk-nav-arrow {
	width: 100%; /* expand function triggered on any part of the button, not just the icon*/
	text-align: right;
	padding-right: .9em;
	-webkit-transition-duration: .5s;
	transition-duration: .5s;
	font-family: FontAwesome;
  font-size: 28px;
  font-weight: bold;
  opacity: 1 !important;
}
#mk-responsive-nav .mk-moon-arrow-down::before {
	content: '';
}
.mk-nav-sub-opened {
	-webkit-transform: scaleY(-1) translateY(5px);
	-ms-transform: scaleY(-1) translateY(5px);
	transform: scaleY(-1) translateY(5px);
}
.no-csstransitions #mk-responsive-nav .mk-nav-sub-opened.mk-moon-arrow-down::before {
  content: '';
}
.responsive-searchform .text-input {
	color: #3F3F3F;
	background-color: #DDD;
	text-align: left;
	font-size: 20px;
}
#mk-responsive-nav {
	/*padding-top: 75px;*/
}
/*.responsive-searchform {
	position: absolute;
	top: 0;
	padding: 10px;
	margin: 0;
	width: 100%;
}
.responsive-searchform > .mk-icon-search {
	right: 25px;
	top: 25px;
}*/

/*------------  Input overwrites  ------------*/

.error { /*inline error message*/
  color: rgb(253, 64, 64);
  padding: 0 5px;
	text-transform: none;
  display: block;
  font-size: 20px;
  font-family: 'Trade Gothic W01 Cn_18';
}
.invalid + .error {
  display: block;
}

.vc_btn {
	border-radius: 0;
	text-transform: uppercase;
}
/* More padding between sections */
form .vc_col-xs-12, form .vc_col-xs-6 {
	padding-top: 5px;
	padding-bottom: 5px;
}

#theme-page select {
	height: 50px;
	width: 100%;  background: url('../jupiter/images/selectbox-arrow.png') right center no-repeat #ddd;
	border: 0;
	min-width: 0;
	font-weight: normal;
	line-height: 24px;
	font-size: 20px;
}
input[type="text"], input[type="email"], input[type="tel"] {
	display: block;
	height: 50px;
	width: 100%;
	background-color: #ddd;
	border: none;
	font-size: 20px;
}
.big-label {
	text-transform: uppercase;
	font-size: 20px;
}
.invalid {
	border: 2px solid #FC8080;
  outline: 0;
  -webkit-box-shadow: inset 0 0 0 rgba(0,0,0,0), 0 0 25px rgba(253, 64, 64, 1);
  box-shadow: inset 0 0 0 rgba(0,0,0,0), 0 0 25px rgba(253, 64, 64, 1);
}
/* Checkbox styling */
input[type=checkbox] {
	visibility: hidden;
}
.checkbox {
	width: 20px;	
	margin-right: 30px;
	margin-left: -25px;
	position: relative;
}
.checkbox label {
  cursor: pointer;
  position: absolute;
  width: 25px;
  height: 25px;
  top: 0;
  background-color: #ddd;
}
.checkbox label::after {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;
  content: '';
  position: absolute;
  width: 17px;
  height: 10px;
  background: transparent;
  top: 5px;
  left: 5px;
  border: 4px solid #fcfff4;
  border-top: none;
  border-right: none;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.checkbox input[type=checkbox]:checked + label::after {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
}
.checkbox input[type=checkbox]:checked + label {
  background: #f57814;
}


/*------------  Footer styles  ------------*/

/* Due to wordpress's lack of customizability here, we have to use a lot of child selectors to get 
   what we want */
#mk-footer:before {
  content: "";
  border-bottom: 15px solid #f57814;
  width: 100%;
  position: absolute;
  top: -17px;
}
#mk-footer > .footer-wrapper {
	max-width: 100%;
}
#mk-footer .mk-padding-wrapper {
	padding: 0;
	text-align: center;
}	

#mk-footer .mk-square-rounded {
	background-color: #ebebeb;
}
#mk-footer .widget_social_networks .mk-square-rounded > i {
	padding: 6px;
	font-size: 32px;
  color: rgb(61, 64, 69);
}

#mk-footer .primary-button, 
.subscribe-input {
	width: 100%;
  margin-top: 10px;
}
#mk-footer .mk-padding-wrapper> .mk-col-1-3 {
	width: 360px;
	float: none;
	padding: 0 15px;
	display: inline-block;
	text-align: left;
	vertical-align: top;
}
/* Address */
#mk-footer .mk-col-1-3:nth-child(2) > .widget_text:first-child { 
	margin-bottom: 0;
}
/* GoogleMaps image */
#mk-footer .mk-col-1-3:nth-child(2) > .widget_text:last-child { }

/* Row of links and philanthropy icon */
#mk-footer .mk-col-1-3:nth-child(3) {
	width: 100%;
}
#mk-footer .mk-col-1-3:nth-child(3) > .widget {
	margin-bottom: 0;
}
.footer-links {
	font-size: 30px;
	padding: .5em;
}
.footer-links > .link {
	margin: 0 2%;
	letter-spacing: -1px;
}

@media screen and (max-width: 600px) {
	.footer-links {
		font-size: 20px;
	}
}

img.desaturate {
	transition: all 0.25s ease-in-out;
  -webkit-filter: grayscale(100%) !important; 
  filter: grayscale(100%) !important;   
}
img.desaturate:hover {
  -webkit-filter: grayscale(0%) !important;
  filter: grayscale(0%) !important;
}
#sub-footer {
	padding-bottom: 10px;
	text-align: center;
}
.mk-footer-copyright {
	float: none;
  padding: 10px;
}


/*------------ Event pages styles ------------*/

.event-donation-level {
	margin-bottom: 0;
	color: #f57814;
	font-size: 20px;
	font-family: 'Trade Gothic W01 Cn_18';
	font-weight: bold;
}


/*------------ Donation button/input styles, not unique to donation page ------------*/

#donation-level-buttons {
	text-align: center;
}
#donation-level-buttons::after {
	content: '';
	width: 100%;
	display: inline-block;
}
.donation-level-container {
	display: inline-block;
	margin: 0 5px;
}
.donation-level-button {
	display: table-cell;
	height: 110px;
	width: 110px;
	vertical-align: middle;
	text-align: center;
	cursor: pointer;
	border: 2px solid #f57814;
	color: #f57814;
  font-size: 42px;
  font-weight: bold;
}

@media screen and (max-width: 767px) {
	.donation-level-button {
		height: 90px;
		width: 90px;
	  font-size: 36px;
	}
}
.level-selected, .donation-level-button:hover {
	background-color: #f57814;
	color: white;
	text-decoration: none;
}
#custom-amount-section {
	font-size: 36px;
  margin-bottom: 30px;
}
#custom-amount-section .input-prefixer::before {
	margin-top: -.4em;
}
#donation-amount {
  display: inline-block;
  font-size: 32px;
  max-width: 200px;
  text-align: center;
}

/* Wrap inputs in a span with this class, adds $ to front of input*/
.input-prefixer {
	position: relative;
}
.input-prefixer::before {
  content: '\f155';
  font-family: 'FontAwesome';
  left: .2em;
  top: 50%;
  margin-top: -.5em;
  position: absolute;
  font-size: 24px;
}

.donate-button {
	text-transform: uppercase;
}


/*------------  Miscellaneous  ------------*/

.icon-box-boxed > .vc_masonry_grid {
	margin-bottom: 0;
	text-align: left;
}
.vc_btn {
  letter-spacing: 1px;
  font-weight: bold;
  text-transform: uppercase;
  display: inline-block;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  padding: 14px 20px;
  font-size: 11px;
  line-height: 11px;
  color: #fff;
  background-color: #f57814 !important;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -ms-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}
.vc_btn:hover {
  background-color: #252525 !important;
}

.scale-print-banner > .mk-image-inner > img {
  width: 100%;
  max-width: 1920px;
}

.inside-blockquote-author {
	text-align: right;
	padding-right: 25px;
	padding-bottom: 10px;
	font-size: 20px;
	color: #999999;
}

/* Prevents page section background image from disappearing on mobile */
.mk-page-section .background-layer {
	position: absolute !important;
}
/* Undoes annoying "border" on images in circle  */
.mk-circle-image .item-holder {
	box-shadow: none;
}