html, body { height: 100%; margin: 0px; color: #526066; background-color: #000; }
body { display:none; }

/* CHROME */

#progress-bg{ width: 100%; position: fixed; top: 0; left: 0; height: 10px; z-index: 900; background-color: #111; }
#progress{ width: 0%; position: fixed; top: 0; left: 0; height: 10px; z-index: 1000; background-color: #b49b12;  }

.icon-logo img{ position: fixed; top: 42px; left: 45px; width:45px; display: inline-block; cursor:pointer;z-index:100; transition: all .5s; }
.icon-hamburger { position: fixed; top: 42px; right: 45px; display: inline-block; cursor:pointer;z-index:100; transition: all .5s; }

.icon-open { cursor: pointer; }
.icon-close { position: absolute; top: 15px; right: 20px; display: inline-block; float: right; height: 18px; width: 18px; padding: 4px 0 4px 14px; margin: 38px 34px 0 0; cursor: pointer; opacity: .3; transition: all .5s; }
.icon-close:hover { opacity: 1; transition: all .5s;}
.icon-close:after, .icon-close:before { width: 2px; height: 20px; border-left: 4px solid #ffffff; content: ""; position: absolute; pointer-events: none; }
.icon-close:after { -webkit-transform: skew(-42deg); transform: skew(-42deg); }
.icon-close:before { -webkit-transform: skew(42deg); transform: skew(42deg); }
.icon-open {opacity: 1;}
.icon-open:hover, #home-button:hover {opacity: .75; transition: all .5s; }

.icon-contact-close { position: absolute; top: 15px; right: 20px; display: inline-block; float: right; height: 18px; width: 18px; padding: 4px 0 4px 14px; margin: 38px 34px 0 0; cursor: pointer; opacity: .3; transition: all .5s; }
.icon-contact-close:hover { opacity: 1; transition: all .5s;}
.icon-contact-close:after, .icon-contact-close:before { width: 2px; height: 20px; border-left: 4px solid #ffffff; content: ""; position: absolute; pointer-events: none; }
.icon-contact-close:after { -webkit-transform: skew(-42deg); transform: skew(-42deg); }
.icon-contact-close:before { -webkit-transform: skew(42deg); transform: skew(42deg); }

#menu-overlay { background-color: #222; z-index: 100; opacity: 1; height:100%; width:100%; position:fixed;left: 0; display:none;}
#menu-title a { margin-left:10%; font-family: 'Source Sans Pro', sans-serif; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; text-align: left; color: white; font-size: 20px; line-height: 1;display:block; margin-bottom: 20px; }
.menu-item a { margin-left:10%; font-family: 'Source Sans Pro', sans-serif; font-weight: 900; color: white; font-size: 40px; font-size: 3.5vh; letter-spacing: 1.5px; text-transform: uppercase; text-align: left; opacity: 0.2; text-decoration:none; transition: all .5s;}
.menu-item a:hover {opacity: 1; transition: all .5s;}
#menu-home a { font-family: 'Source Sans Pro', sans-serif; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; text-align: left; color: white; font-size: 14px; line-height: 1; opacity: 0.3; transition: all .5s;}
#menu-home a:hover {opacity: 1; transition: all .5s; color: #b49b12;}

#scroll-arrow { position:absolute;top:0;left:0;z-index:999;left:50%;margin-left:-40px; display:none;cursor:pointer; }

#contact-overlay { background-color: #222; z-index: 100; opacity: 1; height:100%; width:100%; position:fixed;left: 0; display:none; background-image:url('../images/bg-contact.jpg'); }
#contact-overlay h2{ display:block; color:#fff; font-size:32px; text-align:center; }
#contact-overlay h3{ display:block; color:#fff; margin-bottom:0; }
#contact-overlay input{ font-family: 'Source Sans Pro', sans-serif; font-weight: 400; font-size: 16px; line-height: 1.4; }
#contact-overlay textarea{ font-family: 'Source Sans Pro', sans-serif; font-weight: 400; font-size: 16px; line-height: 1.4;  }


/* HOME INTRO */

#intro-overlay { background-color: #000; z-index: 200; opacity: 1; height:100%; width:100%; position:absolute; left: 0; overflow:hidden; margin-top:0;
-webkit-transition: all 800ms cubic-bezier(1.000, 0.080, 0.930, 0.430); 
   -moz-transition: all 800ms cubic-bezier(1.000, 0.080, 0.930, 0.430); 
     -o-transition: all 800ms cubic-bezier(1.000, 0.080, 0.930, 0.430); 
        transition: all 800ms cubic-bezier(1.000, 0.080, 0.930, 0.430);
}
#intro-overlay video { position:absolute; top:0; left:0; min-width: 100%; min-height: 100%; width: auto; height: auto; opacity:0.35; background-size: cover; z-index:-1;  }
#intro-overlay .height{ height:100%; }
#intro-overlay table{ z-index:100; }
#intro-overlay h3{ color: #fff; font-family: 'Source Sans Pro', sans-serif; line-height: 1.2; letter-spacing: 0px; text-transform: uppercase; font-weight: 900; font-size: 2vw; text-align:left; margin:0; padding:0; opacity:0; transition: all 1s; }
#intro-overlay #stats{  text-align:center; color: #fff; font-family: 'Source Sans Pro', sans-serif; text-transform: uppercase; font-weight: 700;  font-size: 20em;line-height:1; margin:0; padding:0; display:none; }
#intro-overlay .byline{  text-align:center; }
#intro-overlay a{ display:inline-block;border:2px solid #fff; padding:15px 28px; color: #fff; font-family: 'Source Sans Pro', sans-serif; line-height: 1.2; letter-spacing: 1px; text-transform: uppercase; font-weight: 900; font-size: 1vw; opacity:0; transition: all 0.3s;  }
#intro-overlay a:hover{ background-color: #fff; color:#000000; }

.numCounter { color: #fff; display: inline-block; height: 280px; line-height: 280px; white-space: normal; overflow: hidden; }
.numCounter > b { display: inline-block; width: 168px; height: 100%; margin: 0; text-align: center; overflow: hidden; }
.numCounter > b:before { content: ' 0 1 2 3 4 5 6 7 8 9 '; display: block; word-break: break-all; word-break: break-word; -webkit-transition: 1.4s cubic-bezier(0.12, 0.78, 0.52, 1.2); transition: 1.4s cubic-bezier(0.12, 0.78, 0.52, 1.2); }
.numCounter > b.d0 { -webkit-transition: 0.4s cubic-bezier(0.12, 0.78, 0.52, 1.2); transition: 0.4s cubic-bezier(0.12, 0.78, 0.52, 1.2); opacity:0; }
.numCounter > b.d1:before { margin-top: -280px; }
.numCounter > b.d2:before { margin-top: -560px; }
.numCounter > b.d3:before { margin-top: -840px; }
.numCounter > b.d4:before { margin-top: -1120px; }
.numCounter > b.d5:before { margin-top: -1400px; }
.numCounter > b.d6:before { margin-top: -1680px; }
.numCounter > b.d7:before { margin-top: -1960px; }
.numCounter > b.d8:before { margin-top: -2040px; }
.numCounter > b.d9:before { margin-top: -2520px; }

/* VIDEO PANEL */

#panel-hero-video { position:relative;height:100%;width:100%;background-color: #000; z-index:0; overflow:hidden; }
#panel-hero-video video, #hero-image { position:fixed; min-width: 100%; min-height: 100%; width: auto; height: auto; background: #000 url('') no-repeat; background-size: cover; background-position: center;}
#panel-hero-video #caption { color: white; font-size: 5vh; font-weight: 300; z-index:1000;position:absolute;top:45%;width:100%; }
#panel-hero-video #caption #cardone-is { margin-left:10%; padding-right: 0.33em;  }
#panel-hero-video #caption .words { display: inline; } 
#panel-hero-video #caption .words span{ position: absolute; opacity: 0; overflow: hidden; width: 70%; font-weight: 700;}
#panel-hero-video #caption .rotate span{ -webkit-animation:  rotateWord 5s ease-out forwards; animation:  rotateWord 5s ease-out forwards; animation-iteration-count: 1 }
#panel-hero-video #caption .words span:nth-child(1) {}
#panel-hero-video .arrow{ position:absolute;bottom:50px;left:50%;margin-left:-40px; cursor:pointer; }
#panel-hero-video .arrow img{ width:80px; }

@-webkit-keyframes rotateWord {
    0% { opacity: 0; }
    15% { opacity: 0; -webkit-transform: translateY(-30px); }
    35% { opacity: 1; -webkit-transform: translateY(0px);}
	100% { opacity: 1; -webkit-transform: translateY(0px);}
}
@-ms-keyframes rotateWord {
    0% { opacity: 0; }
    15% { opacity: 0; -ms-transform: translateY(-30px); }
    35% { opacity: 1; -ms-transform: translateY(0px);}
	100% { opacity: 1; -ms-transform: translateY(0px);}
}
@keyframes rotateWord {
    0% { opacity: 0; }
    15% { opacity: 0; -webkit-transform: translateY(-30px); transform: translateY(-30px); }
    35% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px);}
	100% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px);}
}

