style.css

@font-face {
    font-family: 'novecento';
    src: url('fonts/novecentosanswide_light/Novecentosanswide-Light-webfont.eot');
    src: url('fonts/novecentosanswide_light/Novecentosanswide-Light-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/novecentosanswide_light/Novecentosanswide-Light-webfont.woff2') format('woff2'), url('fonts/novecentosanswide_light/Novecentosanswide-Light-webfont.woff') format('woff'), url('fonts/novecentosanswide_light/Novecentosanswide-Light-webfont.ttf') format('truetype'), url('fonts/novecentosanswide_light/Novecentosanswide-Light-webfont.svg#novecento_sans_widelight') format('svg');
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: 'Open Sans';
    src: url('fonts/opensans/regular/OpenSans-Regular.eot');
    src: url('fonts/opensans/regular/OpenSans-Regular.woff2') format('woff2'), url('fonts/opensans/regular/OpenSans-Regular.woff') format('woff'), url('fonts/opensans/regular/OpenSans-Regular.ttf') format('truetype'), url('fonts/opensans/regular/OpenSans-Regular.svg') format('svg');
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: 'Open Sans';
    src: url('fonts/opensans/light/OpenSans-Light.eot');
    src: url('fonts/opensans/light/OpenSans-Light.woff2') format('woff2'), url('fonts/opensans/light/OpenSans-Light.woff') format('woff'), url('fonts/opensans/light/OpenSans-Light.ttf') format('truetype'), url('fonts/opensans/light/OpenSans-Light.svg') format('svg');
    font-weight: 300;
    font-style: normal
}

.exit-button,
.nav-button,
.action-button,
.read-more,
.social-box {
    -webkit-transition: all 200ms ease;
    transition: all 200ms ease
}

span.social-box i.social-inner {
    color: #fff
}

span.social-box i.social-outer {
    color: #59c7ed
}

p>a {
    text-decoration: underline;
    color: #17c28c
}

p>a:hover {
    color: #00a3da
}
ul.enum {
  list-style: none;
  margin-left: 0;
  padding: 0;
}
.enum li {
  padding-left: 1.2em;
  font-size: 1.7rem;
    font-weight: 100;
    margin-bottom: 0.3rem;

}
.enum-pos li::before {
  content: '\2713'; /* FontAwesome char code inside the '' */
}
.enum-neg li::before {
  content: '\2717'; /* FontAwesome char code inside the '' */
}

.enum li:before {

  font-family: FontAwesome; /* FontAwesome or whatever */
  display: inline-block;
  width: 1.2em; /* same as padding-left set on li */
  margin-left: -1.2em; /* same as padding-left set on li */
}​


#how-to-section img {
    display: block;
    margin: auto
}

#how-to-section h3 {
    display: block;
    border: 0;
    text-align: center
}

span.social-box:hover i.social-inner {
    color: #fff
}

span.social-box:hover i.social-outer {
    color: #a9d6ef
}

body {
    font-family: 'Open Sans'
}

.row-line {
    border-top: 2px #fff solid
}

.row-items {
    padding: 30px 0
}

.landing-container {
    min-height: 100vh;
    margin-top: 10px
}

#waypoint {
    -vendor-animation-delay: 1s
}

#msform {
    margin: 50px auto;
    text-align: center;
    position: relative
}

#msform fieldset {
    background: #fff;
    border: 0 none;
    border-radius: 3px;
    box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
    padding: 20px 30px;
    box-sizing: border-box;
    width: 80%;
    margin: 0 10%
}

#msform fieldset:not(:first-of-type) {
    display: none
}

#msform .action-button {
    background: #17c28c;
    font-weight: bold;
    color: #fff;
    border: 0 none;
    border-radius: 1px;
    cursor: pointer;
    padding: 10px 5px;
    margin: 10px 5px;
    width: 100%;
    font-size: 20pt;
    text-transform: uppercase
}

#msform .action-button:hover,
#msform .action-button:focus {
    background-color: #59c7ed
}

.fs-title {
    font-size: 15px;
    text-transform: uppercase;
    color: #2c3e50;
    margin-bottom: 10px
}

