@charset 'utf-8';
/* colors
hot pink : #ff0078;
*/

/*-overwrite-*/
.overview-wrapper {
    width: 100%;
}
#overview #sectionOverview {
    width: 100%;
    padding: 0;
}
#overview, #gallery, #review, #support, #features, #wheretobuy {
    margin-top: 0px;
}
#overview #sectionOverview {
    padding: 0px;
}
body.noscroll{
    overflow: hidden;
}
#hd{
    /*width: 100% !important;
    margin-left: 0 !important;*/
}
#hd p{
    font-family: 'Open Sans', sans-serif;
    font-weight: normal;
    line-height: 1.6em;
    font-size: 16px;
}
#hd ul{
    font-family: 'Open Sans', sans-serif;
    font-weight: normal;
    line-height: 1.6em;
    font-size: 16px;
}



/*--------------BE27ACSBK-----------------*/

@font-face {
    font-family: 'MyriadPro';
    src:url('../fonts/MyriadPro-Light.otf');
    font-weight: normal;
    font-style: normal;
}
#hd{
    font-family: 'MyriadPro', 'Open Sans', sans-serif;
}

#hd .section-title.titleColor{
    color: #fff;
}
 #hd .section-p.textColor{
    color: #fff;
}
 


#hd .section-title{
    font-family: 'Poppins', 'MyriadPro', 'Open Sans', sans-serif;
    font-size: 2.5em;
    color: #000;
    
    line-height: 1.3em;
    font-weight: normal;
    letter-spacing: 0.05em;
    margin-bottom: 0.5em;
    position: relative;
}

#hd .section-title:before{
    content: '';
    display: block;
    width: 100px;
    height: 2px;
    background: #28abe5;
    position: absolute;
    left: calc(50% - 50px);
    top: -20px;
}
#hd .section-p{
    font-family: 'MyriadPro', 'Open Sans', sans-serif;
    font-size: 1.2em;
    color: #000;
   
    line-height: 1.6em;
    font-weight: normal;
}



/*----------link ---------*/
#hd .link{
    font-weight: normal;
    color:#25aae5;
} 

#hd .link:hover{
    border-bottom: .5pt solid #25aae5;
} 

#hd .link:active{
    color: #006ce1;
}


#hd .note{
    font-family: 'MyriadPro', 'Open Sans', sans-serif;
    font-size: 0.9em;
    color: #aaa;
    line-height: 1.3em;
    font-weight: normal;
}
@media screen and (min-width: 1800px) {    
}
@media screen and (max-width: 1400px) {    
#hd .section-title{
    font-size: 2em;
}
}
@media screen and (max-width: 550px) {    
#hd .section-title{
    font-size: 1.5em;
}
#hd .section-p{
    font-size: 1em;
}
}



/*-main-*/
#hd #be-main{
    background: url('../img/main-bg.jpg') center top no-repeat;
    background-size: 100% auto;
    margin: 0 auto;
}
#hd #be-main .inner{
    position: relative;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 40px;
}
#hd #be-main .inner .text{
    padding-top: 100px;
    min-height: 65vw;
}
#hd #be-main .inner .text h1{
    text-align: center;
    font-family: 'Poppins', 'MyriadPro', 'Open Sans', sans-serif;
    font-size: 2.5em;
    color: #25aae5;
    line-height: 1.2em;
    font-weight: normal;
    position: relative;
    z-index: 2;
    margin-bottom: 0.5em;
}
#hd #be-main .inner .text h2{
    text-align: center;
    font-family: 'Poppins', 'MyriadPro', 'Open Sans', sans-serif;
    font-size: 3.5em;
    color: #000;
    line-height: 1.2em;
    font-weight: normal;
    position: relative;
    z-index: 2;
}
#hd #be-main .inner .text p{
    max-width: 1000px;
    margin: 0 auto;
}
#hd #be-main .inner .text .image{
    position: relative;
    z-index: 1;
    max-width: 80%;
    margin: -30px auto 40px auto;
}
#hd #be-main .inner .text .image img{
    display: block;
    margin: 0 auto;
}

#hd #be-main .inner h3{
    color: #25aae5;
    font-size: 2em;
    margin-top: 100px;
    text-align: center;
    font-weight: normal;
    font-family: 'Poppins', 'MyriadPro', 'Open Sans', sans-serif;
}
#hd #be-main .inner .list{
    display: flex;
    flex-wrap: wrap;
    margin-top: 40px;
    margin-bottom: 250px;
}
#hd #be-main .inner .list .entry{
    width: 25%;
}
#hd #be-main .inner .list .entry .caption{
    font-family: 'Poppins', 'MyriadPro', 'Open Sans', sans-serif;
    padding-top: 15px;
    font-size: 1.4em;
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 1px;
    font-weight: normal;
}

