html,body
{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
    /* background-image: url("../img/background3.jpg"); */
    
    /* background-repeat: round; */
    background-repeat: no-repeat;
    background-size: cover;  /* 使用 cover 确保背景图片覆盖整个页面 */
    background-position: center center;  /* 背景图片居中 */
   

}



 body{
    font: 15px/1.5 Helvetica, Arial,Sans-Serif;
    padding:0;
    margin:0;
    color: #ffffff;



  }
#topline p {

  text-align: center;
  margin: 10;
  /* 移除默认的段落外边距 */
}

/* 隐藏手机屏幕的 <br> 标签 */
br.mobile-only {
  display: none;
}

/* 针对手机屏幕的样式 */
@media (max-width: 767px) {
  /* 显示手机屏幕的 <br> 标签 */
  br.mobile-only {
    display: inline;
  }

  /* 调整文字样式 */
  #topline p {
    font-size: 14px; /* 根据需要调整字体大小 */
    line-height: 1.5; /* 增加行高，使分行更清晰 */
  }
}


  header a{
    color:#f4f4f4;
    text-decoration:none;
    font-size:16px;
    padding:0px;

    font-weight:bold;
  }
header{


}




header li{
  float:right;
  display:inline;
  padding: 0 10px 0 5px;

}
header nav{
  float:right;
  margin-top:39px;
  margin-right: 80px;
}
/* Global */
.container{
  width:100%;
  margin:auto;
  overflow:hidden;
  position:relative;
 color:black;
 box-shadow:0 1px 12px black, 0 0 40px rgba(0, 0, 0, 0.1) inset;
 background-color:white;
  }


  .containerborder{
    display: inline-block;
    text-align: left;
    width:100%;
    margin:auto;
    overflow:hidden;
    position:relative;
   color:white;
   box-shadow:0 1px 12px black, 0 0 40px rgba(0, 0, 0, 0.1) inset;

     background-color:#811010;
    }

  .containerborder a {
      color: white; /* 设置链接颜色为白色 */
      text-decoration: none; /* 取消链接的下划线 */
      display: inline-block;
      text-align: left;
    }
  
  .containerborder a:hover {
      text-decoration: none; /* 悬停时取消下划线 */
  }

.containergrey{
  width:100%;
  margin:auto;
  overflow:hidden;
  background: grey; /* For browsers that do not support gradients */

 box-shadow:0 1px 12px black, 0 0 40px rgba(0, 0, 0, 0.1) inset;

position:relative;

  }

  .containerfull{
    width:100%;
    min-height:auto;
    margin:auto;
    overflow:hidden;
    background: white;
    position:relative;
 /* box-shadow:0 1px 12px black, 0 0 40px rgba(0, 0, 0, 0.1) inset; */
 

    }
    .containerred{
      width:60%;
      margin:auto;
      overflow:hidden;
      position:relative;
     color:black;
     /* box-shadow:0 1px 12px black, 0 0 40px rgba(0, 0, 0, 0.1) inset; */

       background-color:white;
      }

/* "form" by Donald to be used, edit or delete as needed*/


#form iframe{
   background-color:white;
   margin:auto;
  }



#logo{
  padding:0;
position:absolute;
   width:142px;
   top: 5px;
   left:80px;
   z-index: 99;


}


#display{
  /* min-height:450px; */
  /* background:url('../img/store.jpg') no-repeat 0 0px; */
  background: url('../img/store.jpg') no-repeat center center;
  background-size: contain;  /* 使用contain确保完整显示 */
  text-align:center;
  color:#ffffff;
  width:100%;
  margin:0;
  height: auto;  /* 使背景高度始终填充整个视口高度 */
  min-height: 450px; /* 最小高度为100%的视口高度，以确保背景图足够填充 */
/* background-size: cover; */


box-shadow:0 1px 12px black, 0 0 40px rgba(0, 0, 0, 0.1) inset;

}


