/* CSS Document for Screens */

/*@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,500,500italic,600,600italic,700,700italic);
*/
body {
    font-family: 'Open Sans', sans-serif;
    font-size: 18px; /* 16px to export to web-site*/
    font-weight: 400;
    color: #000;
    margin: 0;
    padding: 0;
    background-image: -webkit-linear-gradient(0deg, #FFFCF2 0%, #FFF48F 100%);
    background-image: -moz-linear-gradient(0deg, #FFFCF2 0%, #FFF48F 100%);
    background-image: -o-linear-gradient(0deg, #FFFCF2 0%, #FFF48F 100%);
    background-image: -ms-linear-gradient(0deg, #FFFCF2 0%, #FFF48F 100%);
    background-image: linear-gradient(90deg, #FFFCF2 0%, #FFF48F 100%);
}

#page {
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
}

/* Text */

h1 {
    margin: .3em 0 .4em .7em;
    font-size: 2.8em;
    font-weight: 700;
    color: #000000;
}

h2 {
    margin: 0.3em 0em 2.5em 0;
    font-size: 2em;
    font-weight: 500;
    line-height: 1em;
    color: #000000;
}

h3 {
    margin: 0 0 .5em 0;
    font-size: 1.3em;
    font-weight: 500;
    color: #000000;
}

h4 {
    margin: 0 0 1.5em 0;
    font-size: 1em;
    font-weight: 500;
    color: #000000;
}

h5 {
    margin: 0 0 .1em 0;
    font-size: .9em;
    font-weight: 500;
    color: #000000;
    font-style: italic;
}

:1 p {
    margin: 0 0 1em 0;
    font-size: .9em;
    font-weight: 500;
    color: #000000;
    font-style: italic;
}

a {
    color: #6216af;

}

/* Header */




.styled-select {
   overflow: hidden;
   font-size: 12px;    
}


/* Media Queries */

@media screen and (max-width: 1000px) {
    h1 {
        font-size: 2.4em;
    }
}

@media screen and (max-width: 900px) {
    h1 {
        font-size: 2.2em;
    }
    /* Header */
}

@media screen and (max-width: 825px) {
    h1 {
        font-size: 2em;
    }
    h2 {
        font-size: 1.8em;
    }
    h3 {
        font-size: 1.1em;
    }
    a.btn {
        font-size: 1.1em;
    }
    
}

@media screen and (max-width: 725px) {
    h1 {
        font-size: 1.8em;
    }
    h2 {
        font-size: 1.4em;
    }
    h3 {
        font-size: 1.1em;
    }
}

@media screen and (max-width: 625px) {
    p {
        margin: 0 0 .9em 0;
    }
    h1 {
        font-size: 1.8em;
    }
    h2 {
        font-size: 1.6em;
    }
    h3 {
        margin-bottom: 0px;
    }
    a.btn {
        font-size: 1em;
    }
}

@media screen and (max-width: 525px) {
    header div.hero h2 {
        font-size: 1.5em;
        margin-bottom: 10px;
    }
}

@media screen and (max-width: 425px) {
    
}

@media screen and (max-width: 325px) {
    
}

.progress {
  height: 100%;
  width: 100%;
  background-color: #c9c9c9;
  position: relative;
}
.progress:before {
  content: attr(data-label);
  font-size: 0.1em;
  position: absolute;
  text-align: center;
  top: 0px;
  left: 5px;
  right: 0px;
}
.progress .value {
  background-color: #7cc4ff;
  display: inline-block;
  height: 100%;
}