/* ==========================================================================
    Author: Jeff Parente
  ---------------------------
    custom styles for:
    arieljensen.jeffparente.net
  ---------------------------
    Date: 3-3-19
    All rights reserved.
========================================================================== */
/* begin google font imports */

/* for use as site id font */
@import url('https://fonts.googleapis.com/css?family=Engagement');
/*
    font-family: 'Engagement', sans-serif, cursive;
--------------------------------------------------------------- */
/* for use as headlines font */
@import url('https://fonts.googleapis.com/css?family=Arima+Madurai');
/*
    font-family: 'Arima Madurai', sans-serif, cursive;
--------------------------------------------------------------- */
/* 
base color palet
-------------- 
very pale indego - #e3e9ef  rgb(227, 233, 239)
paler indego - #cfdbe7  rgb(207, 219, 231)
pale indego - #a7bed3  rgb(167, 190, 211)

light blue - #349fbc  rgb(52, 159, 188)
blue - #347da8  rgb(52, 125, 168)
darker blue - #18394d  rgb(24, 57, 77)

orange - #e88140  rgb(232, 129, 64)
darker orange - #bc5f23  rgb(188, 95, 35)
gold - #edb965  rgb(237, 185, 101)
-------------------
*/

body {
    /* padding-top: 74px;
    padding-bottom: 20px; */
    background-color: #cfdbe7;
    color: #347da8;
    /*bootsrtap4 default text family*/
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    margin-top: 4.6rem;
}
h1, h2, h3, h4, h5, h6 {
  color: #18394d;
  font-family: 'Arima Madurai', sans-serif, cursive;
}
a:hover {
  color: #18394d;
  text-decoration: underline;
}
p {
  color: #18394d;
}
/* ---------------------------------
      NAV
--------------------------------- */
.ajensen-main-navbar {
  background-color: #cfdbe7;
  border-bottom: #18394d 1px solid;
}
.ajensen-brand {
  font-size: 2.5rem;
  font-family: 'Engagement', sans-serif, cursive;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: -.2em;
  margin-bottom: -.05em;
}
.navbar-brand small {
  display: block;
  font-size: 37%;
  margin-top: -6px;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  margin-top: -1em;
} 
.dropdown-menu.jep-search {
  /* position: absolute; */
  top: 100%;
  left: -1700%;
  min-width: 20rem;
  width: 90vw;
  padding: 5px;
  border-bottom: #18394d 1px solid;
  border-left: #18394d 1px solid;
}
.dropdown-toggle::after {
  display: none;
}
.form-inline .form-control {
  display: inline-block;
  width: auto;
  vertical-align: middle;
  width: 70%;
}
.jep-search {
  background-color: rgba(207, 219, 231, 1);
  border: none;
}
.jep-search .form-inline .form-control {
  width: 70%;
  margin-right: 5px;
}
.navbar-brand.ajensen-brand {
  color: #18394d; 
}
#aJensen-mainNav .active {
  color: #bc5f23;
}
#aJensen-mainNav .nav-link:hover {
  color: #18394d;;
}
#aJensen-mainNav a#mainNav-search {
  max-width: 40px;
  color: rgba(0,0,0,0);
  background-image: url("/imgs/aJensen-search-icon.png");
  background-repeat: no-repeat;
  background-size: 60%;
  background-position: center 40%; 
  opacity: .7;
}
#aJensen-mainNav a#mainNav-search:hover {
  background-image: url("/imgs/aJensen-search-icon-hover.png");
  opacity: 1;
}
/* --- accessibilitity links ----
source for "main content" link stuff: https://accessibility.oit.ncsu.edu/it-accessibility-at-nc-state/developers/accessibility-handbook/mouse-and-keyboard-events/skip-to-main-content/ 
*/
a.skip-main {
  left:-999px;
  position:absolute;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
  z-index:-999;
}
a.skip-main:focus, a.skip-main:active {
  color: #fff;
  background-color:#000;
  left: auto;
  top: auto;
  width: 30%;
  height: auto;
  overflow:auto;
  margin: 10px 35%;
  padding:5px;
  border-radius: 15px;
  border:4px solid yellow;
  text-align:center;
  font-size:1.2em;
  z-index:999;
} 
/* ---------------------------------
      footer
--------------------------------- */
.ajensen-footer {
  background-color: #a7bed3;
  padding: 15px;
  margin-top: 25px;
}
.ajensen-footer .list-group {
  background-color: rgba(207, 219, 231, 0);
}
.ajensen-footer .list-group-item {
  padding: 0;
  background-color: rgba(207, 219, 231, 0);
  border: none;
}
.footer-name {
  margin-top: 2rem;
  font-size: 2.5rem;
  font-family: 'Engagement', sans-serif, cursive;
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: -.05em;
}
.footer-name small {
  /* display: block;
  font-size: 50%;
  margin-top: -6px; */
  display: block;
  font-size: 37%;
  margin-top: -6px;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  margin-top: -1em;
} /*
.footer-name {
  font-size: 2.5rem;
  font-family: 'Engagement', sans-serif, cursive;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: -.2em;
  margin-bottom: -.05em;
}
.navbar-brand small, .footer-name small {
  display: block;
  font-size: 37%;
  margin-top: -6px;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  margin-top: -1em;
} */
/*--- Social media links ---*/
.ajensen-social {
  text-align: center;
  padding-top: 2.2rem;
}
/* Facebook */
.fa {
  padding: 20px 25px;
  font-size: 30px;
  /*width: 50px; */
  text-align: center;
  text-decoration: none;
  border-radius: 50%;
  margin: .3em .3em 1em;
} /*
.fa:hover {
  opacity: 0.7;
  text-decoration: none;
} */
footer .fa {
  font-size: 24px;
}
.fa-facebook {
  background: #3B5998;
  color: white;
  transition: all .5s ease-in-out;
}
.fa-facebook:hover {
  background: #607dba;
  color: white;
  text-decoration: none;
}