/* CONTENT GLOBALS */

#panel-content { background-color:#fff; position:relative;}

.table { display: table; width: 100%; height: 100%; }
.table-cell { display: table-cell; height: 100%; vertical-align: middle; }

h2 { font-family: 'Source Sans Pro', sans-serif; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; text-align: left; color: white; font-size: 4.5vw; line-height: 1.05; }
h3 { font-family: 'Source Sans Pro', sans-serif; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; text-align: left; color: #111111; font-size: 18px; padding: 5px 0 10px 0; }
h4 { font-family: 'Source Sans Pro', sans-serif; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; text-align: left; color: #111111; font-size: 14px; padding: 5px 0 0 0; }

.bars h3 { font-size: 2.2vh; }


#panel-content p, ul { font-family: Georgia, Times, Serif; font-size: 18px; line-height: 1.7; color: #666666; padding-bottom: 20px; }
#panel-content p.caption { font-family: 'Source Sans Pro', sans-serif; font-weight: 700; font-size: 14px; line-height: 1.4; text-transform: uppercase; letter-spacing: 1.5px;}
#panel-content p.subcaption { font-family: 'Georgia', serif; font-style: oblique; font-size: 16px; line-height: 1; color: #ccc; padding:0; }
#panel-content p.quote { font-family: 'Georgia', serif; font-style: oblique; font-size: 24px; line-height: 1.5; color: #000; }
#panel-content p a { font-style: oblique; text-decoration: none; border-bottom: dotted 1px black; color: black; transition: all .3s; }
#panel-content p a:hover { color: #666; cursor: pointer; border-bottom: dotted 1px black; transition: all .7s; }
#panel-content a.audio { background-color: #b49b12; padding: 3px; cursor: pointer; text-decoration: none; border:0;  }
#panel-content a.audio:hover { border-bottom: none; color: black; opacity: .8; transition: all .7s; }
.audio-quote { display:inherit; }

::selection { background-color: #b49b12; }


a { text-decoration: none; }
a.audio { background-color: #b49b12; padding: 3px; cursor: pointer; text-decoration:none; border:0;  }

.banner { height: 1800px; width: 100%; margin:0; position:relative;overflow:hidden; background-color: #fff; }
.banner video { position:absolute; top:0; left:0; min-width: 100%; min-height: 100%; width: auto; height: auto; opacity:0.6; background-size: cover; }
.banner .bgouter{ position: absolute; clip: rect(auto, auto, auto, auto); width: 100%; height: 1800px;top:0;left:0; }
.banner .bgouter .bg{ background-size: cover; background-position: center; position: fixed; width: 100%; height: 100%; top:0;left:0; }
.banner h2 { display:table-cell; vertical-align:middle; width:80%; margin-left:10%; position:absolute; z-index:10; top:35%; }
.animation img { transition: 2.6s ease-out; }
.animation h2 { transition: 1.2s ease-out; letter-spacing:0; opacity:0; }

#related-grid .cropped{ overflow:hidden;position:relative; background-color: #ffffff; }
#related-grid .boxed{ background-repeat: no-repeat; background-position: center; background-size: cover; height: 400px; position:relative; overflow:hidden; transition: .6s ease-out;  }
#related-grid .boxed:hover { transform: scale(1.07); -ms-transform: scale(1.07); -moz-transform: scale(1.07); -webkit-transform: scale(1.07); -o-transform: scale(1.07); opacity:1; }
#related-grid .boxed video{ min-width: 100%; min-height: 100%; width: auto; height: auto; background: #000 url('') no-repeat; background-size: cover; }
#related-grid h3{ color: #fff; font-family: 'Source Sans Pro', sans-serif; line-height: 1; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 900; font-size: 24px; width:100%; text-align:center; pointer-events:none; position:absolute; top:188px; margin:0 auto; display:inline-block; }
#related-grid .pure-u-1-1{ position:relative; }
#related-grid .arrow-left{ position:absolute;top:50%;margin-top:-20px; left:40px; pointer-events: none; }
#related-grid .arrow-right{ position:absolute;top:50%;margin-top:-20px; right:40px; pointer-events: none; }
#related-grid .arrow-left img{ width:60px; }
#related-grid .arrow-right img{ width:60px; }

#home-header {background-color: #111; color: #666666; position:relative;  }
#home-header p { font-family: 'Source Sans Pro', sans-serif; line-height: 1.2; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; text-align: center; color: #666666; font-size: 18px; padding: 0; margin:0; }
#home-header #stripe {background-color: #2d2d2d; color: #666666; width:100%; position:absolute;bottom:0;  }
#home-header .logo img {display:table; margin: 0 auto; width: 150px;}

#footer {background-color: #111; color: #666666; position:relative; }
#footer p { font-family: 'Source Sans Pro', sans-serif; line-height: 1.2; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; text-align: center; color: #666666; font-size: 18px; padding: 0; margin:0; }
#footer #stripe {background-color: #2d2d2d; color: #666666; width:100%; }
#footer a.button{ display: table; margin-left: auto; margin-right: auto; border:2px solid #666666; padding:10px 20px; color: #666666; font-family: 'Source Sans Pro', sans-serif; line-height: 1.2; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; font-size: 14px; transition: all 0.3s;  }
#footer a.button:hover{ border:2px solid #ffffff; background-color: #fff; color:#111111; }
#footer a { color: #888; text-decoration:none; transition: all 0.3s; }
#footer a:hover{ color:#fff; }
#footer .contact { float:right;padding:20px 35px 20px 35px; }

#footer .logo img {display:table; margin: 0 auto; width: 150px;}
#footer .social a{ display:inline-block;padding:12px; opacity: 0.33; transition: all 0.3s; }
#footer .social a:hover{ opacity:1; }
#footer .social img{ height:17px; }

/* PAGES */


#excellent-logofarm .details img{ width: 150px; margin: 0 auto; display: table; padding: 30px 0; }
#excellent-piechart img {width: 100%;}
#excellent-questions { position: relative; left: 0; top: 0; right: 0; bottom: 0; }

#excellent-questions .question h3 { font-family: 'Source Sans Pro', sans-serif; font-weight: 700; font-size: 2vh; line-height: 1;  margin:0; text-transform: uppercase; letter-spacing: 1.5px; color:#b49b12; }
#excellent-questions .question p{ font-family: 'Source Sans Pro', sans-serif; font-weight: 700; font-size: 4.5vh; line-height: 1; margin:0; text-transform: uppercase; letter-spacing: .5px; color:#ffffff; }

#excellent-questions .answer h3{ font-family: 'Source Sans Pro', sans-serif; font-weight: 700; font-size: 2vh; line-height: 1;  margin:0; text-transform: uppercase; letter-spacing: 1.5px; color:#fff; }
#excellent-questions .answer p{ font-family: 'Source Sans Pro', sans-serif; font-weight: 400; font-size: 4.5vh; line-height: 1; margin:0;   text-transform:none;  letter-spacing: .5px; color:#fff; }

.question .answer { margin-top:10px; }
.answer p { cursor:pointer; transition: .2s ease-out; }
.question .answer p:hover { color: #b49b12 !important; }

#generous-logofarm .details img{ width: 150px; margin: 0 auto; display: table; padding: 30px 0; }
#generous-haitimap .overlay { background:transparent; position:relative; width:100%px; height:300px; top:300px; margin-top:-300px; }


#recognized-people .cropped{ overflow:hidden;position:relative; background-color: #ffffff; }
#recognized-people .boxed { background-repeat: no-repeat; background-position: center; background-size: cover; height: 500px; position:relative; overflow:hidden; transition: .6s ease-out;  }
#recognized-people .details img{ width: 90px; margin: 0 auto; display: table; padding-top: 20px; }
#recognized-people .details p{ padding:0; text-align:center; }
#recognized-people .caption { font-family: 'Source Sans Pro', sans-serif; font-weight: 700; font-size: 14px; line-height: 1.4; text-transform: uppercase; letter-spacing: 1.5px; }
#recognized-people .subcaption { font-family: 'Georgia', serif; font-style: oblique; font-size: 16px; line-height: 1; color: #ccc; }
#michael{ transition: all .5s; -webkit-transition: all .5s; z-index:10; }

#recognition-logofarm .details img{ width: 175px; margin: 0 auto; display: table; padding: 30px 0; }

#home-grid .cropped{ overflow:hidden;position:relative; background-color: #ffffff; }
#home-grid .boxed{ background-repeat: no-repeat; background-position: center; background-size: cover; height: 400px; position:relative; overflow:hidden;opacity:1; transition: .6s ease-out; }
#home-grid .boxed:hover{ transform: scale(1.07); -ms-transform: scale(1.07); -moz-transform: scale(1.07); -webkit-transform: scale(1.07); -o-transform: scale(1.07); }
#home-grid .boxed video{ min-width: 100%; min-height: 100%; width: auto; height: auto; background: #000 url('') no-repeat; background-size: cover; }
#home-grid h3{ color: #fff; font-family: 'Source Sans Pro', sans-serif; line-height: 1; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 900; font-size: 24px; width:100%; text-align:center; pointer-events:none; position:absolute; top:188px; margin:0 auto; }
#home-grid .come-in{ transform: scale(1); -ms-transform: scale(1); -moz-transform: scale(1); -webkit-transform: scale(1); -o-transform: scale(1); margin-top:0; opacity:1; }

#heritage-timeline {  }
#heritage-timeline .absolute { position:absolute; } 
#heritage-timeline .timeline { opacity:.1; color: #443f43; }
#heritage-timeline .timeline h5{ color: #4a7b8f; }
#heritage-timeline .timeline p{ font-family: 'Georgia', serif; line-height:150%; font-weight:400; font-size:18px;margin:0;padding:0; margin-top:10px; }
#heritage-timeline .timeline ul{ margin:0;padding:0; margin-top:10px;  }
#heritage-timeline .timeline li{ font-family: 'Georgia', serif; line-height:150%; font-weight:400; font-size:18px;margin:0;padding:0; }
#heritage-timeline .timeline-active { opacity:1; }
#heritage-timeline .circle{ margin:0 0 0 120px; width:18px; height:18px; border-radius:41px; font-size:16px; line-height:23px; color:#ffffff; background: #f4f4f4; border:6px solid #b49b12; position:relative; }
#heritage-timeline .circle-active{ margin:0 0 0 120px; width:18px; height:18px; border-radius:41px; font-size:16px; line-height:23px; color:#ceca00; background:#b49b12; border:6px solid #b49b12; position:relative; transition: 0.6s ease-out; }
#heritage-timeline .circle h5, .circle-active h5{ position: absolute; top:-19px; left:-100px; color: #b49b12; }
#heritage-timeline h5{ font-size: 1em; color: #959699;line-height:150%; font-family:'Source Sans Pro'; text-transform:uppercase; letter-spacing:0.5px; font-weight: 400; margin:0; padding:16px 0 6px 0; }
#heritage-timeline .fact{ opacity:0.1; transition: all .5s; display:inherit; }
#heritage-timeline .time-facts { width:540px;position:relative;margin:100px 100px 0 auto; }
#heritage-timeline #line { opacity:1; background:url('/images/bg-timeline.png'); }
#heritage-timeline #line h5 { top:auto; }
#heritage-timeline a { font-style: oblique; text-decoration: none; border-bottom: dotted 1px black; color: black; transition: all .3s; }



#leadership-triangles div {}
#leadership-triangles img {width: 60%; min-width: 250px; max-width: 450px; display: block; margin-left: auto; margin-right: auto; padding-top: 70px; padding-bottom: 70px;}
#leadership-triangles div #left {background-color: #666;}
#leadership-triangles div #right {background-color: #b49b12;}
#leadership-triangles p.triangle {color: #fff; text-align: center; padding-bottom: 50px;}
#leadership-book img {opacity:1; transition: .6s ease-out;}
#leadership-book img:hover {opacity:.9; transition: .6s ease-out;}

#community-oneword {width: 100%;}

#growing-offerings { position:absolute;bottom: 50px; width:100%; }
#growing-offerings div #block1, #growing-offerings div #block2, #growing-offerings div #block3 {height: 500px;}
#growing-offerings div #block1 { background-color: transparent; }
#growing-offerings div #block2 { background-color: transparent; }
#growing-offerings div #block3 { background-color: transparent; }
#growing-offerings p {color: #fff; font-size: 128px; text-align: center; padding-top: 140px; margin:0; font-family: 'Source Sans Pro', sans-serif; font-weight: 700; line-height: 1.4; text-transform: uppercase; letter-spacing: 1.5px; }
#growing-offerings h3 {color: #fff; text-align: center; }

#innovating-numbers { position:absolute; width:100%; }
#innovating-numbers div #block1, #growing-offerings div #block2, #growing-offerings div #block3 {height: 300px;}
#innovating-numbers div #block1 { background-color: transparent; }
#innovating-numbers div #block2 { background-color: transparent; }
#innovating-numbers div #block3 { background-color: transparent; }
#innovating-numbers h5 {color: #444; font-size: 64px; text-align: center; padding-top: 100px; margin:0; font-family: 'Source Sans Pro', sans-serif; font-weight: 700; line-height: 1.4; text-transform: uppercase; letter-spacing: 1.5px; }
#innovating-numbers h3 {color: #444; text-align: center; }

#eco-numbers div #block1, #growing-offerings div #block2, #growing-offerings div #block3 {height: 300px;}
#eco-numbers div #block1 { background-color: transparent; }
#eco-numbers div #block2 { background-color: transparent; }
#eco-numbers div #block3 { background-color: transparent; }
#eco-numbers h5 {color: #2bb673; font-size: 64px; text-align: center; padding-top: 100px; margin:0; font-family: 'Source Sans Pro', sans-serif; font-weight: 700; line-height: 1.4; text-transform: uppercase; letter-spacing: 1.5px; }
#eco-numbers h3 {color: #2bb673; text-align: center; padding-left: 20px; padding-right: 20px;}

.civics-title { vertical-align: top; top: 700px; }

#customer-youtubegrid .videoWrapper { position: relative; padding-bottom: 50%; /* 16:9 */ padding-top: 25px; height: 0;}
#customer-youtubegrid .videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}


.blueprint {
    -webkit-animation-name: spin;
    -webkit-animation-duration: 220000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;

    -moz-animation-name: spin;
    -moz-animation-duration: 220000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;

    -ms-animation-name: spin;
    -ms-animation-duration: 220000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    
    animation-name: spin;
    animation-duration: 220000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

/* CHART */

#draw { }

#chart { opacity:0; transition: .6s ease-out; position:relative; width:1140px; margin:0 auto; }
#chart h3{ color: #666; font-family: 'Source Sans Pro', sans-serif; font-weight: 400; line-height: 1.2; letter-spacing: 1px; text-transform: uppercase; font-weight: 900; font-size: 18px; }
#svg { width:1140px; height:400px; position:relative; }

.line { stroke-dashoffset:0; box-shadow: 10px 10px 1px black; }
.breakpoint{ -webkit-transform:scale(0); -ms-transform:scale(0); transform:scale(0); position:absolute; -webkit-transform-origin:50% 50%; }
.active{ -webkit-transform:scale(1); -ms-transform:scale(1); transform:scale(1) }

/* PULSE */

.pulse {
	width: 10px;
	height: 10px;
	border: 5px solid #fff;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
	background-color: #fff;
	z-index: 10;
	position: absolute;
	top: 405px;
	left: 1020px;
}

.dot {
	top: 380px;
	left: 995px;
	border: 10px solid #fff;
	background: transparent;
	-webkit-border-radius: 60px;
	-moz-border-radius: 60px;
	border-radius: 60px;
	height: 50px;
	width: 50px;
	-webkit-animation: pulse 3s ease-out;
	-moz-animation: pulse 3s ease-out;
	animation: pulse 3s ease-out;
	-webkit-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	position: absolute;
	z-index: 1;
	opacity: 0;
}

@-moz-keyframes pulse {
 0% {
    -moz-transform: scale(0);
    opacity: 0.0;
 }
 25% {
    -moz-transform: scale(0);
    opacity: 0.1;
 }
 50% {
    -moz-transform: scale(0.1);
    opacity: 0.3;
 }
 75% {
    -moz-transform: scale(0.5);
    opacity: 0.5;
 }
 100% {
    -moz-transform: scale(1);
    opacity: 0.0;
 }
}

@-webkit-keyframes "pulse" {
 0% {
    -webkit-transform: scale(0);
    opacity: 0.0;
 }
 25% {
    -webkit-transform: scale(0);
    opacity: 0.1;
 }
 50% {
    -webkit-transform: scale(0.1);
    opacity: 0.3;
 }
 75% {
    -webkit-transform: scale(0.5);
    opacity: 0.5;
 }
 100% {
    -webkit-transform: scale(1);
    opacity: 0.0;
 }
}

.waves
{
	width:100%;
	height:2000px;
	background:#000;
	position:absolute;
	top:840px;
	-ms-transform: scale(8,1);
	-webkit-transform: scale(8,1);
	transform: scale(8,1);
}

.wave
{
	width:100%;
	height:100%;
	position:absolute;
	left:-2em;
	background:bottom center repeat-x;
	animation-iteration-count:infinite;
	animation-timing-function:linear;
}

/* Individual wave layers */

.wave_1
{
  animation-name:wave_1;
  animation-duration:3400ms;
  animation-delay:-1200ms;
  top:-1900px;
  z-index:1;
  opacity:0.10;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="246" height="2000" viewBox="0 0 246 2000"><path fill-rule="evenodd" clip-rule="evenodd" fill="#338461" d="M0 2000c50.43 0 72.57-20.522 123-20.522 50.43 0 71.34 20.522 123 20.522V0H0v2000z"/></svg>'); 
  background-position:bottom left;
}

.wave_2
{
  animation-name:wave_2;
  animation-duration:3200ms;
  animation-delay:-600ms;
  top:-1900px;
  z-index:2;
  opacity:0.25;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="307" height="2000" viewBox="0 0 307 2000"><path fill-rule="evenodd" clip-rule="evenodd" fill="#338461" d="M0 0h307v2000c-64.47 0-90.563-25.623-153.5-25.623C90.565 1974.377 62.935 2000 0 2000V0z"/></svg>');
  background-position:bottom right;
}

.wave_3
{
  animation-name:wave_3;
  animation-duration:2800ms;
  animation-delay:-2400ms;
  top:-1900px;
  z-index:3;
  opacity:0.50;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="384" height="2000" viewBox="0 0 384 2000"><path fill-rule="evenodd" clip-rule="evenodd" fill="#338461" d="M0 0h384v2000c-80.64 0-113.28-32.047-192-32.047S78.72 2000 0 2000V0z"/></svg>');
  background-position:bottom center;
}

.wave_4
{
  animation-name:wave_4;
  animation-duration:2600ms;
  animation-delay:-1800ms;
  top:-1910px;
  z-index:4;
  opacity:0.75;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="480" height="2000" viewBox="0 0 480 2000"><path fill-rule="evenodd" clip-rule="evenodd" fill="#338461" d="M480 2000c-100.8 0-141.6-39.892-240-39.892S98.4 2000 0 2000V0h480v2000z"/></svg>');
  background-position:bottom left;
}

.wave_5
{
  animation-name:wave_5;
  animation-duration:3000ms;
  animation-delay:-3000ms;
  top:-1900px;
  z-index:5;
  opacity:1;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="600" height="2000" viewBox="0 0 600 2000"><path fill-rule="evenodd" clip-rule="evenodd" fill="#338461" d="M0 2000c123 0 177-49.866 300-49.866S474 2000 600 2000V0H0v2000z"/></svg>');
  background-position:bottom right;
  
}

/* Wave animations */

@keyframes wave_1
{
	from { transform: rotate(0deg)   translatey(-0.61em) rotate(0deg)    ; }
	to   { transform: rotate(360deg) translatey(-0.61em) rotate(-360deg) ; }
}

@keyframes wave_2
{
	from { transform: rotate(0deg)   translatey(-0.77em) rotate(0deg)    ; }
	to   { transform: rotate(360deg) translatey(-0.77em) rotate(-360deg) ; }
}

@keyframes wave_3
{
	from { transform: rotate(0deg)   translatey(-0.96em) rotate(0deg)    ; }
	to   { transform: rotate(360deg) translatey(-0.96em) rotate(-360deg) ; }
}

@keyframes wave_4
{
	from { transform: rotate(0deg)   translatey(-1.2em) rotate(0deg)    ; }
	to   { transform: rotate(360deg) translatey(-1.2em) rotate(-360deg) ; }
}

@keyframes wave_5
{
	from { transform: rotate(0deg)   translatey(-1.5em) rotate(0deg)    ; }
	to   { transform: rotate(360deg) translatey(-1.5em) rotate(-360deg) ; }
}



@-moz-keyframes spin {
	from { -moz-transform: rotate(0deg); }
	to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
	from { -webkit-transform: rotate(0deg); }
	to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
	from {transform:rotate(0deg);}
	to {transform:rotate(360deg);}
}

/* Added per Ryan to increase interest */

li{ list-style-type:none;padding:0; text-indent: -.9em; }
li:before { content: "\BB\ "; color: #b49b12; }
h3 { font-family: 'Source Sans Pro', sans-serif; font-weight: 200; letter-spacing: 0.5px; text-transform: uppercase; text-align: left; color: #b49b12; font-size: 26px; padding: 5px 0 10px 0; }
.banner h3 { font-family: 'Source Sans Pro', sans-serif; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; text-align: left; color: #111111; font-size: 18px; padding: 5px 0 10px 0; }


/* RESPONSIVE ADDITIONS */

@media (max-width: 500px) { 
	#footer .social{ float: none; width:160px; margin:0 auto !important;}
	.banner, .banner .bgouter { height: 600px;}
	.banner .bgouter .bg { }
}

@media (max-width: 768px) { 
	.icon-logo img { position: absolute; top: 32px; left: 30px; width: 30px; display: inline-block; cursor:pointer;z-index:100; transition: all .5s; }
    .icon-hamburger { position: absolute; top: 22px; right: 20px; display: inline-block; cursor:pointer;z-index:100; transition: all .5s; }
	
}

@media (max-width: 1024px) { 
	#panel-hero-video #caption .words { display: block; margin-left:10%; }
	#panel-hero-video video::-webkit-media-controls { display:none !important; }
	#home-grid video::-webkit-media-controls { display:none !important; }
	.audio { display:none; }
	.banner .bgouter .bg{ position: relative;  }
	.banner h2 { font-size: 7vw; }
	.civics-title { vertical-align: auto; top: auto; }
	.audio-quote { display:none; }
}
@media (max-width: 1200px) { 
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .banner .bgouter .bg{ position: absolute; }  }