#main { width: 100%; overflow: hidden; background-color: white; }

@media screen and (max-width: 1200px) {
  #mainpicBox{ display: none; }
  #roofBox { display: none; }  
  #roofBox.active { width: 100%; position: fixed; left: 0; top: 1.2rem; z-index: 200; overflow: hidden; }
}
@media screen and (min-width: 1201px) {
  #wrapper { padding-top:3rem; }
  #main { padding-top: 2rem; }
  #owl-demo1{ display: none; }
  #roofBox { display: none; }
  #roof, .logoCss{ display: none; }
}

h1{font-size: 1rem; color: black; text-align: center; margin-top: 0.3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.item {
    position: relative;
  }
.owlBoxD { border-color: #f67e79; width: 97%; margin:0 auto; border-style: dashed; border-width: 2px 0 0 0; margin-top: -2px; }
.pCss { display: block; width: 10rem; text-align: center; font-size: 1.5rem; background-color: #f67e79; color: white; padding: 1rem; margin-left: 1.5%;  border-top-right-radius: 0.5rem; border-top-left-radius: 0.5rem; }
.owl-controls {
      position: relative;
      top: -1rem;
      left: 0;
      transform: translate(0%,-100%);
      width: 100%;
}
.owl-dots {
      width: 100%;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
}

#beginBtn{ width: 8rem; height: 6.5rem; border-style: solid; border-width: 0.5rem; border-color: #f67e79; border-radius: 50%; text-align: center; font-size: 1.2rem; background-color: rgba(253, 228, 226, 0.4); color:#d83332; margin: 2rem auto ; padding-top: 1.5rem; box-shadow:0 0 10px -2px rgba(20%,20%,40%,0.5); font-weight:bold; cursor: pointer; transform-origin: 50% 50%; animation-name: bling; animation-duration: 2s; animation-iteration-count: infinite; } 
@keyframes bling{
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.likeBox { width: 80%; overflow: hidden; margin: 1rem auto 2rem auto; padding: 0.4rem 2% 0.8rem 2%; background-color: white; border-radius: 0.8rem; box-shadow:0 0 10px -3px rgba(20%,20%,40%,0.5); }

@media screen and (max-width: 1200px) {
  .pCss{ display: none; }
  .owlBoxD{ border: none; }
  #shopBox{
    /*background-image:url('images/murshop.jpg'); 
    background-repeat: no-repeat; 
    background-size: 100% auto;*/
    position: relative;
  }
  section { 
    background-image:url('images/murshop2.jpg'); 
    background-repeat: no-repeat; 
    background-size: 100% auto;
    margin-top:-1rem;
    margin-bottom: 0;
    padding-top: 3rem; 
    padding-bottom: 0;
  }
  .logoCss{
    width: 50%;
    padding: 0 2%;
    position: absolute;
    top: -2.5rem;
    left: 25%;
    background-color: #fde4e2;
    border-style: solid;
    border-color:#920d0d;
    border-width: 0.7rem;
    border-top-right-radius: 2rem;
    border-top-left-radius: 2rem;
    text-align:center;
    -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  }
  .introCss{ 
     display: block; width: 100%; padding: 1rem 0; margin:1rem auto; text-align:center; font-size:1.5rem; color:white; font-weight:bold; background-color: #982323; 
  }
}
@media screen and (min-width: 1201px) {
  body{ width: 100%; height: auto; background-color: white;
    background-image: linear-gradient(white, rgba(253, 233, 231, 0.5), white);}
  .introCss{ display: none; }
  #beginBtn{ width: 12rem; border-radius: 2rem; background-color: rgba(253, 228, 226, 0.2); }
  #beginBtn:hover{ background-color:rgba(253, 228, 226, 0.6); }
}