@media screen and (min-width: 2300px) {    
#hd #be-main{
    background-size: 2000px auto;
}
#hd #be-main .inner .text{
    min-height: 1400px;
}
}

@media screen and (max-width: 1400px) {    
#hd #be-main .inner .text{
    padding-top: 50px;
    min-height: inherit;
}
#hd #be-main .inner .text h1{
    font-size: 2em;
}
#hd #be-main .inner .text h2{
    font-size: 3em;
}
#hd #be-main .inner .text .image{
    margin-top: -30px;
}
}
@media screen and (max-width: 1024px) {    
#hd #be-main .inner .list .entry .caption{
    font-size: 1em;
}
}

@media screen and (max-width: 768px) {    
#hd #be-main .inner{
    padding: 0 20px;
}
#hd #be-main .inner .text h1{
    font-size: 1.5em;
}
#hd #be-main .inner .text h2{
    font-size: 2em;
}
#hd #be-main .inner .text .image{
    margin-top: 0px;
    max-width: 100%;
}
}

@media screen and (max-width: 500px) {    
#hd #be-main .inner .text h1{
    font-size: 1.2em;
}
#hd #be-main .inner .text h2{
    font-size: 1.7em;
}
#hd #be-main .inner .list{
    margin-top: 40px;
}
#hd #be-main .inner .list .entry{
    width: 50%;
    margin-bottom: 30px;
}
}






/*-adjust-*/
#hd #be-adjust{
    background: #fff;
    padding-bottom: 100px;

}
#hd #be-adjust .inner{
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    padding-top: 100px;
}
#hd #be-adjust .text{
    text-align: center;
}
#hd #be-adjust .list{
    display: flex;
    flex-wrap: wrap;
    margin-top: 50px;
}
#hd #be-adjust .list .entry{
    width: 33.33%;
    box-sizing: border-box;
    padding: 0 5px;
}

@media screen and (max-width: 768px) {    
#hd #be-adjust .inner{
    padding: 0 20px;
}
}





/*-exposure-*/
#hd #be-exposure{
    background: #252525;
    color: #fff;
    padding-bottom: 100px;
}
#hd #be-exposure .inner{
    position: relative;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 40px;
}
#hd #be-exposure .text{
    text-align: center;
    padding-top: 150px;
    max-width: 800px;
    margin: 0 auto;
}
#hd #be-exposure .section-title{
    color: #fff;
}
#hd #be-exposure .section-p{
    color: #fff;
}
#hd #be-exposure .list{
    display: flex;
    flex-wrap: wrap;
    margin-top: 60px;
    margin-bottom: 50px;
}
#hd #be-exposure .list .entry{
    width: 50%;
}
#hd #be-exposure .list .entry .caption{
    font-size: 1.4em;
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 1px;
    font-weight: normal;
    color: #aaa;
    padding: 15px 5px 0 5px;
    font-family: 'Poppins', 'MyriadPro', 'Open Sans', sans-serif;
}
#hd #be-exposure .list .entry:first-child .caption{
    color: #28abe5;
}

@media screen and (max-width: 768px) {    
#hd #be-exposure .inner{
    padding: 0 20px;
}
#hd #be-exposure .list .entry .caption{
    font-size: 1em;
}
}


/*-software-*/
#hd #be-software{
    background: url('../img/software-bg.jpg') center top no-repeat;
    background-size: 100% auto;
    padding-bottom: 100px;
}
#hd #be-software .inner{
    position: relative;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 40px;
}
#hd #be-software .text{
    text-align: center;
    padding-top: 150px;
    margin-bottom: 50px;
}

@media screen and (max-width: 768px) {    
#hd #be-software .inner{
    padding: 0 20px;
}
}




/*-connectivity-*/
#hd #be-connectivity{
    background: #f1f0f0;
    padding-bottom: 100px;
}
#hd #be-connectivity .inner{
    padding-top: 150px;
    margin-bottom: 50px;
}
#hd #be-connectivity .text{
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 40px;
    text-align: center;
}
#hd #be-connectivity .text .iconset{
    margin: 50px auto 0 auto;
    max-width: 600px;
}
#hd #be-connectivity .image{
    max-width: 1920px;
    margin: 0 auto;
    margin-top: 50px;
}
#hd #be-connectivity .image img{
    width: 80%;
    margin: 0;
}

@media screen and (max-width: 768px) {    
#hd #be-connectivity .text{
    padding: 0 20px;
}
#hd #be-connectivity .image img{
    width: 100%;
}
}



