body{
    font-family: 'Open Sans', sans-serif;
    background: #FFF; 
    position:static;
    overflow: hidden;
    margin: 0;
    padding: 0;
    font-size: 16px;
}
#demo-header{
    background: #000;
    color:#FFF;
    position: absolute;
    width:100%;
    bottom:0; 
    -moz-transition: transform 0.3s ease-in-out;
    -webkit-transition: transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out;
    z-index: 9999;
}
.hide-demo-bar #demo-header{
    transform: translateY(100%);
    -ms-transform: translateY(100%);
    -webkit-transform: translateY(100%);
}
.hide-demo-bar #iframe{
    padding-bottom: 0;i
}
.demobar-logo{ 
    float: left;
    padding: 8px 10px;
    border-right:1px solid #333;
}
.demobar-dropdown{
    float: left;
}
.clearfix:after,
.clearfix:before{
    display: table;
    content: "";
}
.clearfix:after{
    clear:both;
}
#iframe{
    display: block;
    margin: 0 auto;
    min-height: 100vh;
    padding-bottom: 0px;
    -moz-transition: padding-bottom 0.3s ease-in-out;
    -webkit-transition: padding-bottom 0.3s ease-in-out;
    transition: padding-bottom 0.3s ease-in-out;
}
.demobar-dropdown{
    padding: 8px 20px;
}
.demobar-dropdown select{
    width:280px;
    font-size: 16px;
    height: 40px;
}
*{
    outline:0 !important;
}
.demo-button{
    float: right;
    transform: translateZ(0);
    -ms-transform: translateZ(0);
    -webkit-transform: translateZ(0); 
}
.demo-buy{
    background: #00C1CF;
    float: right;
    right: 0;
    color:#FFF !important;
    padding:0 20px;
    line-height: 60px;
    top:0;
    font-size:20px;
    text-decoration: none;
    height: 100%;
    text-decoration: none;
}

.demo-buy .fa{
    margin-right: 10px;
}
.demo-price{
    float: left; 
    font-size: 38px;
    margin-right: 20px;
}
.responsive-buttons{
    position: absolute;
    left: 50%;
    margin-left:-150px ;
    width: 300px;
    text-align: center;
    margin-top: 14px;
    transform: translateZ(0);
    -ms-transform: translateZ(0);
    -webkit-transform: translateZ(0);    
}
.responsive-buttons a{
    font-size: 28px;
    margin: 0 10px;
    color:#FFF;
    display: inline-block;
}
.responsive-buttons a:hover, .responsive-buttons a.active{
    color: #00C1CF !important;
}
.demo-rotate{
    -ms-transform: rotate(90deg); /* IE 9 */
    -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
    transform: rotate(90deg);
}
.demo-close{
    float: right;
    background: #C82027;
    color: #FFF !important;
    padding: 15px 0;
    font-size: 20px;
    cursor: pointer;
    line-height: 30px;
    width: 55px;
    text-align: center;
    transform: translateZ(0);
    -ms-transform: translateZ(0);
    -webkit-transform: translateZ(0);
}
.show-demo-bar{
    position: absolute;
    bottom: 100%;
    right: 20px;
    height: 60px;
    width: 55px;
    background: #333;
    text-align: center;
    line-height: 60px;
    color: #FFF;
    cursor: pointer;
    font-size: 24px;
    transform: translateY(200%);
    -ms-transform: translateY(200%);
    -webkit-transform: translateY(200%);
    -moz-transition: transform 0.3s ease-in-out;
    -webkit-transition: transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out;
}

.hide-demo-bar .show-demo-bar{
    transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
}

.spinner {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -50px 0 0 -20px;
}

.cube1, .cube2 {
  background-color: #333;
  width: 15px;
  height: 15px;
  position: absolute;
  top: 0;
  left: 0;
  
  -webkit-animation: sk-cubemove 1.8s infinite ease-in-out;
  animation: sk-cubemove 1.8s infinite ease-in-out;
}

.cube2 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

@-webkit-keyframes sk-cubemove {
  25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) }
  50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) }
  75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) }
  100% { -webkit-transform: rotate(-360deg) }
}

@keyframes sk-cubemove {
  25% { 
    transform: translateX(42px) rotate(-90deg) scale(0.5);
    -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
  } 50% { 
    transform: translateX(42px) translateY(42px) rotate(-179deg);
    -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
  } 50.1% { 
    transform: translateX(42px) translateY(42px) rotate(-180deg);
    -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
  } 75% { 
    transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
    -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
  } 100% { 
    transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
  }
}

@media screen and (max-width:1100px){
    .responsive-buttons{
        display:none;
    }
}

@media screen and (max-width:768px){
    .demobar-dropdown,
    .demobar-logo
    {
        display:none;
    }
}