::-webkit-scrollbar {width:3px}
::-webkit-scrollbar-thumb {border-radius:8px;background:rgba(0,0,0,0.2)}
::-webkit-scrollbar-thumb:window-inactive {background:rgba(0,0,0,0.1)}
::-webkit-scrollbar-thumb:vertical:hover {background-color:rgba(0,0,0,0.3)}
::-webkit-scrollbar-thumb:vertical:active {background-color:rgba(0,0,0,0.7)}
body {min-width: 320px; overflow: hidden; width: 100%}
img { border: 0 none; height: auto; max-width: 100%; vertical-align: middle }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: middle }
.mfp-preloader:after { width: 30% !important }
#advanced { background: #222; position: relative; z-index: 998; height: 60px; width: 100%;}
#advanced .container-fluid, #advanced .row {height: 100%;}
#advanced .demo-bar, #responsivator {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1 1 0px; flex: 1 1 0; }
#advanced .demo-bar {height: 100%; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.demo-bar .demo-bar__logo a:hover {text-decoration: none; }
.demo-bar .demo-bar__logo img {-webkit-filter: invert(1); filter: invert(1); }
.demo-bar .demo-bar__logo .back {position: relative; display: inline-block; font-size: 0.875rem; line-height: 1rem; color: #fff; padding-left: 15px; }
.demo-bar .demo-bar__logo .back:before {content: ""; display: block; position: absolute; top: 4px; left: 6px; width: 5px; height: 5px; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: rotate(225deg); transform: rotate(225deg); box-shadow: inset -1px 1px 0 0 #fff; border-radius: 0 0.5px 0 0; }
.demo-bar .demo-bar__devices {padding-right: 50px; }
.demo-bar .demo-bar__devices svg {fill: #fff; width: 40px; }
.demo-bar .demo-bar__page {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.demo-bar .demo-bar__website {color: #fff; margin-right: 1rem; }
.demo-bar .demo-bar__select {position: relative; min-width: 170px; }
.demo-bar .demo-bar__select select::-ms-expand {display: none; }
.demo-bar .demo-bar__select:before, .demo-bar .demo-bar__select:after {content: ""; display: block; position: absolute; top: 21px; right: 20px; width: 6px; height: 6px; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: translate(0, -8px) rotate(-45deg); transform: translate(0, -8px) rotate(-45deg); box-shadow: inset -1px 1px 0 0 #fff; border-radius: 0 0.5px 0 0; pointer-events: none; }
.demo-bar .demo-bar__select:after {top: 24px; -webkit-transform: translate(0, -8px) rotate(135deg); transform: translate(0, -8px) rotate(135deg); }
.demo-bar .demo-bar__select select {-webkit-appearance: none; -moz-appearance: none; appearance: none; font-family: 'Rubik', sans-serif; display: block; width: 100%; max-width: 180px; height: 35px; padding: 0px 20px; color: #fff; background-color: transparent; background-image: none; border: 1px solid #fff; border-radius: 20px; cursor: pointer; -ms-word-break: normal; word-break: normal; }
.demo-bar .demo-bar__select select:focus {outline: 0;}
#desktop, #tablet-landscape, #tablet-portrait, #iphone-portrait { opacity: .4; cursor: pointer; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; }
#desktop:hover, #desktop.active, #tablet-landscape:hover, #tablet-landscape.active, #tablet-portrait:hover, #tablet-portrait.active, #iphone-portrait:hover, #iphone-portrait.active { opacity: 1 }
#headerlivedemo .trigger { cursor: pointer; display: block; height: 60px; position: absolute; right: 0; top: 0; width: 60px; z-index: 999; background: #333; }
#headerlivedemo .trigger:before { color: #78909c; font-size: 22px; top: 14px; position: absolute; left: 15px }
.arrow span {top: 27px; position: absolute; width: 12px; height: 1px; background-color: #fff; display: inline-block; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; }
.arrow span:first-of-type {left: 20px; -webkit-transform: rotate(45deg); transform: rotate(45deg);}
.arrow span:last-of-type {right: 20px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}
.arrow.active span:first-of-type {-webkit-transform: rotate(-45deg); transform: rotate(-45deg);}
.arrow.active span:last-of-type {-webkit-transform: rotate(45deg); transform: rotate(45deg);}
iframe, #iframelive { width: 100%; background-color: #fff }
#iframelive.stretched { overflow: auto }
*+html #iframelive.stretched { height: 100% }
*+html #iframelive.stretched iframe { height: 100% }
.opera #iframelive.stretched iframe { height: 100% }
#iframelive.tablet-landscape, #iframelive.tablet-portrait, #iframelive.iphone-landscape, #iframelive.iphone-portrait { height: 94%; overflow: auto }
#iframelive { height: 100%; background: #cfd8dc }
#iframelive.desktop iframe { width: 100%; margin: 0 }
#iframelive.desktop #frameWrapper { background: 0; margin: 0; height: 100% }
#iframelive.tablet-portrait iframe { width: 796px; height: 930px !important; margin: 70px 0 0 7px }
#iframelive.tablet-portrait #frameWrapper { background: url('../img/ipad.svg?c41ed2a'); width: 810px; height: 1080px; margin: 20px auto }
#iframelive.iphone-portrait iframe { width: 360px; height: 620px !important; margin: 50px 0 0 7px }
#iframelive.iphone-portrait #frameWrapper { background: url('../img/iphone.svg?c41ed2a'); width: 375px; height: 715px; margin: 20px auto }
#iframelive.tablet-landscape iframe { width: 1000px; height: 728px !important; margin: 75px 0 0 7px; border-bottom-left-radius: 37px; overflow-x: hidden }
#iframelive.tablet-landscape #frameWrapper { background: url('../img/ipad-landscape.svg?c41ed2a'); width: 1080px; height: 810px; margin: 20px auto; overflow: auto }
#frameWrapper { background: none repeat scroll 0 0 transparent; height: 100%; margin: 0 }
#frame { position: relative; height: 100%; border: 0 }
@media (max-width: 768px) {
    .demo-bar .demo-bar__website, .demo-bar__devices, #headerlivedemo .trigger {display: none;}
}