/*-ergonomic-*/
#hd #be-ergonomic{
    background: #fff;
    padding-bottom: 100px;
}
#hd #be-ergonomic .inner{
    position: relative;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 40px;
}
#hd #be-ergonomic .text{
    text-align: center;
    padding-top: 150px;
    max-width: 1000px;
    margin: 0 auto;
}
#hd #be-ergonomic .list{
    display: flex;
    flex-wrap: nowrap;
    margin-top: 60px;
    margin-bottom: 50px;
}
#hd #be-ergonomic .list .entry{
    padding: 0 1%;
    box-sizing: border-box;
}
#hd #be-ergonomic .list .entry .caption{
    font-size: 1.2em;
    line-height: 1.2em;
    text-align: center;
    letter-spacing: 1px;
    color: #28abe5;
    padding: 15px 5px 0 5px;
    font-family: 'Poppins', 'MyriadPro', 'Open Sans', sans-serif;
}

@media screen and (max-width: 768px) {    
#hd #be-ergonomic .inner{
    padding: 0 20px;
}
#hd #be-ergonomic .list .entry .caption{
    font-size: 0.9em;
}
}

@media screen and (max-width: 500px) {    
#hd #be-ergonomic .list{
    flex-wrap: wrap;
}
#hd #be-ergonomic .list .entry{
    width: 50%;
    margin-bottom: 30px;
}
}






/*-eyecare-*/
#hd #be-eyecare{
    background: #fff;
    padding-bottom: 100px;
}
#hd #be-eyecare .inner{
    position: relative;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 40px;
}
#hd #be-eyecare .inner > .text{
    text-align: center;
    padding-top: 150px;
}

/*bluelight*/
#hd #be-eyecare .eyecare-bluelight{
    padding-top: 50px;
    padding-bottom: 50px;
    margin-top: 40px;
    background: #f5f5f5;
}
#hd #be-eyecare .eyecare-bluelight .bluelight-inner{
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    flex-wrap: wrap;
}
#hd #be-eyecare .eyecare-bluelight .image-wrapper{
    width: 60%;
}
#hd #be-eyecare .eyecare-bluelight .text{
    padding-left: 3%;
    width: 40%;
}
#hd #be-eyecare .eyecare-bluelight .text h4{
    font-size: 1.6em;
    font-weight: normal;
    margin-bottom: 20px;
    color: #25aae5;
    font-family: 'Poppins', 'MyriadPro', 'Open Sans', sans-serif;
}
#hd #be-eyecare .eyecare-bluelight .text .icon{
    width: 250px;
    margin-bottom: 50px;
}


#hd #be-eyecare .eyecare-bluelight .control-wrapper{
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
#hd #be-eyecare .eyecare-bluelight .control-wrapper .control{
    display: flex;
    margin-right: 25px;
    margin-bottom: 20px;
}
#hd #be-eyecare .eyecare-bluelight .control-wrapper .control > div{
    width: 60px;
    height: 60px;
    line-height: 60px;
    margin-right: 15px;
    font-size: 1.5em;
    text-align: center;
    background: #eee;
    color: #fff;
    cursor: pointer;
    border: 2px solid transparent;
}
#hd #be-eyecare .eyecare-bluelight .control-wrapper .control .lv-0{
    background: #d9eef8;
    color: #25aae5;
}
#hd #be-eyecare .eyecare-bluelight .control-wrapper .control .lv-1{
    background: #cbe6f2;
}
#hd #be-eyecare .eyecare-bluelight .control-wrapper .control .lv-2{
    background: #b6def0;
}
#hd #be-eyecare .eyecare-bluelight .control-wrapper .control .lv-3{
    background: #a2d7ef;
}
#hd #be-eyecare .eyecare-bluelight .control-wrapper .control .lv-4{
    background: #25aae5;
}
#hd #be-eyecare .eyecare-bluelight .control-wrapper .control > div.active{
    border-color: #0084ff;
    color: #0084ff;
    background: transparent;
}



#hd #be-eyecare .eyecare-bluelight .image-wrapper{
    position: relative;
}
#hd #be-eyecare .eyecare-bluelight .image-wrapper .level{
    position: absolute;
    color: #fff;
    right: 15%;
    bottom: 20%;
    text-align: right;
    font-size: 1.2em;
}
#hd #be-eyecare .eyecare-bluelight .image-wrapper .light{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.4; /*default by level 2*/
}

