/* Fonts */
@font-face { font-family: 'Gotham Bold'; src: url('fonts/Gotham-Bold.otf'); }
@font-face { font-family: 'Gotham Book'; src: url('fonts/Gotham-Book.otf'); }

/* Body & Page Wrappers, Helpers */
html, body      { height: 100%; }
#page-container { display: flex; flex-direction: column; margin:0; padding:0; min-height: 100vh; }
#page-content   { flex: 1 0 0; background: white; }
.aqua           { background-color: #0097a7; }
.inst-index-btn { margin-bottom: 2vh; }
.radio-label    { color: #9e9e9e !important; position: absolute; top: -1rem; left: 0.75rem; font-size: .80rem; cursor: text; transition: .2s ease-out; }

/* Nav */
nav                    { background: #263238; box-shadow: none; border: none; height: 96px; padding: 15px 50px; z-index: 1000; }
nav .brand-logo        { font-weight: 500; font-size: 1.75rem; }
.brand-logo img        { border: 0; position: absolute; margin-top: 8px; margin-left: 2px; }
#logo1                 { font-family: 'Gotham Book'; }
#logo2                 { font-family: 'Gotham Bold'; }
#logo1, #logo2         { text-transform: uppercase; }
nav ul a, #learn-txt   { text-transform: uppercase; font-weight: 500; font-size: 1rem; }
nav ul, #navli         { margin-left: 30px; }
nav ul li a i          { margin-right: 15px; }
#register-btn          { background: white; line-height: 40px; border-radius: 5px; width: 150px; text-align: center; margin-top: 1vh; transition: all .3s ease-out; }
#register-btn a        { color: rgb(0, 151, 167); }
#register-btn:hover a  { background: none !important; }

/* Side Nav */
#side-nav     { background: #263238; }
#side-nav li  { margin-left: 0; border-bottom: 1px solid white; }
#side-nav  a  { color: white; text-transform: none; font-weight: 300; font-size: 1.25rem; }
#side-logo    { background: rgb(0, 151, 167); }
#side-logo a  { color: white; font-size: 1.5rem; }

/* materialize customization */

.supportcontent         {overflow:visible !important;overflow-y: visible;width: auto !important}

/* Content */
.pages-header-basic     { text-align: center; margin-bottom: 60px; }
.pages-header-basic h4  { font-weight: 300; color: #263238; padding: 5vh 0;}
.pages-header-basic p   { font-size: 1.25rem; color: #263238; max-width: 600px;  margin: auto; }
.pages-content-basic    { margin-top: 2vh; }

/* Bread Crumbs */
#breadcrumbs                          { font-weight: bold }
#breadcrumbs .breadcrumb:not(.active) { color: rgb(0, 151, 167); }
#breadcrumbs .breadcrumb,             
#breadcrumbs .breadcrumb:before       { color: black;}
#breadcrumbs .breadcrumb:before       { vertical-align: middle; }
.breadcrumb                           { font-size: 1rem; }

/* Support Content */
#support-main-header      { background: #F8F9F9; }
#support-main-body h4     { color: white; }
.support-main-categories  { display: flex; justify-content: space-between; }
.support-category         { border: 1px solid rgb(0, 151, 167); border-top: 10px solid rgb(0, 151, 167); border-radius: 5px; height: 230px; background: white; padding: 24px !important; margin-bottom: 30px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; transition: all .3s ease-out; }
.support-category a       { color: #263238; font-size: 1.25rem; font-weight: bold; }
.support-category i       { color: #263238; font-size: 40px; }
.support-category:hover   { background: #66C1CA; cursor: pointer; }
.support-category:hover i, 
.support-category:hover a,
.support-category:hover p { color: white; }
#support-main-body        { background: #BCBEC0; }
#support-main-body a      { color: white; }
#top-question-btn         { text-align: center; padding: 5vh 0; }
#top-question-btn a       { background: white; color: rgb(0, 151, 167); }
.top-question             { border-top: 3px solid white; padding: 15px; transition: all .3s ease-out; }
.top-question:hover       { background: white; }
.top-question:hover a     { color: rgb(0, 151, 167) !important; }
.top-question.bottom      { border-bottom: 3px solid white; }
.top-question             { font-size: 1.2rem; }
#support-main-header h4,
#support-main-body h4     { margin: 0; padding: 5vh 0; }
.divider                  { background: #263238; height: 96px; margin-bottom: 30px; }
.divider h4               { color: white; }
.divider-button           { color: white; cursor: pointer; background: #263238; border: 1px solid white; border-radius: 5px; display: inline; padding: 7px 16px; align-items: center; justify-content: center; transition: 0.2s ease;}
.divider-button:hover     { background-color: white; color: #263238; }
.divider-button i         { margin-right: 10px; }
.support-subheader        { font-family: Roboto; font-style: normal; font-weight: normal; font-size: 24px; line-height: 140%; }
#support-tweets .tweet    { border: 1px solid black; }
.video-link p             { color: rgb(0, 151, 167); font-weight: bold; font-size: 18px; }
#support-tweets           { padding-bottom: 75px; margin-bottom: 0; }
.tweet-wrapper            { margin-bottom: 20px; }


/* Support Pages */
#grey-wrapper                                 { background: #F8F9F9;}
#page-content                                 { width: 100%; margin-bottom: 0; }
.has-support-nav                              { display: flex; flex-direction: row; }
#support-nav                                  { background: #EBEBEB; padding-left: 0; padding-right: 0; margin-left: 0; position: fixed; height: 100%; top: 0; padding-top: 100px !important; width: 300px; }
#support-nav ul                               { width: 100%; margin: auto; margin-top: 1vh; }
.support-header h4                            { font-weight: 300; color: #263238; padding: 3vh 0;}
.support-content h3                           { font-weight: bold; font-size: 2rem; color: #939598; margin: 5vh 0; }
.support-content p, .support-content li       { font-size: 1.15rem; }
.category                                     { transition: all .3s ease-out; }
li.active.category                            { background: #F8F9F9; font-weight: bold; position:relative; width:100%; }
.category:hover                               { cursor: pointer; }
.category-top                                 { border-top: none; }
.category > a                                 { font-size: 1.15rem; color: #263238; padding: 13px 0 13px 15%; display: block; }
.sub-link                                     { color: #263238; }
.sub-link.active                              { color: #939598; font-weight: bold; }
.sub-nav-link                                 { margin: 0 !important; padding: 10px 20px 10px 20% !important; }
.sub-nav-link a                               { color: #263238 !important; padding: 0 !important; }
.sub-nav-link a:not(.activelink)              { font-weight: normal !important; }
.support-category-body-links                  { display: none; }
.category.active .support-category-body-links { display: block; }
.support-category-body-links ul               { margin-top: 0 !important; padding-top: 1vh; }
.support-category-body-links li               { padding: 5px 10%; }
#sampling-table,
#sampling-table td                            { text-align: center; border-radius: 0; }
.troubleshooting li                           { list-style: initial; margin-bottom: 1vh;  }
.footer-link a                                { text-decoration: none; color: white; padding: 3px 0; cursor: pointer; display: block; }
.footer-link a:hover                          { text-decoration: underline; }
.youtube-titles                               { color: rgb(0, 151, 167); font-size: 1.25rem; font-weight: bold; }
.date-card-month                              { color:white; font-family: Roboto; font-style: normal; line-height: 33.6px; background-color: #263238; padding: 15px 0px; width: 150px; height: 100px; text-align: center; }
.illustration-credit                          { background: #EBEBEB; white-space: pre; padding:5px; margin-bottom: 25px; }
.illustration-credit a                        { color: #0097A7 !important; text-decoration: underline; cursor: pointer; }
#support-welcome                              { margin-bottom: 13px !important; font-size:36px; padding-bottom: 0 !important; }
#support-sub                                  { font-family: Roboto; font-style: normal; font-weight: bold; font-size: 55px !important; line-height: 64px; text-align: center; color: #263238; width: 70%; margin: auto; }
.bold                                         { font-weight: bold !important; }
.supportpagecontent                           { padding-top: 3vh !important; margin-left: 300px; padding: 0px 30px; max-width: 1066px; }
.supportpagecontent h5                        { font-size: 1.45rem; }
.ck-content-wrapper strong                    { font-weight: bold !important; }
.ck-content-wrapper ul,
.ck-content-wrapper ul li                     { list-style-type: inherit !important; }
.ck-content-wrapper ul                        { padding-left: 40px !important; }
.article-link                                 { margin-bottom: 20px }
.article-link a                               { font-weight: bold; color: #0097A7; cursor: pointer; }
.article-link a:hover                         { text-decoration: underline; }
.activelink                                   { font-weight: bold !important; }
.resource-link                                { cursor:pointer; color:#0097A7; }
.resource-link p                              { margin-left:5%; margin-right:5%; }
.resource-link img                            { width:90%; margin-left:5%; margin-right:5%; }
.ref-link                                     { font-weight: bold; font-size: 1.2rem;}
.content-section                              { margin-bottom: 75px; }
.guide-title                                  { height: 40px; display: flex; align-items: center; }
.support-index-action-wrapper                 { display: flex; align-items: center; justify-content: center; }
.faq-question                                 { font-size: 16px; }
.faq-answer                                   { margin-bottom: 40px; }
.article-content img                          { max-width: 70vw; height: 100% !important; }
.sub-footer-header                            { margin-top: 75px !important; margin-bottom: 30px !important; padding: 0 !important; }
.video-link                                   { margin-bottom: 75px; }

/* About Us Page */
.about-header             { margin-bottom: 75px;}
.story-section            { margin-top: 75px; }
.team-header              { margin-top: 75px; }
.team-card h1             { font-family: Roboto; font-style: normal; font-weight: bold; font-size: 32px; line-height: 45px; color: #0097A7; }
.team-card h2             { font-family: Roboto; font-style: normal; font-size: 20px; }
.team-card                { margin-top: 30px; }
.team-card-about a        { color: black; text-decoration: none;}
.team-image               { max-width: 65%; border: 3px solid #0097A7; }
.team-text                { margin: 0; }
.team-name                { margin-bottom: 0; margin-top: 20px; }
.team-link:hover          { text-decoration: underline; }
.linkedin                 { margin-top: 30px; width: 50px; }
.about-us-text            { font-family: Roboto; font-style: normal; font-weight: normal; font-size: 20px; line-height: 28px; }

/* Twitter */
#support-twitter-block    { background: #263238; color: white; margin-bottom: 0; }
#support-twitter-block h4 { color: white; margin-bottom: 0; padding-bottom: 10px; }
#support-twitter-block i  { font-size: 2.5em; color: white; margin-bottom: 5px; }
#support-twitter-block p  { color: white; }
#twitter-wrapper          { padding: 5em 0; }
.tweet                    { display: inline-block; background: white; padding: 5px 15px; }
.tweet p                  { color: #263238 !important; }
.tweet-header img         { width: 15%; max-width: 48px; }
.tweet-header img,
.tweet-header p           { display: inline-block !important; margin-right: 10px; vertical-align: middle; color: grey !important; font-size: 1.15em; }
/* .tweet-body               { height: 120px; margin-bottom: 10px; } */
.tweet-body p             { margin-top: 0; }
.tweet-footer             { margin-top: 10px; }
.tweet-footer p           { text-align: right; color: grey !important; margin: 0; }
.slick-prev               { left: -55px !important; height: 50px !important; width: 50px !important; }
.slick-next               { right: -55px !important; height: 50px !important; width: 50px !important; }
.slick-prev:before,
.slick-next:before        { font-size: 40px !important; color: rgb(0, 151, 167) !important; }

/* Plans Page */
#plans-content       { display: inline-block; margin: auto; }
.plan                { display: inline-block; vertical-align: middle; text-align: center; margin-right: 20px; }
.plan-wrapper        { display: inline-block; vertical-align: middle; height: 550px; width: 300px; padding: 0 30px; background: #D8E7E9; overflow: hidden; position: relative; }
.plan-header         { background: rgb(0, 151, 167); color: white; height: 50px; display: flex; align-items: center; justify-content: center; }
.plan-header h6      { margin: 0; font-weight: bold; }
.plan-title          { margin-top: 75px; height: 80px; }
.plan-title h5       { font-weight: 300; margin-bottom: 30px; height: 25px; display: flex; align-items: center; justify-content: center; }
.plan-title p        { margin: 0; }
.plan-price          { margin: 70px 0 50px 0; height: 70px; }
.plan-price a        { text-decoration: underline; color: rgb(0, 151, 167); }
.plan-price a,
.plan-price strong   { font-weight: bold; }
.plan-price h5       { font-weight: bold; }
.plan-button         { margin: 50px 0; }
.plan-summary p      { margin: 0; }
#plans-questions     { background: #BCBEC0; color: white; margin-bottom: 0; padding-bottom: 50px; }
#plans-questions h4  { color: white; }
#plans-questions h5  { font-size: 1.2rem; font-weight: bold;}
#plans-questions p   { margin-top: 30px; font-weight: 300; }
.plan-question       { padding: 30px 0; border-bottom: 1px solid white; }
.plan-question:last-child { border-bottom: none; }
#plan-wrapper-footer { background: rgb(0, 151, 167); color: white; height: 50px; display: flex; align-items: center; justify-content: center; margin-top: 10px; }
#plan-wrapper-footer h6 { font-weight: 300; }
#individual-plan     { margin-right: 0; }
.modal-footer        { background-color: #0097a7 !important; }
.modal-content h4    { font-weight: 300; }

/* Registration */
.plan-selection            { background: white; display: inline-block; vertical-align: middle; width: 32%; border: 1px solid black; height: 300px; position: relative; overflow: hidden; text-align: center; padding: 0 50px; transition: 0.1s ease;}
.plan-selection:last-child { margin-right: 0; }
.plan-selection h5         { height: 45px; }
.plan-selection:hover,
.plan-selection:focus,
.plan-selection.active     { background: #263238; color: white; cursor: pointer; }
.p-exception               { max-width: 100% !important; }
#plan-selection-wrapper    { margin-top: 50px; display: inline-block; text-align: center; margin-bottom: 25px; }
.registration-section      { background: white; border: 1px solid grey; padding: 25px; margin: 25px 0; }
.registration-header h5    { font-weight: bold; font-size: 1.25rem; padding: 0 10px; }
.total-wrapper             { background: #263238; color: white; height: 100px; }
.total-wrapper p           { margin: 0; text-align: center; font-weight: 300; }
.total-section             { display: inline-block; vertical-align: middle; }
.total-section h5          { font-weight: bold; }
#registrationForm          { display: none; }
#registration-total        { margin-bottom: 1px; }
#registration-total-2      { display: flex; align-items: center; justify-content: center; margin-top: 0; }
#submitBtn                 { width: 300px; float: right; margin-top: 30px; }
#registration-total,
#registration-total-2      { display: none; }
#prices                    { float: right; text-align: right; }
#total-line-1              { font-weight: bold; font-size: 1.75rem; margin: 0; }
#total-line-1.free         { margin-top: 25%; }
#total-line-2              { font-size: 1.25rem; margin: 5px 0 0 0; }
#registration-total-2      { margin-bottom: 0; }

#registration-authorization           { display: none; }
#data-collection-authorization label,
#registration-authorization label     { color: black; font-weight: 400; }
#data-collection-authorization a      { font-weight: bold; text-decoration: underline; color: black; }

/* events */

.title-description-card   { font-family: Roboto; font-style: normal; font-size: 30px; line-height: 140%; }
.event-date               { font-size: 36px; font-weight: bold; margin-right: 5px; }
.event-date-day           { font-size: 34px; font-weight: 100; }
.event-time               { font-size: 24px; font-weight: 100; }
.event-title              { margin: 0; font-size: 30px; }
.event-summary            { margin: 0; font-size: 24px; }
.event-row                { margin: 60px 0; }
.event-trigger            { color: rgb(0, 151, 167); font-size: 16px; font-weight: bold; }
.event-modal h4           { font-weight: bold; }
.event-modal .event-detail { margin: 20px 0; }
.event-modal span         { display: block; font-size: 20px; }
.event-detail-span        { margin-top: 10px; }
.no-events                { margin-top: 60px; }
.past-container           { margin-bottom: 75px; }
.past-container a         { margin-top: 20px; }
.boldish                  { font-weight: 500; }

/* footer */
#mc-embedded-subscribe { background: #263238 !important; border: none !important; padding: 0px 30px !important; border-radius: 0 !important; border: none !important; box-shadow: none !important; margin-left: -4px !important; }
#mce-EMAIL { border-radius: 0 !important; border: none !important; box-shadow: none !important; }



/* FAQ */
#questions            { margin-bottom: 6vh; }
.question             { border-top: 3px solid #939598; padding: 15px; transition: all .3s ease-out; }
.question span        { color: #939598; font-weight: bold; }
.question:hover,
.question.active      { background: white; cursor: pointer; }
.question:hover span,
.question.active span { color: rgb(0, 151, 167) !important; }
.question.bottom      { border-bottom: 3px solid #939598; }
.question             { font-size: 1.2rem; }
.answer               { display: none; transition: all .3s ease-out; }
.answer.expanded      { display: block; }
.faq-icon             { float: right; transition: all .3s ease-out; }
.faq-icon.expanded    { -moz-transform: scale(1, -1); -webkit-transform: scale(1, -1); -o-transform: scale(1, -1); -ms-transform: scale(1, -1); transform: scale(1, -1); }

/* Footer */
#footer           { background: rgb(0, 151, 167); margin: 0; padding: 4vh 0; color: white; z-index: 100; }
#footer  h4       { margin-bottom: 4vh; font-weight: 300; color: white; }
.footer-btn       { background: transparent; box-shadow: none; border: 1px solid white; border-radius: 5px; padding: 20px 55px; margin-right: 20px; font-weight: bold; line-height: 0px; width: 265px; transition: all .3s ease-out;}
.footer-btn:hover { background: white; color: rgb(0, 151, 167); box-shadow: none; }
.footer-titles    { margin: 0; }
.footer-logo      { vertical-align: super; max-width: 150px; display: inline-block; margin: 0 20px; }
.center-align .footer-logo { max-width: 200px;}
.footer-link

/* Cards */
.card-title    { font-weight: bold !important; }
.card-action a { color: #0097a7 !important; text-transform: none !important; font-weight: 500 !important; }

/* Tables */
thead { font-weight: bold; }

.dtrg-group {
  text-transform: capitalize;
}


/* Shapes */
.free-chevron:before {
  content: '';
  position: absolute;
  top: -5px;
  height: 35px;
  width: 50px;
  left: 44%;
  background: #FAAF4B;
  -webkit-transform: skew(0deg, -25deg);
  -moz-transform: skew(0deg, -25deg);
  -ms-transform: skew(0deg, -25deg);
  -o-transform: skew(0deg, -25deg);
  transform: skew(0deg, -25deg);
}

.free-chevron:after {
  content: '';
  position: absolute;
  top: -5px;
  height: 35px;
  width: 50px;
  left: 44%;
  background: #FAAF4B;
  -webkit-transform: skew(0deg, 25deg);
  -moz-transform: skew(0deg, 25deg);
  -ms-transform: skew(0deg, 25deg);
  -o-transform: skew(0deg, 25deg);
  transform: skew(0deg, 25deg);
}

#free-span {
  color: white;
  position: absolute;
  top: 5px;
  text-align: center;
  z-index: 10;
  font-weight: bold;
  font-size: .85rem;
  width: 50px;
  left: 44%;
}


/* Responsive */
@media screen and (max-width: 425px) {
  nav                  { padding: 15px 20px; }
  .brand-logo img      { margin-top: 7px; width: 40px; }
  .support-category    { height: 185px; }
  .support-category a  { font-size: 1.1rem; }
  #second-org-plan,
  #individual-plan     { margin-top: 30px; }
  .plan-header         { width: 300px; margin: auto; }
  .plan                { margin-right: 0; }
  #plan-wrapper-footer { width: 300px; margin: 20px auto; padding: 45px; }
  .plan-selection      { width: 75%; margin: 10px 0; padding: 0 25px; }
  #total-line-1        { font-size: 1.25rem; margin-top: 8px; }
  #total-line-1.free   { margin-top: 15px; }
  #total-line-2        { font-size: 1rem; }
  #support-sub         { font-size: 50px !important; width: 100%; line-height: 1.25; }
  .breadcrumb          { font-size: .8rem; }
  .breadcrumb:before   { font-size: .8rem }

  .date-card-month          { margin: auto; }
  .title-description-card   { margin-top: 30px; border-bottom: 1px solid grey; padding-bottom: 20px !important; }
  .divider-button      { padding: 5px 15px;}
}

@media screen and (min-width: 426px) and (max-width: 768px) {
  .brand-logo img         { margin-top: 6px; }
  .slick-prev             { left: -45px !important; }
  .slick-next             { right: -45px !important; }
  #individual-plan        { margin-top: 50px; }
  #plan-wrapper-footer    { height: 100px; margin-top: 50px; padding: 50px; }
  #plan-wrapper-footer h6 { font-size: 1.25rem; }
  .free-chevron           { margin-left: -10px; }
  .plan-selection         { padding: 0 10px; }
  .plan-price             { margin-top: 90px; }
}

@media screen and (max-width: 600px) {
  .bottom-first { border-bottom: none !important; }
  .footer-btn   { margin-bottom: 10px; margin-right: 0; }
}

@media screen and (max-width: 992px) {
  .flex          { display: flex; flex-direction: column; }
  .box-a         { order: 2; }
  #faq-container { float: none; }
  .question span { font-size: .95rem; }
  #support-nav          { display: none; }
  .supportpagecontent   { padding: 3vh 30px 0 30px !important; margin-left: 0px; }
}

@media screen and (min-width: 900px) and (max-width: 1047px) {
  .plan-wrapper        { width: 250px; padding: 0 15px; }
  .plans-container     { width: 90% !important; }
  #plan-wrapper-footer { padding: 5px; }
  .plan-title          { margin-top: 50px; }
  .plan-price          { margin-top: 90px; }
}

@media screen and (min-width: 993px) and (max-width: 1335px) {
  nav ul li        { margin-left: 10px; }
  .plans-container { width: 90% !important; }
}

@media screen and (min-width: 769px) {
  #organization-plans .free-chevron {     margin-left: -30px; }
  .free-chevron { margin-left: -50px; }
}

.select-wrapper+label {
  font-size: inherit !important;
}

* {
  font-family: 'Roboto';
}

button, input, optgroup, select, textarea {
  font-family: 'Roboto';
}