/* #demo style - you can delete it */
#demo {
  position: relative;
  padding: 0;
}
#demo  div{
height:270px;
}
@media (max-width:480px ) {  
#demo  div.phoneslider{
height:400px;
display:none;
}
#demo  div{
height:50px;
background-image:none !important;
}
}
@media (min-width:768px ) {  
#demo  div.phoneslider{
height:330px;
}
#demo  div.phoneslider div{
height:330px;
}
}
@media (min-width:992px ) {  
#demo  div.phoneslider{
height:270px;
}
}
@media (min-width:1200px ) {  
#demo  div.phoneslider{
height:270px;
}
#demo  div.phoneslider div{
height:270px;
}
}

/*
@media (max-width: 767px) {
#demo  div.phoneslider{
height:140px;
}
}
*/

#demo > * {
  display: inline-block;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  border: none;
 /* -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
  -moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);*/

}
/* core style - don't delete */
.display-animation > * {
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
}
.display-animation > .animated {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
  -o-transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
  transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
}
.no-js .display-animation > * {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}