/* ---------------------------------
      Home page
--------------------------------- */
.aJensen-home-jumbo1 {
  background-image: url("/imgs/active-activity-adult-1472887-cc1-80perct.png");
  background-position: 0% 30%;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 400px;
  position: relative;
  background-color: #349fbc;
}
.jumboTextBox {
  background-color: rgba(52, 125, 168, .75);
  position: absolute;
  bottom: 10%;
  right: 10%;
  max-width: 80%;
  padding: 15px;
  color: white;
  border-radius: 4px;
}
.jumboTextBox h1 {
  color: white;
}
.jumboTextBox h1 small {
  font-size: 60%;
  font-weight: 200;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}
.home-tagline {
  padding-bottom: 30px;
}
.home-tagline h2 {
  /* text-align: center; */
}
.home-feature-div {
  height: 240px;
  background-size: cover;
  position: relative;
  border-radius: 8px;
}
/* .home-feature-div:hover {
 cursor: pointer;
} */
.home-feature-col h3 a {
  background-color: rgba(52, 125, 168, .75);
  position: absolute;
  bottom: 5%;
  right: 10%;
  width: 80%;
  padding: 15px;
  color: #e8f0ff;
  border-radius: 4px;
  text-decoration: none;
  transition: all .5s ease-in-out;
}
.home-feature-col h3 a:hover {
  background-color: rgba(52, 125, 168, 1);
  color: white;
}
.private-instruction-div {
  background-image: url("/imgs/acro-yoga-active-arms-1882005.jpg");
}
.availibiity-div {
  background-image: url("/imgs/active-activity-adult-1308746.jpg");
}
.about-ariel-div {
  background-image: url("/imgs/fitness-girl-hands-374694.jpg");
}
/* ---------------------------------
      interior pages
--------------------------------- */
.interior_page {
  background-color: #e3e9ef; 
}
.interior_page  .ajensen-main {
  min-height: 20em;
}
.interior_page h1,  .interior_page h2, .interior_page h3, .interior_page h4, .interior_page h5, .interior_page h6 {
  color: #bc5f23;
}
.interior_page h2, .interior_page h3, .interior_page h4, .interior_page h5, .interior_page h6 {
  margin-top: 1.1em;
}
h2, h2 {
  font-size: 1.7rem;
}
.ajensen-breadcrumbs {
  margin-top: 15px;
}
.ajensen-breadcrumbs .breadcrumb {
  /* background-color: #e3e9ef; */
  background-color: rgba(0,0,0,0);
  border-bottom: 2px #cfdbe7 solid;
  padding-bottom: .4em;
  margin-bottom: 2em;
  padding-top: 0;
  margin-top: .4em;
}
.ajensen-breadcrumbs .breadcrumb .active, #ajensen-localNav-ul .active {
  color: #bc5f23;
}
.ajensen-breadcrumbs .breadcrumb-item + .breadcrumb-item::before {
  padding-right: .5rem;
  /*color: #cfdbe7; */
  content: ">";
}
#ajensen-localNav-ul {
  border-radius: .25rem;
  margin-bottom: .75rem;
}
#ajensen-localNav-ul .list-group-item {
  /*background-color: #e3e9ef; */
  background-color: #cfdbe7;
  padding: .5rem .2rem;
}
#ajensen-localNav-ul .list-group-item:first-of-type {
  border-radius: 15px 15px 0 0 ;
}
#ajensen-localNav-ul .list-group-item:last-of-type {
  border-radius: 0 0 15px 15px;
}
#ajensen-localNav-ul .list-group-item a:hover {
  text-decoration: underline;
}