@media screen and (max-width: 1200px) {    
#hd #be-eyecare .eyecare-bluelight .text h4{
    font-size: 1.2em;
}
#hd #be-eyecare .eyecare-bluelight .image-wrapper{
    width: 50%;
}
#hd #be-eyecare .eyecare-bluelight .text{
    width: 50%;
}
#hd #be-eyecare .eyecare-bluelight .control-wrapper .control > div{
    width: 50px;
    height: 50px;
    line-height: 50px;
    margin-right: 10px;
    font-size: 1.2em;
}
}
@media screen and (max-width: 767px) {    
#hd #be-eyecare .inner{
    padding: 0;
}
#hd #be-eyecare .inner > .text{
    padding: 0 20px;
}
#hd #be-eyecare .eyecare-bluelight .bluelight-inner{
    padding: 0 20px;
}
#hd #be-eyecare .eyecare-bluelight .image-wrapper{
    width: 100%;
}
#hd #be-eyecare .eyecare-bluelight .text{
    padding-left: 0;
    width: 100%;
}
#hd #be-eyecare .eyecare-bluelight .control-wrapper .icon{
    display: none;
}
}
@media screen and (max-width: 500px) {    
#hd #be-eyecare .eyecare-bluelight .image-wrapper .level{
    right: 10%;
    font-size: 1em;
}
}




/*-flicker-*/
#hd #be-flicker{
    background: #fff;
    padding-bottom: 100px;
}
#hd #be-flicker .inner{
    position: relative;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 40px;
}
#hd #be-flicker .text{
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}
#hd #be-flicker .text h3{
    color: #25aae5;
    font-size: 2em;
    margin-bottom: 0.8em;
    font-weight: normal;
    font-family: 'Poppins', 'MyriadPro', 'Open Sans', sans-serif;
}
#hd #be-flicker .list{
    display: flex;
    flex-wrap: wrap;
    margin-top: 60px;
    margin-bottom: 50px;
}
#hd #be-flicker .list .entry{
    width: 50%;
}
#hd #be-flicker .list .entry .caption{
    font-size: 1.2em;
    line-height: 1.2em;
    text-align: center;
    letter-spacing: 1px;
    font-weight: normal;
    color: #aaa;
    padding: 15px 5px 0 5px;
    font-family: 'Poppins', 'MyriadPro', 'Open Sans', sans-serif;
}
#hd #be-flicker .list .entry:first-child .caption{
    color: #28abe5;
}

@media screen and (max-width: 768px) {    
#hd #be-flicker .inner{
    padding: 0 20px;
}
#hd #be-flicker .list .entry .caption{
    font-size: 0.9em;
}
}



/*-shortcuts-*/
#hd #be-shortcuts{
    background: #252525;
    color: #fff;
    padding-bottom: 180px;
}
#hd #be-shortcuts .inner{
    position: relative;
}
#hd #be-shortcuts .inner > .image{
    width: 50%;
}
#hd #be-shortcuts .inner > .image img{
    margin: 0;
}
#hd #be-shortcuts .section-title:before{
    left: 0;
}
#hd #be-shortcuts .text{
    max-width: 500px;
    position: absolute;
    left: 55%;
    top: 18%;
    width: 40%;
}
#hd #be-shortcuts .section-title{
    color: #fff;
}
#hd #be-shortcuts .section-p{
    color: #fff;
}
#hd #be-shortcuts .list{
    display: flex;
    flex-wrap: wrap;
    position: absolute;
    left: 35%;
    top: 70%;
    width: 60%;
    max-width: 900px;
}
#hd #be-shortcuts .list .entry{
    width: 33.33%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 30px;
}
#hd #be-shortcuts .list .entry .image{
    width: 35%;
}
#hd #be-shortcuts .list .entry .caption{
    width: 65%;
    font-size: 1.2em;
    line-height: 1.2em;
    color: #fff;
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
}
@media screen and (max-width: 1200px) {    
#hd #be-shortcuts .list .entry .caption{
    font-size: 1em;
}
}

@media screen and (max-width: 900px) {    
#hd #be-shortcuts{
    padding-bottom: 60px;
}
#hd #be-shortcuts .inner > .image{
    width: 80%;
}
#hd #be-shortcuts .text{
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    max-width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    margin-bottom: 40px;
    margin-top: 40px;
}
#hd #be-shortcuts .list{
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    max-width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}
}

@media screen and (max-width: 500px) {    
#hd #be-shortcuts .list .entry{
    width: 50%;
}
#hd #be-shortcuts .list .entry .caption{
    font-size: 0.9em;
}
}