.fs-subtitle {
    font-weight: normal;
    font-size: 13px;
    color: #666;
    margin-bottom: 20px
}

.video {
    margin-top: 15px
}

#progressbar {
    margin-bottom: 30px;
    overflow: hidden;
    counter-reset: step
}

#progressbar li {
    list-style-type: none;
    color: #fff;
    text-transform: uppercase;
    font-size: 19px;
    float: left;
    position: relative
}

#progressbar li:before {
    content: counter(step);
    counter-increment: step;
    width: 30px;
    line-height: 30px;
    display: block;
    font-size: 25px;
    color: #fff;
    background: #17c28c;
    border-radius: 3px;
    margin: 0 auto 5px auto
}

#progressbar li:after {
    content: '';
    width: 100%;
    height: 2px;
    background-color: #000;
    position: absolute;
    left: -50%;
    top: 14px;
    z-index: -1
}

#progressbar li:first-child:after {
    content: none
}

#progressbar li.active:before,
#progressbar li.active:after {
    background: #59c7ed;
    color: #fff
}

body {
    background: url(img/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover
}

.tips-container {
    background-color: rgba(255, 255, 255, 0.8)
}

.icon-circle {
    display: inline-block;
    -moz-border-radius: 60px;
    -webkit-border-radius: 60px;
    border-radius: 60px;
    padding: 4px 7px;
    background-color: #fff
}

  #how-to-section, #ready-exit-section, #connect-section {
    background-color: rgba(255, 255, 255, 0.8)
}

 #not-convinced-section, #s-about {
    background-color: rgba(204, 241, 232, 0.9)
}

.container {
    margin-top: 0;
    margin-bottom: 0
}

.navbar {
    background-color: #00a3da
}

.landing-logo {
    max-height: 44px;
    display: block;
    margin: auto
}

.navbar .row {
    margin-top: 8px
}

.animated {
    -webkit-animation-duration: .3s;
    -moz-animation-duration: .3s;
    -ms-animation-duration: .3s;
    animation-duration: .3s
}

#landing-section {
    padding-top: 10px;
    padding-bottom: 30px
}

section {
    padding: 30px 0
}

a.anchor {
    display: block;
    position: relative;
    top: -60px;
    visibility: hidden
}

h1 {
    font-family: 'novecento', 'texgyreheros';
    text-transform: uppercase;
    font-weight: normal;
    text-align: center;
}

 .img-icons img {
   display: block;
    margin: 0 auto;

 }

h3 {
    font-family: 'novecento', 'texgyreheros';
    font-weight: bold;
    font-size: 16pt;
    border-bottom: 2px solid #17c28c;

    display: block;
    padding-bottom: 3px;
    text-transform: uppercase
}

#faq-section {
    background-color: rgba(204, 241, 232, 0.9)
}

.landing-nav ul li {
    display: inline;
    list-style-type: none
}

.nav-button:hover,
.nav-button:focus {
    text-decoration: none;
    background-color: #fff;
    color: #42bfeb
}

.nav-button {
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
    border: 2px #fff solid;
    padding: 3px 5px;
    text-decoration: none
}

.nav-button-media {
    color: #fff
}

.landing-twitter {
    border: 2px transparent solid;
    border-radius: 50%;
    padding-top: 4px;
    padding-bottom: 3px;
    padding-left: 2px;
    padding-right: 2px
}

.landing-twitter:hover {
    border: 2px #fff solid;
    border-radius: 50%
}

.landing-nav-media {
    margin-top: -4px
}

#landing-nav .fa-facebbok {
    padding-top: 30px
}

#landing-nav>.fa-circle {
    color: #d7b6b6
}

.fa-circle {
    color: #42bfeb
}

.main-nav ul li {
    list-style-type: none;
    display: inline-block;
    margin-right: 8px
}

.main-nav ul li a {
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 11pt;
    border-bottom: 2px transparent solid
}

.main-nav ul {
    margin-top: 5px;
    padding-left: 0
}

.sub-nav ul li {
    list-style-type: none;
    display: inline-block
}

.sub-nav ul {
    margin-top: 3px;
    padding-left: 0
}

.sub-nav {
    padding-left: 0;
    font-size: 11pt
}

