.preloader-wrap {

  width: 100%;

  height: 100%;

  position: fixed;

  top: 0; 

  bottom: 0;

  background: rgba(0,0,0,1);

  z-index : 2; 

}



.percentage {

  z-index: 100;

  border: 1px solid #ccc;

  text-align:center;

  color: #fff;

  line-height: 30px;

  font-size : 15px;

}



.loader,

.percentage{

  height: 30px;

  max-width: 100%; 

  border: 2px solid #69AF23;

  border-radius: 0;

  font-weight: 300;

  position: absolute; 

  top: 0; 

  bottom: 0; 

  left: 0; 

  right: 0;

  margin : auto; 

}

.loader:after,

.percentage:after {

  content: "";

  display: block;

  width: 100%;

  height: 100%;

  position: absolute;

  top: 0;

  left: 0;

}



.trackbar {

  width: 100%;

  height: 100%;

  border-radius: 0;

  color: #fff;

  text-align: center;

  line-height: 30px;

  overflow: hidden;

  position: relative;

  opacity: 0.99;

}



.loadbar {

  width: 0%;

  height: 100%;

  background: repeating-linear-gradient(

  45deg, 

    #008737, 

    #008737 10px, 

    #69AF23 10px,

    #69AF23 20px

  ); /* Stripes Background Gradient */

  box-shadow: 0px 0px 14px 1px #008737; 

  position: absolute;

  top: 0;

  left: 0;

  animation: flicker 5s infinite;

  overflow: hidden;

}



.glow {

  width: 0%;

  height: 0%;

  border-radius: 0;

  box-shadow: 0px 0px 60px 10px #008737;

  position: absolute;

  bottom: -5px;

  animation: animation 5s infinite;

}



@keyframes animation {

  10% {

    opacity: 0.9;

  }

  30% {

    opacity: 0.86;

  }

  60% {

    opacity: 0.8;

  }

  80% {

    opacity: 0.75;

  }

}







.copyrights { 

  position: fixed;

  right: 20px;

  bottom: 20px;

  font-size: 14px;

  color: #fff;

  display: block;

}



.copyrights a { color: orange; text-decoration: none; }

.copyrights a:hover { color : #fff; text-decoration: underline; }





#pageoverlay{

  position:fixed;

  z-index:99999;

  top:0;

  left:0;

  bottom:0;

  right:0;

  transition: all 0.4s ease;

  display: none;

  margin: auto;

  height: 100px;

}



#pageoverlay.showloader{

  display: block !important;

}



#contents1{

  visibility: hidden !important;

}

#contents1.showloader{

  visibility: visible !important;

}



#load{

  width: 81px;

  height: 81px;

  z-index: 9999;

  background: url("../img/logo.png") no-repeat center center;

  animation: spinner_rotate_back 1s linear infinite;

  /*position: fixed;

  left: 0;

  right: 0;

  bottom: 0;

  top: 0;*/

  margin: auto;

}





#progress{

  height:2px;

  background:#fff;

  position:absolute;

  width:0;

  top:80%;

  transition: 1s;

}



#progstat{

  /*font-size: 18px;

  letter-spacing: 3px;

  position:absolute;

  top:80%;

  margin-top:40px;

  width:100%;

  text-align:center;

  color:#fff;*/

  transition: 0.4s;

}



.design_area{

  /*transform: scale(0.3, 0.3) translate(-51%, -55%);*/

  /*zoom: 0.5;*/

}



.canvas-container {

    /*transform: scale(0.33, 0.33) translate(-100%, -100%) !important;*/

    /*zoom: 0.32;*/

}



.canvas_area_front .canvas-container canvas{

  /*transform: scale(0.3);*/

}







@media screen and (min-device-width: 481px) and (max-device-width: 768px) { 

    /* STYLES HERE */

}



@media screen and (min-height: 400px) and (min-width: 400px){ 

  #turn { display:none !important;}

  #contents1 { visibility: visible !important; opacity: 1 !important; }

}





/* (A) WRONG ORIENTATION - SHOW MESSAGE HIDE CONTENT */

@media only screen and (orientation:landscape) {

  #turn { 

    display:block; 

    color: #fff;

    text-align: center;

    font-size: 24px;

    font-weight: 600;

    margin: auto;

    position: fixed;

    left: 0;

    top: -10px;

    bottom: 0;

    right: 0;

    height: 37px;

    width: 305px;

  }

  .slamdown{ display:none !important; }

  #contents1 {  visibility: hidden; opacity: 0; }

  .slamdown2 { visibility: visible !important; opacity: 1 !important; }

}

 

/* (B) CORRECT ORIENTATION - SHOW CONTENT HIDE MESSAGE */

@media only screen and (orientation:portrait) {

  #turn { display:none; }

  .slamdown{ display:none !important; }

  #contents1 { visibility: visible; opacity: 1; }

}



.preview_window .scrollbox{

  overflow-y: auto !important;

  overflow-x: auto !important;

}



#indicator{

  display: none;

  color: blue;

  text-align: center;

  font-size: 24px;

  font-weight: 600;

  margin: auto;

  position: fixed;

  left: 0;

  top: -10px;

  bottom: 0;

  right: 0;

  height: 37px;

  width: 305px;

  z-index: 999999999999999;

}



.indicator-show{

  display: block !important;

}