.gridtext { display: flex; align-items: center; justify-content: center }

html{
  font-family: 'ZCOOL XiaoWei', serif !important;
}

.first {
  background-image: url(images/main.jpg);
  background-repeat: no-repeat;
  background-size: cover;

  color: white;
  padding: 2%;
}

.second {
  background-image: url(images/main.jpg);
  background-repeat: no-repeat;
  background-size: cover;

  padding: 2%;
  color: white;
}


.first h1 {
  color: white;
}

.second h1 {
  color: white;
}


.firt a {
  color: white !important;
}

.second a {
  color: white !important;
}

.social li{
  font-size: 17px;
  display: inline-block;
  float:right;
  padding-right: 1%;
}

li a{
  color: white !important;
}

nav{
  margin-top: 6%;
  border-top: 2px solid white;
  font-size: 18px;
  font-weight: bold
}
 .pink{
   background-color: #b62b52;
 }

 .green{
   background-color: #769d2a;
 }

 .teal {
    background-color: #01a0a6;
 }

 .orange {
    background-color: #f0a315;
 }

 .purple {
    background-color: #0e3157;
 }

 .rose {
    background-color: #3b294d;
 }
 .poppy {
   background-color: #df571b;
 }


 @media (min-width: 576px) {
   .gridtext {
      height: 80px;
   }
 }

@media (min-width: 768px) {
   .gridtext {
      height: 161.7px;
   }
 }

 @media (min-width: 992px) {
   .gridtext {
      height: 215.6px;
   }
 }

 @media (min-width: 1200px) {
   .gridtext {
     height: 256px;
  }
 }




 a h2 {
   color: white;
   text-align:center;
   margin-top: 10pt;
   vertical-align: middle;
   font-size: 28px;
   font-weight: bold;
 }

a:hover {
 text-decoration: none!important;
  }

  .first .pink, .first .pic, .first .green, .first .teal .purple .rose{
   padding-right: 0px !important;
   padding-left: 0px!important;
  }

  .green a, .pink a, .teal a .orange a .purple a .rose a {
    padding: 6%;
  }

  .message{
    background-color: #73882b;
    opacity: 0.9;
    padding:3%;

  }

  .message p {
    text-align: justify
  }

  .message img{
    padding:3%;
  }

  .message a{
    color:white!important;
    text-decoration: none!important;

  }

  .message table
  {
    padding: 3%;
  }

  .message hr
  {
    background-color:white!important;
  }

  .message td
  {
    padding: 1%;
  }

.message button {
  background-color: white;
  padding: 1%;
  border-radius: 9%;
}

.what_to_do h2{
  padding: 2%;
  color: black;
}
.what_to_do i{
    font-size: 40px;
}
.what_to_do div {
    padding: 3%;
    color: #222828;
}

.what_to_do button,.four button{
  background-color: transparent;
  border-radius: 6px;
  padding: 3%;
}

.what_to_do button a{
  color:  #222828;
  font-variant: all-petite-caps;
}

.four {
  background-image: url(images/four.jpeg);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  height: 1000px;

}

.four h1{
  padding: 10%;
  color: white;
}

 .four button a{
   color: white;
   font-variant: all-petite-caps;
   font-size: 25px;
 }

 .five{
   padding: 3%;
 }

 .five img{
   width: 100%;
 }

 .six {
   background-color: #222828;
   color:white;
 }

.six i{
  font-size: 40px;
  text-align: center;
  padding: 5%;
}

.six p{
  padding: 0 30% 0 30%;
}

.people{
  border-top: 1px solid white;
}

.people img{
  padding: 6%;
  width: 100%;
  height: 300px;
}

.letter{
  background-image: url(images/letter.jpeg);
  background-size: cover;
  background-repeat: no-repeat;
  height: 400px;
  color: white;

}

.letter button a{
  color: black;
}

.letter h1{
  padding-top: 4%;
}

.letter button {
  background-color: white;
font-size: 20px;
border-radius: 5px;
font-variant-caps: all-petite-caps;
}

footer {
  background-color: black;
  color:white;
  padding: 4%;
}