.sub-nav ul li .button {
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
    border: 2px #fff solid;
    padding: 3px 5px;
    text-decoration: none
}

.sub-nav ul li .button:hover {
    background-color: #fff;
    color: #42bfeb
}

.navbar-logo {
    margin-top: 5px
}

.exit-button {
    font-family: 'novecento', 'texgyreheros';
    color: #cd6767;
    font-size: 3.5rem;
    text-transform: uppercase;
    background-color: #ff8300;
    width: 100%;
    color: #fff;
    padding: 5px 10px;
    display: block;
    margin-top: 15px;
    font-weight: bold;
    border: 4px #fff solid
}

.exit-button:hover,
.exit-button:focus {
    color: #ff8300;
    font-size: 3.5rem;
    text-transform: uppercase;
    background-color: #fff;
    width: 100%;
    padding: 5px 10px;
    text-decoration: none
}

.main-nav ul li a:focus {
    text-decoration: none
}



.nav-tabs>li.active>a,
.nav-tabs>li.active>a:hover,
.nav-tabs>li.active>a:focus {
    background-color: #17c28c;
    color: #fff;
    border: 0
}

.nav-tabs>li>a {
    background: #42bfeb;
    color: #fff;
    border-radius: 0;
    border: 0
}

.nav-tabs>li {
    background-color: #fff;
    margin-bottom: 5px
}

ul.nav-tabs {
    background-color: transparent;
    border: 0
}

i.fa.fa-circle:hover {
    color: #c53535
}

.donate-button {
    background-color: #ff8300
}

.fadeOut {
    -webkit-animation-duration: 0s;
    animation-duration: 0s
}

.navbar-nav>li>a {
    padding: 0;
    text-transform: uppercase;
    font-weight: bold;
    color: #fff
}

.navbar-nav>li {
    margin-right: 8px
}

.navbar-default .navbar-nav .main-nav>li>a {
    color: #fff;
    border-bottom: 2px transparent solid
}

.main-nav {
    padding-left: 1rem
}

.navbar-default .navbar-nav.main-nav>li>a:hover,
.navbar-default .navbar-nav.main-nav>li>a:focus {
    color: #fff;
    border-bottom: 2px #fff solid
}

ul.nav.navbar-nav.main-nav {
    margin-top: 15px
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: #fff
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: #59c7ed
}

.navbar-right a.nav-button {
    padding: 4px 7px
}

.navbar-default .navbar-nav>li>a {
    color: #fff
}

.navbar-right.navbutton:hover {
    background-color: #fff
}

.navbar-right>li>a.nav-button:hover,
.navbar-right>li>a.nav-button:focus {
    background-color: #fff;
    color: #42bfeb
}

@media (max-width:340px) {
    .landing-nav ul li:nth-child(1):after {
        content: "\A";
        white-space: pre;
        line-height: 25px
    }
}

@media (min-width:768px) and (max-width:991px) {
    .action-button {
        font-size: 16pt
    }
}

@media (max-width:767px) {
    .navbar-default .navbar-nav.main-nav>li>a:hover,
    .navbar-default .navbar-nav.main-nav>li>a:focus {
        border: 0
    }
    .action-button {
        font-size: 13pt
    }
    .navbar-default .navbar-nav.main-nav>li:hover {
        background-color: #17c28c
    }
    ul.main-nav {
        margin: 0
    }
    .main-nav {
        padding-left: 0
    }
    .navbar .nav-button {
        border: 0
    }
    .navbar-default .navbar-nav.main-nav>li {
        padding: 5px 0;
        margin: 0
    }
    .navbar-default .navbar-nav>li a {
        border-bottom: 0;
        display: block;
        text-align: center
    }
    .navbar-nav>li {
        margin-right: 0;
        padding: 0;
        border: 0
    }
}

.number-line>li {
    font-weight: bold;
    font-size: 1.2em;
    width: 2em;
    height: 2em;
    text-align: center;
    line-height: 2em;
    border-radius: 1em;
    background: #42bfeb;
    margin: 0 3em;
    display: inline-block;
    color: #fff;
    position: relative
}

ul.nav.navbar-nav.navbar-right {
    margin-top: 9px
}

