.frame{width: 100%;background: #fff;border:4px solid #464646;border-radius: 2px;position: relative;}
.frame__head{width: 100%;padding:10px 40px 10px 55px; background: #464646; position: relative;height:40px;}
.addressbar{font-size: 0.8em;line-height: 1;display: block;text-align: left; background: #fff; border-radius: 3px;height: 20px;padding:4px 10px;color: #636161;}
.scroll-screen-btn {position: absolute;background-color: #fff;bottom: -17px;left: 40px;padding:0 20px;border: 2px solid #000;cursor: pointer;}
.frame__dots{background: #9d9c9c;width: 7px; height: 7px;border-radius: 100%; position: absolute;left:22px;top: 16px;}
.frame__dots:before,.frame__dots:after{background: #9d9c9c;width: 100%; height:  100%;border-radius: 100%; position: absolute;top: 0;content: "";}
.frame__dots:before{left:-12px;}
.frame__dots:after{right:-12px;}
.frame__lines{background: #9d9c9c;width:16px; height:3px;border-radius:3px; position: absolute;right:14px;top: 18px;}
.frame__lines:before,.frame__lines:after{background: #9d9c9c;width: 100%; height:  100%;border-radius:3px; position: absolute;content: "";left: 0;}
.frame__lines:before{top: -5px;}
.frame__lines:after{bottom:-5px;}
.screenshot {position: relative;background-repeat: no-repeat; background-size:cover; height:306px; width: 100%;}
.active .screenshot{animation:15s linear 0s infinite alternate tb-anim;-webkit-animation:15s linear 0s infinite alternate tb-anim; -ms-animation:15s linear 0s infinite alternate tb-anim;}
@keyframes tb-anim{
0%{background-position:0 0;}
10%{background-position:0 0;}
30%{background-position:0 33%;}
40%{background-position:0 33%;}
60%{background-position:0 66%;}
70%{background-position:0 66%;}
90%{background-position:0 100%;}
100%{background-position:0 100%;}
}

@-webkit-keyframes tb-anim{
0%{background-position:0 0;}
10%{background-position:0 0;}
30%{background-position:0 33%;}
40%{background-position:0 33%;}
60%{background-position:0 66%;}
70%{background-position:0 66%;}
90%{background-position:0 100%;}
100%{background-position:0 100%;}
}
/* media queries ---------------------- */

@media(min-width:1050px){
.button:hover{background: #464646;}
}
@media (min-width:1301px) and (max-width:1650px){
html, body{font-size: 14px;}
.arrow--rounded{top:20%;}
p{font-size: 1.1em;}
.box--white{margin:3em 0 2em;}
.section__subtitle:after{bottom: -8px;}
.section{padding-top: 4%;}
.section__title:before{font-size: 2.6em;}
.section--even .arrow--rounded{top:22%;}
.popup__content{padding-top: 2%;}
.section__title{padding-right: 10%; margin:4% 0 5%;font-size: 3em;}
}
@media(min-width:1501px) and (max-width:1650px){
.screenshot{height: 34em;}
.section__title{padding-right: 10%; margin-top:3%;font-size: 3em;}
.section--nria .section__title,.section--bogt .section__title{font-size: 2.4em;}
}
@media(min-width:1401px) and (max-width:1550px){
html, body{font-size: 13px;}
p{font-weight: normal;}
.screen__item.iphone img, .screen__item.iphone svg{top: 15%;}
.screenshot{height:28em;}
.popup__content{padding-top: 2%;max-width: 80%;}
.section--nria .section__title,.section--bogt .section__title{font-size: 2.2em;}
}
@media(min-width:1301px) and (max-width:1400px){
html, body{font-size: 13px;}
p{font-weight: normal;}
.screen__item.iphone img, .screen__item.iphone svg{top: 10%;}
.screenshot{height:306px;}
.popup__content{padding-top:1%;max-width: 80%;}
.section__title:before{font-size: 2.6em;}
.cols--flat li a{min-height: 200px;}
.cols--flat{margin-bottom: 2%;}
.scrollbar{height: 17em;}
.section--nria .section__title,.section--bogt .section__title{font-size: 2.2em;}
}
@media(min-width:1201px) and (max-width:1300px){
html, body{font-size: 12px;}
p{font-weight: normal;}
.popup__content{padding-top:1%;max-width:90%;}
.cols--flat li a{min-height: 200px;}
.cols--flat li p{max-width: 85%;}
.screenshot{height: 31em;}
.section__subtitle:after{bottom: -10px;}
.box--white{margin-top: 2em;}
.section__title{font-size: 2.8em;}
.arrow--rounded,.section--even .arrow--rounded{top: 10%;}
.cols--flat{margin-bottom: 2%;}
.scrollbar{height: 16em;}
.section--nria .section__title,.section--bogt .section__title{font-size: 2.2em;}
}
@media(max-width:767px){
html, body{font-size: 13px;}
h1{font-size:6em;}
h2{font-size:2.3em;font-weight: 900;font-family: 'Lato', sans-serif;}
h3{font-size:2em;font-weight:900;}
h4{font-size:1.8em;}
h5{font-size:1.2em;}
h6{font-size:1.1em; color: #858484;font-weight: 600; line-height: 1; padding: 0;}
p{font-size: 1.1em;}
.toggle--nav{opacity: 1; margin-top:7px;}
#rotate h2{top: 0;}
.sign--fatbit{font-size: 7em;top: 50%;}
.screen__subtitle{margin-top: 40px; line-height: 1.5;}
.body{padding-top:00px;}
#main{position: relative;}
.screen__item.keyboard img, .screen__item.keyboard svg{left: 46%;width: 50%;}
.screen__item.tablet img, .screen__item.tablet svg{width: 20%; right: 2%;}
.screen__item.coffee img, .screen__item.coffee svg{left: 6%; width: 10%;}
.screen__item.mouse img, .screen__item.mouse svg{left: 75%; width: 10%;}
.screen__item.ipod img, .screen__item.ipod svg{top: 60%;}
.screen__item.headphone img, .screen__item.headphone svg {right: 0;top: -5%;width: 55%;}
.screen__item.note img, .screen__item.note svg {right: 2%;top: 0;width: 13%;}
.screen__item.spectacles img, .screen__item.spectacles svg {left: 5%;top: -5%;width: 25%;}
.screen__item.iphone img, .screen__item.iphone svg {left: 3.5%;top: 20%;width: 30%;}
.screen__body{top: 45%;}
.section__left{width: 100%; height: auto;padding: 10px 3%;}
.section__right{width: 100%; height: auto;padding: 0 3%;}
.section{overflow: visible;}
.screenshot{height: 20em;}
.section__title{text-align: center; padding-right: 0;display: block; margin-top: 0;}
.arrow--rounded{display: none;}
.box--white{width: 100%;  padding: 10px 0 5px; margin: 10px 0 15px;border: 1px solid #eee;}
.section__title span{color: #585858;}
.section{height: auto;border-bottom: 1px solid #eee;display: inline-block;padding: 20px 0;}
.section.screen{height: 100%;}
.section__subtitle:before,.section__subtitle:after{display: none;}
.section__subtitle{height: auto; line-height: normal;}
.scrollbar{height: auto;}
.section__title:before{right: 0; color: rgba(0, 0, 0, 0.04);}
.popup__content{max-width: 100%;width: 100%;display: inline-block;}
.popup .logo{margin:8px 0 0 11px;}
.panel__right{width: 100%;border-top: 1px solid rgba(255,255,255,0.1);}
.panel__left{width: 100%; padding: 0 0 20px 0;}
.popup{overflow: scroll;}
.nav-show{overflow: hidden;}
#mousemove {margin: -20px;position: absolute;right: 30px;top: 30px;}
.link--close{width: 40px; height: 40px;right: 0; top: 0;background: none;}
.link--close:before, .link--close::after{ background: #fff;content: "";height: 3px;left: 8px;position: absolute;top: 18px;width: 25px;}
.popup__content h4{font-size: 1.6em;}
.popup__content h4 br{display: none;}
.cols--flat li{width: 50%;text-align: center;}
.cols--flat li p{max-width: 100%; margin: 0;}
.icon--items{width: 50px; height: 50px;}
.cols--flat li a{min-height: 160px;}
.panel__left .link{font-size: 1.3em;}
#main{display:none;}
.screen__body .screen__title {font-size: 1.5em;}
.screen--flash{display: block;}
.screen--flash {background-position: center top;}
.section.screen {height:250px;}
.sign--fatbit span:before{color: rgba(0, 0, 0, 0.03);}
.request_quote{display:none}
.panel_header_sec{margin-bottom:20px}
.panel_header_sec .panel_heading{padding-bottom:20px}
.panel_header_sec .panel_heading{font-size:2em}
.panel_left_new{float:none;width:100%}
.panel_right_new{float:none;width:100%;padding-left:0}
.cols-flat_new .img_block{float:none;margin-bottom:10px}
.cols-flat_new li a{min-height:80px}
.block_new_header h5{font-size:2em}
.block_new_details_sec{padding:20px 0}
.block_new_details_sec.last_sec{padding-bottom:20px}
.block_new_details_sec .img_block{width:20%}
.block_new_details_sec .block_new_details{width:80%}
.full_wd_list.half_wd_list li a{font-size:1em}
.imp_announcement_sec .user_announcement{font-size:1em}
}
@media(min-width:451px) and (max-width:500px){
.screen__item.keyboard img, .screen__item.keyboard svg{left:48%;width:45%;bottom: 0;}
.screen__item.tablet img, .screen__item.tablet svg{width:15%; right: 2%;}
.screen__item.coffee img, .screen__item.coffee svg{left: 6%; width:10%;bottom: 0;}
.screen__item.mouse img, .screen__item.mouse svg{left:75%; width:10%;}
.screen__item.ipod img, .screen__item.ipod svg{top:55%;}
.screen__item.headphone img, .screen__item.headphone svg {right: 0;top: -5%;width:45%;}
.screen__item.note img, .screen__item.note svg {right: 2%;top: 0;width:9%;}
.screen__item.spectacles img, .screen__item.spectacles svg {left: 5%;top: -10%;width: 20%;}
.screen__item.iphone img, .screen__item.iphone svg {left: 3.5%;top: 20%;width: 25%;}
}


@media (min-width:768px) and (max-width:990px){
html, body{font-size: 13px;}
h1{font-size:6em;}
h2{font-size:4.6em;font-weight: 900;font-family: 'Lato', sans-serif;}
h3{font-size:3em;font-weight:900;}
h4{font-size:2.9em;}
h5{font-size:2.8em;}
h6{font-size:2.5em; color: #858484;font-weight: 600; line-height: 1; padding: 0;}
p{font-size: 1.1em;}
.toggle--nav{opacity: 1; margin-top:7px;}
#rotate h2{top: 0;}
.sign--fatbit{top: 90%;}
.screen__subtitle{margin-top:80px; line-height: 1.5;}
#main{position: relative;}
.screen__item.keyboard img, .screen__item.keyboard svg{left: 42%;width:55%;bottom: 5%;}
.screen__item.tablet img, .screen__item.tablet svg{width: 20%; right: 2%;}
.screen__item.coffee img, .screen__item.coffee svg{left: 6%; width: 10%;}
.screen__item.mouse img, .screen__item.mouse svg{left: 75%; width: 10%;}
.screen__item.ipod img, .screen__item.ipod svg{top: 60%;}
.screen__item.headphone img, .screen__item.headphone svg {right: 0;top: 12%;width: 55%;}
.screen__item.note img, .screen__item.note svg {right: 2%;top: 5%;width: 13%;}
.screen__item.spectacles img, .screen__item.spectacles svg {left: 5%;top: 5%;width: 25%;}
.screen__item.iphone img, .screen__item.iphone svg {left: 3.5%;top: 20%;width: 30%;}
.screen__subtitle{font-size: 1.3em;}
.section{height: auto;border-bottom: 1px solid #eee;display: inline-block;padding: 20px 0;}
.section.screen{height: 100%;}
.screen__body{top: 50%;}
.section__left{width: 100%; height: auto;padding: 0 3%;}
.section__right{width: 100%; height: auto;padding: 0 3%;}
.arrow--rounded{display: none;}
.box--white{width: 100%;}
.section__title{text-align: center; padding-right: 0;display: block; margin-top: 0;}
.section__title span{color: #585858;}
.scrollbar{height: auto!important; overflow: visible!important;width: 100%!important;}
#mousemove {margin: -20px;position: absolute;right: 30px;top: 30px;}
.link--close{width: 40px; height: 40px;right: 0; top: 0;background: none;}
.link--close:before, .link--close::after{ background: #fff;content: "";height: 3px;left: 8px;position: absolute;top: 18px;width: 25px;}
.popup__content{max-width: 100%;width: 100%;display: inline-block;}
.popup .logo{margin:6px 0 0 10px;}
.icon--info{width: 22px; height: 22px;}
.popup__content h4{font-size: 2em;}
.popup__content h4 br{display: none;}
#main{display:none;}
.screen--flash{display: block;}
.screen--flash {background-position: center 20%;}
.section.screen {height:100vh;}
.sign--fatbit span:before{color: rgba(0, 0, 0, 0.03);}
.links--social li{margin-right: 15px;}
.panel__right{width: 34%;}
.request_quote {margin-top: 8px;font-size: 1.3em;}
.panel_right_new {padding-left: 30px;}
.screen__body .screen__title{font-size: 3em;}
}

@media (min-width:991px) and (max-width:1050px){
html, body{font-size: 12px;}
h1{font-size:6em;}
h2{font-size:4.6em;font-weight: 900;font-family: 'Lato', sans-serif;}
h3{font-size:2.4em;font-weight:900;}
h4{font-size:2.9em;}
h5{font-size:2.8em;}
h6{font-size:2.5em; color: #858484;font-weight: 600; line-height: 1; padding: 0;}
p{font-size: 1.1em;}
.sign--fatbit{font-size: 14em;top: 80%;}
.toggle--nav{opacity: 1; margin-top:7px;}
.screen__item.coffee img, .screen__item.coffee svg{left:10%; width:15%;}
.screen__item.ipod img, .screen__item.ipod svg{width: 30%;top: 44%;}
.screen__item.keyboard img, .screen__item.keyboard svg{left:45%;width:50%;bottom: 5%;}
.screen__item.tablet img, .screen__item.tablet svg{width:20%; right:1%;}
.screen__item.mouse img, .screen__item.mouse svg{left: 75%; width: 10%;}
.section{padding: 8% 0 5%;}
.section__title span{color: #585858;}
#rotate h2{top: -80px;}
.section__title{margin: 2% 0 8%;}
.arrow--rounded{top: 20%;}
.section--even .arrow--rounded{top: 22%;}
#mousemove {margin: -20px;position: absolute;right: 30px;top: 30px;}
.link--close{width: 40px; height: 40px;right: 10px; top: 5px;background: none;}
.link--close:before, .link--close:after{ background: #fff;content: "";height: 3px;left: 8px;position: absolute;top: 18px;width: 25px;}
.popup__content{max-width: 100%;width: 100%;display: inline-block;}
.popup .logo{margin:3px 0 0 12px;}
.section__subtitle:after{left: 3px; bottom: -5px;}
#main{display:none;}
.screen--flash{display: block;}
.screen--flash {background-position: center top;}
.sign--fatbit span:before{color: rgba(0, 0, 0, 0.03);}

.screenshot{height: 36em;}
.section{height: auto;}
.section.screen{height: 100vh;}
.request_quote{margin-top: 7px;}
.panel_right_new {
	padding-left: 50px;
}
.screen__body .screen__title{font-size: 3em;}

}


/*NEW CSS FOR STICKER*/
.sidebar-sticker {position: fixed;z-index: 999;right: 0;z-index: 100;bottom: 0;max-height: 765px;height: 100%;}
.fixed-right-btn {position: absolute;z-index: 999;right: 0;top: 46px;z-index: 4;}
@media screen and (max-height: 800px) {.fixed-right-btn {top: 130px;}}