.navbar {
    padding: 0em 2em 3em 1em;
}

@media only screen and (max-width: 990px) {
    .navbar {
        padding: .5em 0em 1em 0em;
    }
}

.navbar .navbar-brand {
    padding: 1em;
}

@media only screen and (max-width: 990px) {
    .navbar .navbar-brand {
        padding: .5em;
    }
}

.navbar .navbar-brand img {
    padding: 0em 2em 3em 1em;
}

@media only screen and (max-width: 990px) {
    .navbar .navbar-brand img {
        padding: 0em;
    }
}

.banner {
    margin-top: -2em;
}

.section-a {
    margin: 2em 0em 5em 0em;
}

@media only screen and (max-width: 990px) {
    .section-a {
        margin: 2em 0em 0em 0em;
    }
}

.section-a .imgThumb01 {
    float: right;
}

@media only screen and (max-width: 990px) {
    .section-a .imgThumb01 {
        float: none;
        margin: auto;
        width: 100%;
        padding: 0em 0em 3em 0em;
    }
}

.section-a .imgThumb02 {
    float: left;
}

@media only screen and (max-width: 990px) {
    .section-a .imgThumb02 {
        float: none;
        margin: auto;
        width: 100%;
        padding: 0em 0em 3em 0em;
    }
}

.section-b {
    text-align: center;
    width: 100%;
}

input[type=range] {
  /*removes default webkit styles*/
  -webkit-appearance: none;
  /*fix for FF unable to apply focus style bug */
  border: 1px solid white;
  /*required for proper track sizing in FF*/
  width: 300px;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 300px;
  height: 5px;
  background: #ddd;
  border: none;
  border-radius: 3px;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: goldenrod;
  margin-top: -4px;
}

input[type=range]:focus {
  outline: none;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: #ccc;
}

input[type=range]::-moz-range-track {
  width: 300px;
  height: 5px;
  background: #ddd;
  border: none;
  border-radius: 3px;
}

input[type=range]::-moz-range-thumb {
  border: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: goldenrod;
}


/*hide the outline behind the border*/
input[type=range]:-moz-focusring {
  outline: 1px solid white;
  outline-offset: -1px;
}

input[type=range]::-ms-track {
  width: 300px;
  height: 5px;
  /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
  background: transparent;
  /*leave room for the larger thumb to overflow with a transparent border */
  border-color: transparent;
  border-width: 6px 0;
  /*remove default tick marks*/
  color: transparent;
}

input[type=range]::-ms-fill-lower {
  background: #777;
  border-radius: 10px;
}

input[type=range]::-ms-fill-upper {
  background: #ddd;
  border-radius: 10px;
}

input[type=range]::-ms-thumb {
  border: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: goldenrod;
}

input[type=range]:focus::-ms-fill-lower {
  background: #888;
}

input[type=range]:focus::-ms-fill-upper {
  background: #ccc;
}

.dragbar{
    cursor: pointer;
}

hr.separator{
    border: 1;
    clear:both;
    display:block;
    width: 100%;               
    border-top: 1px solid #F4BA44;
    height: 1px;
    margin:0px;
}

.banner-b img{
    width: 100%;
}

.tablink.active{
    width: 30%;
    height: 50px;
    background-image: url('../images/lens-white.png');
    background-repeat: no-repeat;
    background-position: 18% 39%;
    color:white;
    background-color: #F4BA44;
    font-size: 16pt;
    border-style: solid;
    border-color: #F4BA44;
    border-width: 1px;
    border-top: none;

}

@media only screen and (max-width: 990px) {
    .tablink.active{
        width: 49%;
        height: 50px;
        background-image: url('../images/lens-white.png');
        background-size: 20%;
        background-repeat: no-repeat;
        background-position: 5%;
        color:white;
        background-color: #F4BA44;
        font-size: 16px;
        border-style: solid;
        border-color: #F4BA44;
        border-width: 1px;
        border-top: none;
    }
}

.tablink{
    width: 30%;
    height: 50px;
    background-image: url('../images/lens-yellow.png');
    background-repeat: no-repeat;
    background-position: 18% 39%;
    color:#F4BA44;
    background-color: #FFF;
    font-size: 16pt;
    border-style: solid;
    border-color: #F4BA44;
    border-width: 1px;
    border-top: none;
}

@media only screen and (max-width: 990px) {
    .tablink{
        width: 49%;
        height: 50px;
        background-image: url('../images/lens-yellow.png');
        background-size: 20%;
        background-repeat: no-repeat;
        background-position: 5%;
        color:#F4BA44;
        background-color: #FFF;
        font-size: 16px;
        border-style: solid;
        border-color: #F4BA44;
        border-width: 1px;
        border-top: none;
    }
}


.img-icon-lens{
    margin:10px;
    cursor: pointer;
}

.lens-interactive{
    max-width:700px;
    text-align:center;
    margin:auto;
}

.lens-image{
    width:100%;
}

.sub-promo{
    color: #27679F;
    font-size: 18px;
    max-width: 680px;
    margin:auto;
    padding-top:50px;
    font-family: "Myriad Pro", Myriad, "Liberation Sans", "Nimbus Sans L", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.name-lens{
    color:#909090;
    padding-bottom: 20px;
}

button:focus {outline:0;}
button{margin: 0em -0.1em;}

footer.dark {
    width: 100%;
    background-color: #000000;
    height:50px;
    margin-top:50px;
}

.thumb-text{
    font-weight: bold;
    font-size: 15px;
    font-family: "Myriad Pro", Myriad, "Liberation Sans", "Nimbus Sans L", "Helvetica Neue", Helvetica, Arial, sans-serif;
    width: 70%;
}

@media only screen and (max-width: 990px) {
    .thumb-text{
        font-weight: bold;
        font-size: 15px;
        font-family: "Myriad Pro", Myriad, "Liberation Sans", "Nimbus Sans L", "Helvetica Neue", Helvetica, Arial, sans-serif;
        width: 100%;
    }
}

.div-hide{
    padding-bottom: 2em;
}

.thumb-title{
    letter-spacing: 5px;
    font-weight: 500;
}

.btn-custom{
    background-color: white;
    border: 2px solid #27679F;
    width: 110px;
    color: #27679F;

}

button{
    font-family: "Myriad Pro", Myriad, "Liberation Sans", "Nimbus Sans L", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.titleSensity{
    color: #0067a5;
    font-weight: 600;
    font-size: 2em;
    padding: 1em 0em;
    font-family: "Myriad Pro", Myriad, "Liberation Sans", "Nimbus Sans L", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.desSensity{
    color: #27679F;
    font-size: 18px;
    max-width: 680px;
    margin:auto;
    padding-top:10px;
    font-family: "Myriad Pro", Myriad, "Liberation Sans", "Nimbus Sans L", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.desSensityMobile{
    color: #27679F;
    font-size: 18px;
    max-width: 680px;
    margin:auto;
    padding-top:10px;
    font-family: "Myriad Pro", Myriad, "Liberation Sans", "Nimbus Sans L", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.thumb-hide{
    letter-spacing: 5px;
    font-family: "Myriad Pro", Myriad, "Liberation Sans", "Nimbus Sans L", "Helvetica Neue", Helvetica, Arial, sans-serif;
}