body, .birdseye-header, #cpFramePanel, #helperFrame {-webkit-transition: all .8s ease-in-out; -moz-transition: all .8s ease-in-out; -ms-transition: all .8s ease-in-out; -o-transition: all .8s ease-in-out; transition: all .8s ease-in-out;}
body {width: 100%;}
body.cp-help, body.cp-help .birdseye-header  {width: 83%;}
body.cp-help .banner-wrap {background: none;}
body.cp-help #helperFrame {right: 17%;}

#cpFramePanel {width: calc(17% - 0px); width: -moz-calc(17% - 0px); width: -webkit-calc(17% - 0px); height: 100%; position: fixed; z-index: 9999; top: 0; right: 0; box-shadow: -25px 0 25px -25px #000; -moz-box-shadow: -25px 0 25px -25px #000; -webkit-box-shadow: -25px 0 25px -25px #000; background: #FFF;}
#cpFramePanel iframe {border: 0; z-index: 1; position: relative; max-width: 100%; width: 100%; height: 100%; display: block;}
#helperFrame {position: fixed; right: 0; top: 20%; z-index: 99999;}
#helperWidget {cursor: pointer;}

body.cp-off, body.cp-loading {width: 100% !important;}
body.cp-off #cpFramePanel, body.cp-off #helperFrame, body.cp-loading #cpFramePanel, body.cp-loading #helperFrame {display: none !important;}

@media only screen and (max-width : 1023px) {
    #helperFrame {top: auto !important; bottom: 10px;}
    #helperWidget {max-width: 80px;}
    body.cp-help #helperFrame {right: auto !important;}
    body.cp-help #cpFramePanel {width: calc(100% - 80px) !important; width: -moz-calc(100% - 80px) !important; width: -webkit-calc(100% - 80px) !important;}
}