/*
Theme Name: Travers Todd
Theme URI: https://traverstodd.com/
Author: The Travers + Todd team. Who else?
Author URI: https://traverstodd.com/
Description: This theme is like no other. Unless you're talking about a parallel universe. Then all bets are off. 
Version: 1.0
*/

@charset "utf-8";

/* CSS reset.  Why?  Because browser makers make the www difficult to style. Enough with that.  */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; }
body { line-height:1; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; }
ol, ul { list-style:none; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; }
a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; outline: none; text-decoration:none; }
ins { background-color:#ff9; color:#000; text-decoration:none; }
mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; }
table { border-collapse:collapse; border-spacing:0; }
input, select { vertical-align:middle; }
/* End the Reset.  Now let the games begin. */

*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
 
html{-webkit-font-smoothing:antialiased;}
body{line-height:1;-webkit-text-size-adjust:none; font-family: 'Lato', sans-serif;}
img {max-width: 100%; height: auto; display: inline-block; vertical-align: middle;}
p {line-height: 1.5em; font-size: 18px; margin-bottom: 25px;}
a { outline:none; text-decoration:none; color: rgb(89, 138, 196); }
a, .transition-015 { transition:all 0.15s ease-out; }
h1, h2, h3, h4, h5, h6 {line-height: 1.4em; font-weight:400; margin-bottom: 1em; }
h1 {font-size: 38px; margin-bottom: 20px;color: #007ecd;}
h2 {font-size: 36px; margin-bottom: 20px;}
h3 {font-size: 20px; margin-bottom: 15px; }
h4 {font-size: 18px; font-weight: bold;}
.sub-hero h4 {color: #fff;}
small { font-size: 80%;}
pre {font-family:"Courier New", Courier, monospace; letter-spacing: -0.5pt;}
ul, li { margin-bottom: 1em; }

/* animations + timings */
.hero-quad-img { transition: all 1s ease;}

/* reusable classes */
.inner { max-width: 1100px; margin: 0 auto; }
.hidden, .none, .hide { display: none; }
.invisible {visibility: hidden; }
.relative {position: relative;}
.absolute {position: absolute;}
.transparent { opacity: 0.0;}
.opaque { opacity: 1.0;}


/* micro clearfix below. contains floats like .clearfix. */
.cf:before, .cf:after { content: " "; display: table; }
.cf:after { clear: both; }

/* need to clear floats instead of contain them? use this below. */
.clear, .clear-both { clear: both; }

/* need to float things? we got you covered. */
.left, .floatleft { float: left !important; }
.right, .floatright { float: right !important; }


/* these are for images, below. gives a nice margin. sweet. */
.alignright { float: right; margin: 0 0 15px 15px;}
.alignleft { float: left; margin: 0 15px 15px 0;}
.floatnone { float: none; }

/* need a middle-aligned header. don't write another CSS rule. just use these! */
.text-left {text-align: left;}
.text-right {text-align: right;}
.text-center {text-align: center;}

/* need to add z-index?  Us these class? */
.z0 {z-index: 0;}
.z1 {z-index: 1;}
.z2 {z-index: 2;}
.z3 {z-index: 3;}
.z4 {z-index: 4;}
/* For a little extra reassurance */
.z99{z-index: 99;}

/* magic. many combinations exists with simplicity. */
.float20 { float: left; width: 20%;}
.float25 { float: left; width: 25%;}
.float33 { float: left; width: 33.3333%;}
.float50 { float: left; width: 50%;}
.float66 { float: left; width: 66.6667%;}
.float75 { float: left; width: 75%;}
.float80 { float: left; width: 80%;}

.inline25 { display: inline-block; width: 25%; margin-right: -4px; } 
.inline33 { display: inline-block; width: 33.3333%; margin-right: -4px; } 
.inline50 { display: inline-block; width: 50%; margin-right: -4px; vertical-align: top; } 
.inline66 { display: inline-block; width: 66.6666%; margin-right: -4px; } 

.vertical-middle {top: 50%; transform: translateY(-50%); display: inline-block; position: relative;}
.pad-right {padding-right: 3%;}
.pad-left {padding-left: 3%;}
.pad-btm-50 {padding-bottom: 50px;}
.pad-top-50 {padding-top: 50px;}

/* structure  */
.orb { background: rgb(255, 255, 255); height: 300px; border-radius: 50%; width: 300px;}
.flex { display: flex; }
.flex-middle { align-items: center; }
.bg-cover {background-size: cover; background-position: center center;}
.bg-cover.bg-cover--top {background-position: center top;}
.bg-cover.bg-cover--btm {background-position: center bottom;}

/* footer */
footer { background: #111; padding: 50px; }
footer .bg-img { position: absolute; width: 33.3333%; left: 0; top: 0; height: 100%; background-image: url(/images/heart-hands.jpg); background-size: cover; background-position: center; }
footer menu a { font-size: 18px; }
.tagline { padding: 20px; border: 1px dotted white; margin-bottom: 20px; }
.tagline h4 { margin-bottom: 0; }
.copyright { padding-top: 10px; margin-bottom: 0;}
footer .fa { font-size: 200%; }

/* decorators */
.white-text { color: white; }
.gray-text { color: #aaa; }

header {height: 100px; background-color: #fff; }
.logo img {height: 50px; height: 80px; margin-top: 15px; }
header menu {margin-top: 30px;}
header menu li {float:left; margin-right: 20px;}
header menu a {color: rgb(0, 126, 205); font-size: 18px;}
.header-donate {position: absolute; right: 0; top: 0; padding: 10px 30px; color:#fff; background-color: rgb(0, 126, 205); font-weight: 800; border-radius: 0 0 5px 5px; text-transform: uppercase;}
.hero {height: calc(95vh - 100px); min-height: 600px;}
.hero-quads {height: 100%; border: 2px solid white; background: #333; }
.hero-quad {height: 50%; border: 2px solid white; overflow: hidden; }
.hero-quad-img { position: absolute; width: 100%; height: 100%; transform: translate3d(0, -50px, 0); }
.hero-quad-img.opaque { opacity: 0.8; transform: translate3d(0, 0, 0);}
.hero-orb {position: absolute; width: 500px; height: 500px; border-radius: 50%; background-color: #fff; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 50px;}
.hero-orb h2 {font-size: 24px;color: #888; margin-bottom: 0; }
.sub-hero {padding: 50px 0; background-image: linear-gradient(-90deg,rgb(65, 117, 174), rgb(116, 162, 221));}
.sub-hero-content { padding: 20px 0; }
.sub-hero a { color: white; text-decoration: underline; }
.sub-hero .orb a { color: inherit; text-decoration: none; }
.sub-hero h2, .sub-hero p, .sub-hero h3 {color :#fff;}
.orb h2, .orb h3, .orb p { color: rgb(0, 128, 204); }
.tl-row { overflow: hidden;}
.tl-row:before, .tl-row:after { position: absolute; content: ""; border-left: 2px dotted rgb(89, 138, 196); }
.tl-row.orb-left:before { height: 100%; top: 0; left: calc(33.3333%/2); display: block; }
.tl-row.orb-right:before { height: 100%; top: 0; left: auto; right: calc(33.3333%/2); display: block;}
.tl-row:not(.last):after { bottom: 0; left: calc(33.3333%/2); width: 66.6667%; border-bottom: 2px dotted rgb(89, 138, 196); }



/* TIMELINE STUFF */
.timeline {background-color: #fff;}
.timeline-intro { padding: 70px 0; width:100%; max-width: 880px; margin:0 auto; border: 2px dotted rgb(0, 128, 204); border-top: none; }
.timeline-intro h2 strong {font-size: 70px; text-transform: uppercase;}
.tl-row {padding: 100px 0; }
.tl-orb { width: 33.3333%; }
.tl-content { width: 66.6666%; }
.orb-left {float:right;}
.orb-right {flex-direction: row-reverse;}
.orb-right .tl-orb {float:right;}
.orb-left .tl-content {padding-left: 3%;}
.orb-right .tl-content {padding-right: 3%;}
.tl-content-bg {background-color: #fff; padding: 5%;}

.tl-orb {background-image: linear-gradient(rgb(116, 162, 221),rgb(65, 117, 174)); height: calc((100vw - (100vw - 1100px))/3); border-radius:50%; padding:20px;}
.team-orb {background-image: linear-gradient(rgb(116, 162, 221),rgb(65, 117, 174)); height: calc((100vw - (100vw - 1100px))/4); width: 25%; border-radius:50%; padding:20px;}
.tl-orb h2, .lifemed-orb h2 {color: #fff; font-size: 36px;}

/* alzheimers */
.main-copy p:first-child {font-size: 1.3rem;}

/* form stuff */
.nf-form-content input[type="button"] {background: #007ecd !important; color: #fff !important; padding: 10px 20px; border-radius: 5px;}
.nf-form-content input[type="button"]:hover {background: #0468a6 !important}
.nf-form-fields-required {display:none;}
.nf-form-content label {color: #007ecd;}
.list-radio-wrap .nf-field-element li label {color: #333;font-size: 16px;}
.form-sidebar {background-color: #efefef; padding: 50px 15px;}
.nf-response-msg {background-color: #fff; padding: 3%;text-align: center; font-size: 26px !important; font-weight: 300; color: #0080cc;}
.nf-response-msg p {font-size: 20px;}
.nf-error.field-wrap .nf-field-element::after {background: #e80000 !important;}


/* Research Links */

.research-links { width: 80%; margin: 100px auto;}
.research-article { margin-top: 20px; padding: 10px; }

/* Our Mission */

.mission-container { min-height: 600px; }
.mission-copy { margin-top: 20px; }
.mission-paragraph { padding: 20px; }

/* Testimonials */
.testimonial-container { min-height: 600px; position: relative; text-align: center; }
.testimonial-section { margin-top: 75px; margin-bottom: 75px; }
.testimonial-section:last-child::after{ position: absolute; content: ""; border: 2px dotted rgb(89, 138, 196); height: 85px; overflow: hidden; margin-top: 266px; left: 50%; z-index: -1;}
.testimonial-orb {background-image: linear-gradient(rgb(116, 162, 221),rgb(65, 117, 174)); height: calc((100vw - (100vw - 1100px))/4); width: 25%; border-radius:50%; padding:20px; margin: 0 auto; display: inline-block; }
.block-right { display: inline-block; position: absolute; vertical-align: middle; text-align: left; width: 350px; padding-left: 75px; margin-top: 40px; }
.block-left { display: inline-block; position: absolute; vertical-align: middle; text-align: left; width: 300px; left: 0; margin-top: 40px; } 
.testimonial-orb::before{ position: absolute; content: ""; border: 2px dotted rgb(89, 138, 196); height: 80px; margin-top: -100px; overflow: hidden; z-index: -1; }


/* Our Team */
.team-container { min-height: 600px; position: relative; text-align: center; padding-bottom: 50px; }
.team-section { margin-top: 75px; }
.team-orb {background-image: linear-gradient(rgb(116, 162, 221),rgb(65, 117, 174)); height: calc((100vw - (100vw - 1100px))/4); width: 25%; border-radius:50%; padding:20px; margin: 0 auto; display: inline-block; }
.team-orb::before{ position: absolute; content: ""; border: 2px dotted rgb(89, 138, 196); height: 75px; margin-top: -100px; overflow: hidden; z-index: -1; }
.team-section:last-child::after{ position: absolute; content: ""; border: 2px dotted rgb(89, 138, 196); height: 85px; overflow: hidden; margin-top: 266px; left: 50%; z-index: -1;}
.modal { z-index: 20; }
.modal, .overlay { position: fixed; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; transform: scale(1.1); transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s; overflow: scroll;}
.overlay { background-color: rgba(0, 0, 0, 0.5); }
.modal-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; padding: 1rem 1.5rem;  border-radius: 0.5rem;}
.modal.show-modal, .show-modal .overlay { opacity: 1; visibility: visible; transform: scale(1.0); }
.close-button { float: right; width: 1.5rem; line-height: 1.5rem; text-align: center; cursor: pointer; border-radius: 0.25rem; background-color: lightgray; }
.close-button:hover { background-color: darkgray; }

/* Lifestyle Medicine */
.lifemed-container { min-height: 600px; position: relative; }
.lifemed-section { margin-top: 75px; margin-bottom: 75px; }
/* .lifemed-section:last-child::after{ position: absolute; content: ""; border: 2px dotted rgb(89, 138, 196); height: 85px; overflow: hidden; margin-top: 266px; left: 50%; z-index: -1;} */
.lifemed-orb {background-image: linear-gradient(rgb(116, 162, 221),rgb(65, 117, 174)); height: calc((100vw - (100vw - 1100px))/3); width: 100%; border-radius:50%; padding:20px; margin: 0 auto; display: inline-block; }
.lifemed-orb::before{ position: absolute; content: ""; border: 2px dotted rgb(89, 138, 196); height: 80px; margin-top: -100px; overflow: hidden; left: 50%; z-index: -1; }


/* Media Queries. Use these, modify breakpoints, add, or delete.  */



@media (max-width: 1100px){
    .inner { padding: 0 10px; }
    .half-1000 { width: 50%; }
    .full-1000 { float: none; width: 100%; display: block; }
    .tl-orb { height: 30vw; width: 30vw; }
    .testimonial-content:nth-child(odd) { display: block; position: relative;  padding: 0; margin: 50px auto;  text-align: center; width: 500px;}
    .testimonial-content:nth-child(even) { display: block; position: relative;  padding: 0; margin: 50px auto;  text-align: center; width: 500px; }
    .testimonial-orb::before{ display: none;}
}
@media (max-width: 1000px){
    .half-1000 { width: 50%; }
    .full-1000 { float: none; width: 100%; display: block; }
    .orb { margin: 0 auto; }
}

@media (max-width: 880px){
    .tl-orb { height: 30vw; width: 30vw; }
    .orb-left .tl-content { padding-left: 0; } 
    .tl-row { padding: 0; }
    .tl-row.orb-left:before { display: none; }
    .tl-row.orb-right:before { display: none; }
    .tl-row:not(.last):after { display: none; }
    .testimonial-orb { height: 30vw; width: 30vw; }
    .team-orb { height: 30vw; width: 30vw; }
    .lifemed-orb { height: 30vw; width: 30vw; }
    .block-left, .block-right { display: block;  position: relative; margin: 80px auto; padding: 0;  text-align: center; }
    .team-orb::before{ display: none; }
    .lifemed-orb::before{ display: none; }

@media (max-width: 800px){
    .half-800 { width: 50%; }
    .full-800 { float: none; width: 100%; display: block; }
    .stop-flex-800 { display: inherit; }
    .timeline-intro { border: none; }
    .tl-orb:before, .tl-orb:after { display: none;}
    .tl-orb { margin: 0 auto; float: none !important;  }
    .tl-content { width: inherit; padding: 30px 0;}
    footer .bg-img { display: none; }
    .research-article { float: none; margin: 0 auto; text-align: center; display: block; }

}

@media (max-width: 700px){
    .hero-orb h1 {font-size: 24px;}
    .tl-orb h2 {font-size: 28px;}
}

@media (max-width: 600px){
    .half-600 { width: 50%; }
    .full-600 { float: none; width: 100%; display: block; }
    h1 { font-size: 30px; }
    .hero-orb { width: 300px; height: 300px;}
    .hero-orb h2 { font-size: 16px; }
    .orb { margin: 0 auto; }
    .tl-row { padding: 0; }

}
@media (max-width: 500px){
    .half-500 { width: 50%; }
    .full-500 { float: none; width: 100%; display: block; }
    .timeline-intro h2 { font-size: 27px;}
    .tl-orb {height: 60vw; width: 60vw;}
    .tl-orb h2 { font-size: 27px; }
    .orb { margin: 0 auto; }
    .modal-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; padding: 1rem 1.5rem;  border-radius: 0.5rem; width: 400px; height: 500px; overflow: scroll;}

}
@media (max-width: 400px){
    .half-400 { width: 50%; }
    .full-400 { float: none; width: 100%; display: block; }
    .orb { margin: 0 auto; }
}
}