<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="https://fonts.googleapis.com/css?family=Abel|Crimson+Text|Playfair+Display+SC" rel="stylesheet">
<nav class="navbar navbar-trans navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-collapse collapse" id="navbar-collapsible">
<ul class="nav navbar-nav navbar-left">
<li><a href="#section1">MAN</a></li>
<li><a href="#section2">MIND</a></li>
<li><a href="#section3">MISSION</a></li>
<li><a href="#section4">VENUES</a></li>
<li><a href="#section5">CULTIVATE</a></li>
<li> </li>
</ul>
</div>
</div>
</nav>
<section class="container-fluid" id="section1">
<h1 class="text-center v-center">THE MAN</h1>
<div class="container">
<div class="row">
<div class="col-sm-12 text-center">
<div class="row">
<div class="col-sm-10 col-sm-offset-1 text-center">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://player.vimeo.com/video/220189667" width="960" height="540" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>
</div>
</div>
</div>
</div><!--/row-->
<div class="row"><br></div>
</div><!--/container-->
</section>
<section class="container-fluid" id="section2">
<div class="row">
<h2 class="text-center">THE MIND</h2>
<div class="container">
<div class="row">
<div class="col-sm-12 text-center">
<div class="row">
<div class="col-sm-10 col-sm-offset-1 text-center">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://player.vimeo.com/video/220166956" width="960" height="540" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="">
</div>
</iframe>
</div>
</div>
</div>
</div><!--/row-->
</div>
</div>
</div>
</section>
<section class="container-fluid" id="section3">
<h2 class="text-center">THE MISSION</h2>
<h3 class="text-center">LUCE MUNDI FOUNDATION</h3>
<div class="container">
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
<p>a non-profit organization advancing revolutionary
biotechnology in the arts</p>
<p>Creativity can regrow neural pathways, light can remove plaque that causes Alzheimer's and music can treat the symptoms of PTSD. Artists who create immersive, interactive experiences are poised to transform human neurobiology. Leveraging technologies like virtual reality, biofeedback, artificial intelligence and brain-computer interfaces, they are shifting the way we see and understand the arts. We support this next wave of innovative artists with financial resources while connecting them with acclaimed professors, museums, and elite research facilities around the world. We believe this synthesis of art, science and technology will spark a renaissance in human evolution and holistic wellness.</p>
</div>
</div>
</div>
</section>
<section class="container-fluid" id="section4">
<h2 class="text-center">THE VENUES</h2>
<div class="container">
<div class="row">
<div class="col-sm-10 col-sm-offset-1 text-center">
<p>S.E.E.D. will be unveiled at Nuit Blanche Toronto, Mutek MX, and Abierto Mexicano de Diseño in Mexico City in October 2017</p>
<img class="img-responsive margin-auto" src="http://devinfleenor.com/cultivate/i/logos.png">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://player.vimeo.com/video/221039459" width="960" height="540" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://player.vimeo.com/video/221037538"></iframe>
</div>
<p>S.E.E.D. will be showing at Museo Franz Mayer from October 11th - 23rd, 2017</p>
<img src="http://devinfleenor.com/cultivate/i/fleenor-mayer.jpg" class="img-responsive" alt="S.E.E.D." />
</div>
</div>
</div>
</section>
<section class="container-fluid" id="section5">
<div class="col-sm-10 col-sm-offset-1">
<h2 class="text-center">CULTIVATE LIGHT</h2>
<div class="container">
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
<p>Your contribution propels us forward in our mission and is received by The Luce Mundi Foundation, a 501(c)3 non-profit.</p>
<div>
<div class="spacer"></div>
<button class="joinus active"><img src="http://devinfleenor.com/cultivate/i/red-arrow.png" class="arrow">IVORY<span class="cost">$2,500</span><span class="call"><a href="/join-us/">JOIN US</a></span></button>
<div class="panel show">
<ul class="benefactor">
<li class="benefactor">Featured benefactor on devinfleenor.com</li>
<li class="benefactor">Featured benefactor on social media channels</li>
</ul>
</div>
<button class="joinus"><img src="http://devinfleenor.com/cultivate/i/red-arrow.png" class="arrow">AZURE<span class="cost">$5,000</span><span class="call"><a href="/join-us/">JOIN US</a></span></button>
<div class="panel">
<ul class="benefactor">
<li class="benefactor">In addition to the previous benefits...</li>
<li class="benefactor">The interactive S.E.E.D. story</li>
<li class="benefactor">Illuminated S.E.E.D. plaque</li>
</ul>
</div>
<button class="joinus"><img src="http://devinfleenor.com/cultivate/i/red-arrow.png" class="arrow">AMARANTH<span class="cost">$10,000</span><span class="call"><a href="/join-us/">JOIN US</a></span></button>
<div class="panel">
<ul class="benefactor">
<li class="benefactor">In addition to the previous benefits...</li>
<li class="benefactor">Two VIP passes to MUTEK MX</li>
<li class="benefactor">Exclusive access to VIP S.E.E.D. events in Toronto and Mexico City</li>
<li class="benefactor">Laser projection at a location of your choice</li>
</ul>
</div>
<button class="joinus"><img src="http://devinfleenor.com/cultivate/i/red-arrow.png" class="arrow">MIKADO<span class="cost">$25,000</span><span class="call"><a href="/join-us/">JOIN US</a></span></button>
<div class="panel">
<ul class="benefactor">
<li class="benefactor">In addition to the previous benefits...</li>
<li class="benefactor">You receive IKON: a one of a kind, interactive work of art </li>
<li class="benefactor">The interactive S.E.E.D. story: physical edition</li>
</ul>
</div>
<button class="joinus"><img src="http://devinfleenor.com/cultivate/i/red-arrow.png" class="arrow">MAGENTA<span class="cost">$100,000</span><span class="call"><a href="/join-us/">JOIN US</a></span></button>
<div class="panel">
<ul class="benefactor">
<li class="benefactor">In addition to the previous benefits...</li>
<li class="benefactor">The interactive S.E.E.D. story: virtual reality edition</li>
<li class="benefactor">[LIMIT 1] S.E.E.D. Submersion: a day with Devin Fleenor</li>
<li class="benefactor">[LIMIT 1] Be the first to interface with S.E.E.D. using your thoughts</li>
<li class="benefactor">[LIMIT 3] Present S.E.E.D. in a museum of your choice</li>
</ul>
</div>
<button class="joinus"><img src="http://devinfleenor.com/cultivate/i/red-arrow.png" class="arrow">ONYX<span class="cost">$250,000</span><span class="call"><a href="/join-us/">JOIN US</a></span></button>
<div class="panel">
<ul class="benefactor">
<li class="benefactor">In addition to the previous benefits...</li>
<li class="benefactor">Permanent S.E.E.D. tech installation in a space of your choice</li>
</ul>
</div>
</div>
</div><!--/row-->
</div><!--/container-->
</div>
</div>
</section>
<footer class="text-center"><img src="http://devinfleenor.com/cultivate/i/iconR.png"></footer>
/*
A custom Bootstrap 3.1 template
from http://bootply.com
This CSS code should follow the 'bootstrap.css'
in your HTML file.
license: MIT
author: bootply.com
*/
html,body {
height:100%;
background:center no-repeat fixed url('http://devinfleenor.com/wp-content/uploads/2017/04/devin-bg-darker.jpg');
background-size: cover;
color:#ddd;
font-family: 'Abel', sans-serif;
font-size: 18px;
}
h1,h2 {font-size:35px; letter-spacing: .5rem;}
h3 {
font-size: 1.1rem;
line-height: 1.5;
letter-spacing: .5rem;
margin-bottom:25px;
}
.icon-bar {
background-color:#fff;
}
.navbar-trans {
background-color:#279ddd;
color:#fff;
}
.navbar-trans li>a:hover,.navbar-trans li>a.active {
background-color:#38afef;
}
.navbar-trans a{
color:#aaa;
}
/*.navbar-trans .form-control:focus {
border-color: #eee;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(100,100,100,0.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(100,100,100,0.6);
}*/
section {
padding-top:0px;
padding-bottom:0px;
/* min-height:calc(100% - 1px);*/
}
.v-center {
padding-top:120px;
font-size:32px;
}
.well {
border-color:transparent;
}
a.list-group-item.active,[class*='-info'] {
background-color: #168ccc;
color:#fff;
}
/*#section1 {
background-color: #168ccc;
color:#dedeff;
}
#section2 {
background-color: #e5e5ef;
color:#686868;
}
#section3 {
background-color: #168ccc;
color:#ddd;
}
#section4 {
background-color: #fff;
color:#444;
}
#section5,#section7,#section7 a {
color:#f5f5f5;
}
#section6 {
background-color: #168ccc;
color:#ddd;
}*/
footer {
/* background-color:#494949;*/
color:#ddd;
min-height: 50px;
padding-top: 20px;
padding-bottom: 20px;
}
footer .nav>li>a {
padding:3px;
color:#ccc;
}
footer .nav>li>a:hover {
background-color:transparent;
color:#fff;
}
/**/
li.active a {
color: #dd0000;
}
.nav > li > a:hover, .nav > li > a:focus {
text-decoration: none;
background-color: transparent !important;
}
.nav.navbar-nav li {padding-left:30px; padding-right:60px;}
.nav.navbar-nav li {letter-spacing:2;}
.navbar {position: fixed;
z-index: 1;
background-color: rgba(17, 17, 17, 0.80);}
nav li > a {
font-size: .8em;
}
.margin-auto {margin:0 auto;}
button.joinus.active {
color: #eee;
font-size: 1.4rem;
}
button.joinus {
background: none;
cursor: pointer;
padding: 0 0 0 0;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 1.2rem;
transition: 0.4s;
margin: 0;
}
.active .cost {
display: inline-block;
color: #ddd;
padding-left: 10%;
font-size: 1.8rem;
}
.cost {
display: none;
}
.active .cost {
display: inline-block;
color: #ddd;
padding-left: 10%;
font-size: 1rem;
}
.active .call {
display: inline-block;
padding: 0 2% 0 2%;
margin-left: 8%;
font-size: 1.2rem;
border: 1px solid #dd0000;
cursor: pointer;
box-sizing: border-box;
border-radius: 4px;
}
.active .call a {color: #fff;}
.call {
display: none;
}
li.benefactor {
display: block;
letter-spacing: normal;
text-align: left;
word-spacing: normal;
white-space: normal;
margin: 0;
padding: 0;
width: 100%;
color: #ddd;
border-bottom: 1px solid #444;
padding: 10px 10px 10px 0px;
list-style: none;
}
ul.benefactor {
font-weight: 400;
font-size: 1rem;
font-family: 'Abel', sans-serif;
color: #FFFFFF;
margin: 0;
padding: 0;
width: 100%;
}
.joinus {padding-top:30px}
.panel {max-height: 0;
padding-left: 24px;
overflow: hidden;
padding-top: 0px;
transition: 0.6s ease-in-out;
opacity: 0;
margin: 0px 0px 0px 0px; background:none;}
div.panel.show {
opacity: 1;
max-height: 500px;
margin-bottom: 12px;
}
.spacer {padding:20px 0;}
.navbar-brand>img {
display: block;
margin-top: -18px;
}
.embed-responsive.embed-responsive-16by9 {
margin-bottom: 40px;
}
.nav>li {display:inline-block}
@media (max-width: 900px)
{
.nav.navbar-nav li {
padding-left: 30px;
padding-right: 30px;
}
}
@media (max-width: 767px)
{
.nav.navbar-nav li {
padding-left: 10px;
padding-right: 10px;
}
}
@media (max-width: 550px)
{
.nav.navbar-nav li {
padding-left: 0px;
padding-right: 0px;
}
}
.collapse {
display: block !important;
visibility: visible !important;
}
/* activate scrollspy menu */
$('body').scrollspy({
target: '#navbar-collapsible',
offset: 100
});
/* smooth scrolling sections */
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top - 50
}, 1000);
return false;
}
}
});
var df = document.getElementsByClassName("joinus");
var i;
function click_action(){
$('.joinus').removeClass('active');
$('.panel').removeClass('show');
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
$('html, body').animate({
scrollTop: $(this).offset().top
}, 100);
}
for (i = 0; i < df.length; i++) {
df[i].onclick = click_action;
}