#display2{
  min-height:450px;
  background:url('../img/stampback.png') no-repeat 0 0px;
  text-align:center;
  color:#ffffff;
   width:100%;
   margin:auto;

    box-shadow:0 1px 12px black, 0 0 40px rgba(0, 0, 0, 0.1) inset;
}





#about{
font: 14px/1.5 Arial, Helvetica, Sans-Serif;


}
#about p{
  margin: 20px;
}

#about H1{
  text-align: center;
}

/* #branding a:link, a:visited{
        color: black;
        text-decoration: none;
      }


#branding  a:hover, a:active {
        color:811010;
      }


      #spacing1 img{
        padding-left:80px;
      padding-top:12px;
      height:50px;
      float:left;

      } */

      #branding {
        width: 100%;
        padding: 20px 0;
        margin-bottom: 0; /* 移除下边距 */
        padding-bottom: 0; /* 移除下内边距 */
        
      }
      
      .containerfull {
        width: 100%;
        display: flex;
        justify-content: center;
      }
      
      #links {
        display: flex;
        justify-content: space-between;
        width: 300px; /* 设置固定宽度 */
      }
      
      #links ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: space-between;
        width: 100%;
        padding-bottom: 0;
      }
      
      #links ul li {
        text-align: center;
        padding-bottom: 0;
      }
      
      #links ul li a {
        text-decoration: none;
        color: #000;
        padding: 10px 20px;
        padding-bottom: 0;
      }
      
      #links ul li a:hover {
        background-color: #f0f0f0;
        padding-bottom: 0;
      }
      


#spacing img{
padding-top:20px;
padding-right:80px;
width: auto;    /* 宽度自动调整以保持比例 */
height: 150px;   /* 设置图片高度为60像素 */
/* float:right; */
display: block;  /* 使图片成为块级元素 */
margin-left: auto;  /* 左边距自动，配合右边距实现水平居中 */
margin-right: auto; /* 右边距自动，配合左边距实现水平居中 */
}




#photos img{
    width:49%;
    margin-left:6px;
}


.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: #811010;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

.dot {
  cursor: pointer;
  position:relative;
  margin-top:-10px;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: #811010 0.6s ease;
  z-index: 99;
}

.active, .dot:hover {
  background-color: #811010;
}

.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}




           #map {
             height: 400px;
             width:60%;
             margin:auto;
 box-shadow:0 1px 12px black, 0 0 40px rgba(0, 0, 0, 0.1) inset;
            }





@media(max-width: 768px){
.containerfull, .container, .containerred, .containergrey{
  width:100%;

}}



@media(max-width: 768px){
#display{
    width:100%;
    background:url('../img/store.jpg') no-repeat 0px 0px;
    /* background-size: cover; */
    background-size: contain;  /* 保证图片不会被裁剪 */
    height: auto; /* 让背景高度适应内容的高度 */
    min-height: 300px;  /* 调整最小高度 */
}}
@media(max-width: 768px){
#display2{
    width:100%;
background:url('../img/stampback.png') no-repeat -40px 0px;
}}

@media(max-width: 768px){
#topline p{
    margin:20px;
    text-align: center;
    margin: 0;

}}

@media(max-width: 768px){
#spacing1 img{
    padding-left:0px;
height:70px;
}}
@media(max-width: 768px){
#spacing img{

      padding-right:0px;
height:50px;
}}

@media(max-width: 768px){
header nav{
  float:left;
margin:5px;
margin-top:40px;


}}

@media(max-width: 768px){
  #logo{
     padding:0;
     position:absolute;
          width:100px;
     top: 4px;
     left:155px;
     z-index: 99;

  }}

@media(max-width:768px){
    
    #form{
   position:absolute;
   background-color:white;
   margin:auto;
   width:100%;
  }}
  @media(max-width:768px){
  #photos img{
    width:100%;
    margin-left:0px;
}}
  
footer{

  padding: 0px;
  margin-top:0px;
  color:#000000;
  background-color:#ffffff;
  text-align: left;
  border-top:#ffffff 1px solid;
}

footer p{
margin-left:5%;

}