/*-usb-*/
#hd #be-usb{
}
#hd #be-usb .inner{
    position: relative;
}
#hd #be-usb .inner > .image{
}
#hd #be-usb .inner > .image img{
    margin: 0;
    width: 100%;
}
#hd #be-usb .section-title:before{
    left: 0;
}
#hd #be-usb .text{
    max-width: 450px;
    position: absolute;
    left: calc(50% - 600px);
    top: 12%;
    width: 30%;
}
#hd #be-usb .icon{
    position: absolute;
    /*left: calc(50% - 600px);
    top: 58%;*/
    left: 80%;
    top: 5%;
    max-width: 170px;
}

@media screen and (min-width: 2600px) {    
#hd #be-usb .text{
    left: calc(50% - 700px);
    top: 20%;
}
#hd #be-usb .icon{
    left: calc(50% - 700px);
    top: 40%;
}
}
@media screen and (min-width: 3100px) {    
#hd #be-usb .text{
    left: 27%;
}
#hd #be-usb .icon{
    left: 27%;
}
}
@media screen and (min-width: 4800px) {    
#hd #be-usb .text{
    left: 30%;
}
#hd #be-usb .icon{
    left: 30%;
}
}
@media screen and (max-width: 1500px) {    
#hd #be-usb .text{
    top: 8%;
    left: 20px;
}
#hd #be-usb .icon{
    left: 80%;
    top: 5%;
    /*left: 20px;
    top: auto;
    bottom: 20px;*/
    max-width: 120px;
}
}
@media screen and (max-width: 1200px) {    
#hd #be-usb .icon{
    max-width: 90px;
}
}

@media screen and (max-width: 1100px) {    
#hd #be-usb{
    padding-bottom: 60px;
}
#hd #be-usb .text{
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    max-width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    margin-bottom: 40px;
    margin-top: 70px;
}
#hd #be-usb .icon{
    position: relative;
    left: auto;
    top: auto;
    margin-left: 20px;
}

#hd .section-title.titleColor{
    color: #000;
}
 #hd .section-p.textColor{
    color: #000;
}
 
}





/*-mount-*/
#hd #be-mount{
}
#hd #be-mount .inner{
    position: relative;
}
#hd #be-mount .inner > .image{
}
#hd #be-mount .inner > .image img{
    margin: 0;
    width: 100%;
}
#hd #be-mount .section-title:before{
    left: 0;
}
#hd #be-mount .text{
    max-width: 500px;
    position: absolute;
    left: calc(50% - 700px);
    top: 30%;
    width: 30%;
}

#hd #be-mount .reminder{
    font-size: .67em; 
    color: #808080d4;
    width: 82%;
    max-width: 100%;
}


@media screen and (min-width: 2800px) {    
#hd #be-mount .text{
    left: calc(50% - 900px);
}
}
@media screen and (max-width: 1500px) {    
#hd #be-mount .text{
    top: 13%;
    left: 30px;
    width: 38%;
}
}
@media screen and (max-width: 800px) {    
#hd #be-mount{
    padding-bottom: 60px;
}
#hd #be-mount .text{
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    max-width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    margin-bottom: 40px;
    margin-top: 40px;
}
}


/*-noise-*/
#hd .be-noise{
    background: #fff;
    padding-top: 120px;
    padding-bottom: 100px;
    overflow: hidden;
}
#hd .be-noise .section_content{
    position: relative;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 40px;
}
#hd .be-noise .section_content > .text{
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 50px;
}
@media screen and (max-width: 768px) {    
#hd .be-noise .section_content > .text{
    margin-bottom: 0px;
}
}




/*------------------------Caring for the enviroment-------------------*/
#hd #be-enviroment{
    background: #fff;
    padding-bottom: 100px;
}
#hd #be-enviroment .inner{
    position: relative;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 40px;
}
#hd #be-enviroment .text{
    text-align: center;
    padding-top: 150px;
    max-width: 1000px;
    margin: 0 auto;
}


#hd #be-enviroment .text .section-title{
text-align: left;

}
#hd #be-enviroment .text .section-p{
text-align: left;

}



#hd #be-enviroment .list{
    display: flex;
    flex-wrap: nowrap;
    margin-top: 60px;
    margin-bottom: 50px;
}
#hd #be-enviroment .list .entry{
    padding: 0 1%;
    box-sizing: border-box;
}
#hd #be-enviroment .list .entry .caption{
    font-size: 1.2em;
    line-height: 1.2em;
    text-align: center;
    letter-spacing: 1px;
    color: #28abe5;
    padding: 15px 5px 0 5px;
    font-family: 'Poppins', 'MyriadPro', 'Open Sans', sans-serif;
}