/* ---------------------------------
      About page
--------------------------------- */
.ajensen-about-img {
  max-width: 100%;
  background-position: 0% 30%;
  margin-bottom: 1rem;
}
.aJensen-signature {
  font-family: 'Arima Madurai', sans-serif, cursive;
  font-size: 2.2em;
}
/* ---------------------------------
      Contact page
--------------------------------- */
/* --form stuff --*/
.jep_form_div {
	padding: 15px;	
	min-height: 300px;
}
.jep_form_div label {
	font-size: 20px;
	line-height: 1.4em;	
}
.jep_form_div textarea {
  resize: none;
	height: 100px;
}
.jep_btn_spacer {
	margin-top: 15px;	
}
.form-group.required .control-label:after {
  content:"*";
  color:red;
}
form input, form textarea {
	border: 2px rgba(0,0,0,0) solid; 	
}
form input:invalid, form textarea:invalid {
  border-bottom: 2px red solid; 
  border-left: 2px red solid; 	
}
form input:invalid:focus {
	/* background-color: rgba(255,0,0,.1); */
	box-shadow: 0 0 5px rgba(255,0,0,.5);
	border-color: rgba(255,0,0,.75);
}
form .error {
	color: red;
	font-size:14px;	
}
.success_message {
	font-size: 24px;
	margin: 20px;
	font-weight:bold;	
}
#contactFormDiv {
  margin-bottom: 4em;
}
/* ---------------------------------
      Calendar page
--------------------------------- */
.tabcontent .calendar-week-h2 {
  margin-top: .2em;
  color: white;
  margin-bottom: .3em;
  font-size: 2rem;
}
.calendar-day {
  background-color: #cfdbe7;
  margin-bottom: 1em;
  padding: .4em;
  border-radius: 4px;
}
.calendar-day:nth-of-type(2n) {

}
.calendar-day h3 {
  font-size: 1.3rem;
  overflow-wrap: break-word;
}
.calendar-day h4 {
  font-size: .8rem;
  color: #347da8;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  margin-top: -.3em;
  font-weight: bold;
}
.time-slot {
  text-align: center;
  padding: .5em .2em;
  margin: .2em .2em .4em;
  background-color: #f4f8fc;
  font-size: 1.3rem;
  border-radius: 4px;
}
.time-slot:nth-of-type(2n) {
  background-color: #e1ebf4;
}
.time-available:hover {
  background-color: #a2b0bf;
  color: white;
  cursor: pointer;
}
.time-slot.not-available {
  background-color: rgba(0,0,0,0);
  border: 1px #72a2bf solid;
  color: #72a2bf;
}
.hidden-request-form-div {
  display: none;
}
.hidden-request-form-div.fancybox-content {
  background-color: #e3e9ef;
  padding: 15px 0 15px;
}
.hidden-request-form-div fieldset {
  background-color: #f4f8fc;
  margin-top: 1.1em;
}
.hidden-request-form-div .form-control[readonly] {
  background-color: #f4f8fc;
}
.hidden-request-form-div legend {
  background-color: #f4f8fc;
  padding-left: .5em;
  padding-right: .5em;
  border-radius: 6px;
}
.hidden-request-form-div .btn.btn-primary {
  margin-top: .7em;
  float: inline-end;
}
/* ----- tabs ----- */
.tab {
  overflow: hidden;
  border: 1px solid #a2b0bf;
  background-color: #e1ebf4;
}
/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 6px 8px;
  transition: 0.2s;
  max-width: 33.3%;
  /* word-break: break-all; */
  word-break: break-word;
  color: #18394d;
  border-right: 1px solid #a2b0bf;
}
.tab button:last-of-type {
  border-right: none;
}
/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #f4f8fc;
}
/* Create an active/current tablink class */
.tab button.active-tab {
  background-color: #a2b0bf;
}
/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #a2b0bf;
  border-top: none;
  background-color: #a2b0bf;
} 
/* ---------------------------------
      Calendar page
--------------------------------- */
ul, ol {
  color: #18394d;
}