.navbar-brand img {
    margin-top: -3px
}

.landing-nav ul li {
    margin-bottom: 5px;
    line-height: 34px
}

.landing-nav {
    margin-top: 9px
}

.landing-nav ul {
    padding: 0
}

@media (max-width:991px) {
    li.social-media-button {
        display: none
    }
    .landing-nav {
        text-align: center
    }
}

#progressbar li:last-child:before {
    content: 'exit';
    width: 70px
}

.navbar-collapse {
    padding-left: 0;
    padding-right: 0
}

@media (max-width:991px) {
    .navbar-nav {
        margin: 0
    }
}

@media (min-width:992px) {
    p {
        font-size: 14pt
    }
    .landing-nav {
        text-align: right
    }
}

.exit-button-top {
    background-color: #ff8300
}

.answers {
    text-align: left;
    display: inline-block
}

.question {
    padding-left: 0;
    padding-right: 0
}

input[type='checkbox'] {
    min-height: 15px;
    min-width: 15px;
    padding: 0;
    margin: 0;
    vertical-align: bottom;
    position: relative;
    top: -1px;
    *overflow: hidden;
    border: 1px #ccc solid;
    background-color: #ccc
}

.answer-checkbox {
    position: absolute;
    margin-right: 10px
}

.answer {
    clear: both;
    margin-bottom: 5px
}

.answer-label {
    margin-left: 3rem
}

.answer-label>label {
    font-weight: normal
}

@media (min-width:768px) {
    #progressbar li {
        width: 15.5%
    }
}

@media (max-width:767px) {
    #progressbar li {
        width: 13.5%
    }
}

.question>h3 {
    color: #17c28c
}

@media (min-width:768px) {
    .question>h3 {
        font-size: 2.5rem
    }
}

@media (min-width:992px) {
    .answer-label>label {
        font-size: 1.8rem
    }
}

h2 {
    color: #17c28c;
    display: inline;
    font-weight: 300
}

label {
    display: block
}

h3 {
    color: #17c28c
}

p {
    font-size: 1.7rem;
    line-height: 160%;
    font-weight: 100;
}

#ready-exit-section h3 {
    border: 0;
    max-width: 100%;
    padding-left: 0
}

@media (max-width:479px) {
    .exit-button {
        font-size: 2rem
    }
    #msform fieldset {
        margin: 0;
        width: 100%
    }
    #msform .action-button {
        font-size: 11pt
    }
}

a.read-more {
  display: block;
      padding: 2px 5px;
      color: #FFFFFF;
      background-color: rgba(23, 194, 140, 0.52);
      margin-top: 5px;
      font-weight: 600;
      /* border: 2px #fff solid; */
      text-align: center;
      border:2px transparent solid;
}

a.read-more:hover {
    background-color: #fff;
    color: #17c28c;
    text-decoration: none;
    border-color: #17c28c;
}

.tab-pane h3 {
    margin-top: 0;
    color: #17c28c
}

.nav>li>a:hover,
.nav>li>a:focus {
    background-color: #59c7ed
}

.panel-default>.panel-heading {
    font-family: 'novecento';
    text-transform: uppercase;
    font-weight: bold;
    color: #fff;
    background-color: #17c28c
}

.panel-default>.panel-heading:hover {
    background-color: #59c7ed
}

.panel-title>a,
.panel-title>small,
.panel-title>.small,
.panel-title>small>a,
.panel-title>.small>a {
    color: inherit;
    display: block;
    font-weight: bold;
    text-decoration: none
}
p#description {
  background-color: #fff;
    padding: 0 5px;
    font-size: 1.4rem;
}

ul.press li a img:hover {
    opacity: 1;
    filter: alpha(opacity=100);
    transition: opacity .2s linear;
}

ul.press li a img {
    opacity: 0.7;
    filter: alpha(opacity=70);
    transition: opacity .2s linear;
}

ul.press {
    text-align: center;
    margin: 2rem 0;
    padding: 1rem;
    list-style-type: none;
    background-color: #fff;
}

ul.press li {
    display: inline-block;
    margin: 11px 7px;
    list-style-image: none;
}