@keyframes start0{
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  
  100% {
    opacity: 1;
  }
}

/*-----------*/
#banner,
.sidebar,
.pro5_res_info,
#_1,
.pro5_nav,
#_2,
#_3,
#_4,
#_slide,
#slide,
.dangoS {
  animation-name: start0;
  -webkit-animation-name: start0;
  -webkit-animation-duration: 4s;
  -o-animation-name: start0;
  -o-animation-duration: 4s;
  -moz-animation-name: start0;
  -moz-animation-duration: 4s;
  animation-duration: 4s;
}



#white{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
 
  background-color: #FFF;
  z-index: 1000
}

#loader {
  position: fixed;
  top: 0;
  left: 0;

  background-image: url("../media/loading.gif");
  z-index: 1001;
  background-size: contain ;
}


@keyframes back {
  0% {
    opacity: 1;
    width: 100%;
    height: 100%;
  } 
  70% {
    opacity: 1;
  }
  80% {
    opacity: 0;
    width: 100%;
    height: 100%;
  }
  100%{
    width:0;
    height: 0;
  }
}

#white,#loader {
  opacity: 0;
  animation-name: back;
  -webkit-animation-name: back;
  -webkit-animation-duration: 2.8s;
  -o-animation-name: back;
  -o-animation-duration: 2.8s;
  -moz-animation-name: back;
  -moz-animation-duration: 2.8s;
  animation-duration: 2.8s;
}

@media screen and (max-width: 1025px) {
  #banner,
.sidebar,
.pro5_res_info,
#_1,
.pro5_nav,
#_2,
#_3,
#_4,
#_slide,
#slide,
.dangoS {
  animation-name: start0;
  -webkit-animation-name: start0;
  -webkit-animation-duration: 0s;
  -o-animation-name: start0;
  -o-animation-duration: 0s;
  -moz-animation-name: start0;
  -moz-animation-duration: 0s;
  animation-duration: 0s;
}
}