body, html {
    background-color: #fff;
    padding: 0 1em;
    margin: 0;
    font-family: "adelle-sans", sans-serif;
}
html {border-top: 1.5em solid #006b52;}
header {margin-bottom: 1em;}
.shell {
    max-width: 1400px;
    margin: 0 auto;
}
header h1 {
    color: #006b52;
    font-family: "adelle", serif;
    font-weight: 400;
    font-style: italic;
    line-height: 1;
    font-size: 2em;
    margin-top: 1em;
}
.logo-wrap {
    margin-bottom: -3em;
}
header .logo {
    max-width: 200px;
    width: 100%;
    top: -2em;
    position: relative;
    margin: 0 auto 1em;
    display: block;
}
.intro {margin-bottom: 1em;}
.owl-carousel {margin-bottom: 1.2em;}
p.larger {
    font-size: 1.2em;
    line-height: 1.4;
}
.viz-wrapper {
    margin: 0 auto;
    position: relative;
}
.steps {
    margin: 1em 0;
}
.steps div {margin-bottom: 1em;}
.steps .svg-inline--fa {
	height: 1.5em;
	color: #006485;
	margin-right: 0.5em;
	border: 1px solid #006485;
	padding: 0.5em;
	border-radius: 50%;
	width: 1.5em;
	box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}


/* /////  TIPS   ///// */

.teal-bg {background-color: #006b52;}
.blue-bg {background-color: #006485;}
.white-bg {background-color: #fff;}
.green-bg {background-color: #637a1d;}
.brown-bg {background-color: #a66c00;}
.teal-txt {color: #006b52;}
.blue-txt {color: #006485;}
.white-txt {color: #fff;}
.green-txt {color: #637a1d;}
.brown-txt {color: #a66c00;}
.tips .owl-carousel {
    width: 100%;
    position: relative;
    margin: 1.5em auto;
    text-align: center;
}
.owl-nav {
    font-size: 6em;
    line-height: 0.5;
    margin: 0 auto;
}
.owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev, .owl-carousel button.owl-dot {
  margin: 0 0.5em;
    font-weight: normal;
    color: #999;
}
.tips .tip {
    padding: 0.75em 2em;
    line-height: 1.1;
    text-align: center;
    font-size: 2em;
    font-weight: bold;
    border-radius: 0.5em;
}
.tips h2 {
    text-align: center;
    font-size: 2em;
    margin-top: 1.25em;
}
.note img {
    max-width: 150px;
    margin: 0 auto;
    display: block;
    width: 100%
}
.fineprint {
    margin: 2em 0 2em;
    padding: 0.5em 0 0.25em;
    border-top: 1px solid #bbb;
    border-bottom: 1px solid #bbb;
}
.fineprint p {
    font-size: 0.9em;
    font-style: italic;
    text-align: center;
}
.thanks {
    margin-bottom: 2em;
}
.thanks p {
    text-align: center;
    font-size: 0.9em;
}
.reveal#thanks {
    padding-right: 3em;
}
#thanks ul {
    margin-left: 0;
    list-style-type: none;
}


@media only screen and (min-width: 600px){
    
    header .logo {
        margin: 0;
    }
    .reveal#thanks {
        width: max-content;
    }
    
}