@media screen and (max-width: 768px) {    
#hd #be-enviroment .inner{
    padding: 0 20px;
}
#hd #be-enviroment .list .entry .caption{
    font-size: 0.9em;
}
}

@media screen and (max-width: 500px) {    
#hd #be-enviroment .list{
    flex-wrap: wrap;
}
#hd #be-enviroment .list .entry{
    width: 50%;
    margin-bottom: 30px;
}
}



/*-------------------------Caringnote----------------------------*/
#hd #be-Caringnote{
    background: #fff;
    color: #9f9f9f;
    padding-bottom: 100px;
    height: 300px;
}
#hd #be-Caringnote .inner{
    position: relative;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 40px;
}
#hd #be-Caring .text{
    text-align: center;
    padding-top: 150px;
    max-width: 800px;
    margin: 0 auto;
}
/*#hd #be-Caringnote .section-title{
    /*color: #fff;
    
}*/




#hd #be-Caringnote .section-p{
    /*color: #fff;*/
    color:  #9f9f9f;
    text-align: center;
    padding-top: 15%;
    font-size: 0.9em;
}
#hd #be-Caringnote .section-note{
    color: #c3c2c2;
    font-size: 0.8em;
    text-align: left;
    font-family: 'Poppins', 'MyriadPro', 'Open Sans', sans-serif;
    font-weight: lighter;
}
#hd #be-Caringnote .list{
    display: flex;
    flex-wrap: wrap;
    margin-top: 60px;
    margin-bottom: 50px;
}
#hd #be-Caringnote .list .entry{
    width: 50%;
}
#hd #be-Caringnote .list .entry .caption{
    font-size: 1.4em;
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 1px;
    font-weight: normal;
    color: #aaa;
    padding: 15px 5px 0 5px;
    font-family: 'Poppins', 'MyriadPro', 'Open Sans', sans-serif;
}
#hd #be-Caringnote .list .entry:first-child .caption{
    color: #28abe5;
}

@media screen and (max-width: 768px) {    
#hd #be-Caringnote .inner{
    padding: 0 20px;
}
#hd #be-Caringnote .list .entry .caption{
    font-size: 1em;
}
}








/*--------------ZenScreen-----------------*/
/*
@font-face {
    font-family: 'MyriadPro';
    src:url('../fonts/MyriadPro-Light.otf');
    font-weight: normal;
    font-style: normal;
}

#hd .section-title{
    font-family: 'MyriadPro', 'Open Sans', sans-serif;
    font-size: 2.5em;
    color: #034c8c;
    line-height: 1.3em;
    font-weight: normal;
    letter-spacing: 0.05em;
}
#hd .section-p{
    font-family: 'MyriadPro', 'Open Sans', sans-serif;
    font-size: 1em;
    color: #000;
    line-height: 1.6em;
    font-weight: normal;
}
@media screen and (min-width: 1800px) {    
#hd .section-title{
    font-size: 2.8em;
}
}
@media screen and (max-width: 1400px) {    
#hd .section-title{
    font-size: 2em;
}
}
@media screen and (max-width: 550px) {    
#hd .section-title{
    font-size: 1.5em;
}
}


*/


/*-design-*/
#hd #zen-design{
    overflow: hidden;
}
#hd #zen-design .inner{
    max-width: 1600px;
    margin: 0 auto;
    padding: 40px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    flex-wrap: wrap;
}
#hd #zen-design .inner .text{
    width: 40%;
    box-sizing: border-box;
    padding-left: 4%;
}
#hd #zen-design .inner .image{
    width: 60%;
    box-sizing: border-box;
}
#hd #zen-design .iconset{
    max-width: 300px;
    margin: 30px auto 0 auto;
}

@media screen and (max-width: 768px) {    
#hd #zen-design .inner .text{
    width: 100%;
    padding-left: 0;
    margin-bottom: 30px;
}
#hd #zen-design .inner .image{
    width: 100%;
}
#hd #zen-design .iconset{
    width: 40vw;
}
}




/*-cable-*/
#hd #zen-cable{
}
#hd #zen-cable .inner{
    position: relative;
}
#hd #zen-cable .inner .text{
    max-width: 800px;
    box-sizing: border-box;
    padding: 0 40px;
    position: absolute;
    left: calc(50% - 400px);
    top: 10%;
}
#hd #zen-cable .inner .text .section-title{
    text-align: center;
}
#hd #zen-cable .inner .image{
}

@media screen and (max-width: 1000px) {    
#hd #zen-cable .inner .text{
    position: relative;
    margin: 5% auto 0 auto;
    left: auto;
    top: auto;
}
}