/* ----------------------------------------------------------
          BEGIN Responsive
---------------------------------------------------------- */
/* Extra small devices (portrait phones, less than 576px)
 No media query since this is the default in Bootstrap 
 ------------------------------------------------------ */

/* -- BEGIN Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { 
  .tab button:last-of-type {
    border-right: 1px solid #a2b0bf;
  }
}  /* -- CLOSE (min-width: 576px) -------------- */ 

/* -- BEGIN Medium devices (tablets, 768px and up) 
-------------- FULL MAIN NAV ----------------- */
@media (min-width: 768px) { 
  /* -- desktop nav --*/
  .aJensen-mainNav li {
    margin-left: 20px;
  }
  .aJensen-mainNav li:first-of-type {
    margin-left: 0;
  }
  .jep-search .form-inline .form-control {
    width: 82%;
  }
  .dropdown-menu.jep-search {
    left: -1300%;
    width: 60vw;
  }
  /* ---- interior pages -----*/
  #ajensen-localNav-ul {
    margin-top: 3.85rem;
  }
  /* ---- home page -----*/
  .jumboTextBox {
    max-width:60%;
    padding: 15px;
  }
  /* ---- about page -----*/
  .ajensen-about-img {
    max-width: 40%;
    margin-left: .5em;
    margin-top: .5em;
  }
  /* ---- calender page -----*/
  .hidden-request-form-div.fancybox-content {
    padding: 44px;
  }
  .tab button {
    padding: 14px 16px;
    transition: 0.2s;
    max-width: 33.3%;
    word-break: break-word;
  }

}  /* -- CLOSE (min-width: 768px) ------------ */ 

/* -- BEGIN Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
  .dropdown-menu.jep-search {
    left: -1800%;
    width: 70vw;
  }
}  /* -- CLOSE (min-width: 992px) --------------- */ 

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
  .dropdown-menu.jep-search {
    left: -2250%;
  }
 } /* -- CLOSE (min-width: 1200px) -------------- */