/*-comfort-*/
#hd #zen-comfort{
    background: #536673;
    background: linear-gradient(to bottom, #536673 40%, #5f7381 70%);
    max-width: 2560px;
    margin: 0 auto;
}
#hd #zen-comfort .inner{
    box-sizing: border-box;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    flex-wrap: wrap;
}
#hd #zen-comfort .inner .text{
    width: 40%;
    box-sizing: border-box;
    color: #fff;
    padding-right: 5%;
}
#hd #zen-comfort .inner .text .section-title{
    color: #fff;
    padding-left: 10%;
    padding-right: 40px;
}
#hd #zen-comfort .inner .text .section-p{
    color: #fff;
    padding-left: 10%;
    padding-right: 40px;
}
#hd #zen-comfort .inner .image{
    width: 60%;
    box-sizing: border-box;
}
#hd #zen-comfort .inner .image img{
    width: 100%;
    display: block;
}
#hd #zen-comfort .iconset{
    max-width: 90%;
}
#hd #zen-comfort .iconset img{
    width: 100%;
    display: block;
}

@media screen and (min-width: 3000px) {    
#hd #zen-comfort .inner .image{
    width: 50%;
}
#hd #zen-comfort .inner .text{
    width: 50%;
}
}
@media screen and (max-width: 1200px) {    
#hd #zen-comfort .inner .text{
    padding-right: 0%;
}
#hd #zen-comfort .iconset{
    max-width: 70%;
}
}
@media screen and (max-width: 1000px) {    
#hd #zen-comfort .inner .text{
    width: 100%;
    max-width: 100%;
    padding-top: 40px;
}
#hd #zen-comfort .inner .image{
    width: 100%;
}
#hd #zen-comfort .iconset{
    max-width: 80%;
}
#hd #zen-comfort .inner .text .section-title{
    padding-left: 40px;
}
#hd #zen-comfort .inner .text .section-p{
    padding-left: 40px;
}
}




/*-mode-*/
#hd #zen-mode{
}
#hd #zen-mode .inner{
    position: relative;
    max-width: 2560px;
    margin: 0 auto;
}
#hd #zen-mode .inner .text{
    width: 55%;
    box-sizing: border-box;
    position: absolute;
    left: 10vw;
    top: 5vw;
}
#hd #zen-mode .inner .text .section-title{
}
#hd #zen-mode .inner .image{
}

@media screen and (max-width: 1400px) {    
#hd #zen-mode .inner .text{
    width: 55vw;
    left: 3vw;
    top: 3vw;
}
}
@media screen and (max-width: 1000px) {    
#hd #zen-mode .inner .text{
    width: 100%;
    padding: 0 40px;
    position: relative;
    margin: 5% auto 0 auto;
    left: auto;
    top: auto;
}
}






/*-safe-*/
#hd #zen-safe{
    background: url('../img/safe-bg.jpg') right top no-repeat;
    background-size: 50% auto;
    padding-top: 5%;
    max-width: 2560px;
    margin: 0 auto;
}
#hd #zen-safe .inner{
    position: relative;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 40px;
}
#hd #zen-safe .inner .text-wrapper{
    width: 72%;
    box-sizing: border-box;
}
#hd #zen-safe .inner .text-wrapper .text{
    padding-left: 40px;
}

#hd #zen-safe .iconset{
    display: flex;
    align-items: center;
    position: absolute;
    left: 72%;
    bottom: 15%;
    padding-right: 15px;
}
#hd #zen-safe .iconset .caption{
    padding-left: 20px;
}
#hd #zen-safe .iconset .icon{
    width: 40%;
    max-width: 120px;
}
#hd #zen-safe .iconset .caption p:first-child{
    margin-bottom: 0;
    font-size: 1.2em;
}
#hd #zen-safe .iconset .caption p:last-child{
    margin-bottom: 0;
    font-size: 0.9em;
}


#hd #zen-safe .how{
    background: #f5f7f7;
    padding: 50px 0;
}
#hd #zen-safe .how-inner{
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    flex-wrap: wrap;
}
#hd #zen-safe .how-inner .image{
    width: 40%;
}
#hd #zen-safe .how-inner .text{
    padding-left: 3%;
    width: 60%;
}
#hd #zen-safe .how-inner .text h3{
    color: #034c8c;
}

@media screen and (max-width: 1400px) {    
#hd #zen-safe .inner .text-wrapper{
    width: 68%;
}
#hd #zen-safe .inner .text-wrapper .text{
    padding-left: 0px;
}
#hd #zen-safe .iconset{
    left: 68%;
}
}

@media screen and (max-width: 700px) {    
#hd #zen-safe{
    background: none;
}
#hd #zen-safe .inner .text-wrapper{
    width: 100%;
}
#hd #zen-safe .iconset{
    position: relative;
    left: auto;
    bottom: auto;
    margin-bottom: 20px;
}
#hd #zen-safe .iconset .caption p:first-child{
    font-size: 1em;
}
#hd #zen-safe .iconset .caption p:last-child{
    font-size: 0.8em;
}
#hd #zen-safe .how-inner .text{
    padding-left: 0;
    width: 100%;
}
#hd #zen-safe .how-inner .image{
    width: 70%;
    margin: 0 auto;
}
}

@media screen and (max-width: 500px) {    
#hd #zen-safe .iconset{
    padding-right: 0;
}
#hd #zen-safe .iconset .icon{
    width: 20%;
}
#hd #zen-safe .iconset .caption{
    padding-left: 10px;
}
}







/*-workspace-*/
#hd #zen-workspace{
    padding-top: 5%;
    background: #fff;
    overflow: hidden;
}
#hd #zen-workspace .inner{
    position: relative;
}
#hd #zen-workspace .inner .text{
    max-width: 800px;
    box-sizing: border-box;
    padding: 0 40px;
    position: absolute;
    left: calc(50% - 400px);
    top: 0;
    z-index: 5;
}
#hd #zen-workspace .inner .text .section-title{
    text-align: center;
}
#hd #zen-workspace .inner .image-wrapper{
    position: relative;
}
#hd #zen-workspace .inner .image-wrapper .main{
    position: relative;
    z-index: 2;
}
#hd #zen-workspace .inner .image-wrapper .inscreen{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 3;
}
#hd #zen-workspace .inner .image-wrapper .bg{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 1;
}
#hd #zen-workspace .inner .image-wrapper .number{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 4;
}

@media screen and (max-width: 1200px) {    
#hd #zen-workspace .inner .text{
    position: relative;
    margin: 5% auto 0 auto;
    left: auto;
    top: auto;
}
}






/*-eyecare-*/

/*tab*/
#hd #zen-eyecare{
    padding-bottom: 50px;
    padding-top: 50px;
}
#hd #zen-eyecare .title-wrapper{
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
}
#hd #zen-eyecare .title-wrapper .section-title{
    text-align: center;
}
#hd #zen-eyecare .title-wrapper .tab{
    display: flex;
    margin-top: 20px;
    margin-bottom: 20px;
}
#hd #zen-eyecare .title-wrapper .tab .entry{
    width: 50%;
    margin: 0 10px;
}
#hd #zen-eyecare .title-wrapper .tab .entry a{
    display: block;
    width: 100%;
    height: 100%;
    border: 1px solid #aaa;
    padding: 15px;
    text-align: center;
    color: #aaa;
    transition: all 0.3s;
    cursor: pointer;
}
#hd #zen-eyecare .title-wrapper .tab .entry a:hover{
    background: #eee;
}
#hd #zen-eyecare .title-wrapper .tab .entry.active a{
    border-color: #034c8c;
    background: #034c8c;
    color: #fff;
}
@media screen and (max-width: 500px) {    
#hd #zen-eyecare .title-wrapper .tab .entry a{
    padding: 10px 5px;
    font-size: 0.8em;
}
}



/*flickerfree*/
#hd #zen-eyecare .eyecare-flickerfree{
    display: none;
    padding-top: 50px;
}
#hd #zen-eyecare .eyecare-flickerfree .inner{
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    flex-wrap: wrap;
}
#hd #zen-eyecare .eyecare-flickerfree .inner .text{
    text-align: center;
}
#hd #zen-eyecare .eyecare-flickerfree .inner .text h4{
    font-size: 1.6em;
    font-weight: bold;
    margin-bottom: 30px;
}
#hd #zen-eyecare .eyecare-flickerfree .caption{
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    margin-top: 10px;
}
#hd #zen-eyecare .eyecare-flickerfree .caption > div{
    padding: 0 10px;
    text-align: center;
    width: 50%;
    box-sizing: border-box;
}

@media screen and (max-width: 500px) {    
#hd #zen-eyecare .eyecare-flickerfree .inner .text h4{
    font-size: 1.2em;
}
#hd #zen-eyecare .eyecare-flickerfree .caption{
    font-size: 0.8em;
}
}




/*-footnote-*/

#hd #zen-footnote{
    padding: 60px 40px;
    background: #eee;
}
#hd #zen-footnote ol{
    max-width: 1000px;
    margin: 0 auto;
    list-style-type: decimal;
    font-size: 0.8em;
    color: #888;
}
#hd #zen-footnote ol li{
    margin-bottom: 10px;
}