* {
  box-sizing: border-box;
  min-height: 0;
  min-width: 0;
}

body {
  margin: 0;
}

.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

h7 {
  letter-spacing: 0.5px;
  line-height: 20pt;
  margin-top: 0;
  padding-bottom: 0px;
  border-bottom-style: solid;
  border-bottom-width: 0.5px;
  margin-bottom: 15px;
  color: antiquewhite;
  /*font-family: 'Tajawal', serif;*/
  font-family: 'Marcellus', serif;
  font-weight: 500;
  font-size: 14pt;
}

h1, h2, h3, h5, h6, a {
  font-family: 'Marcellus', serif;
  font-weight: 500;
  letter-spacing: 0.5px;
}

h1 {
  font-size: 32pt;
  line-height: 42pt;
  padding-bottom: 15px;
  border-bottom-color: #835333;
  border-bottom-style: solid;
  border-bottom-width: 2px;
  margin: 0 0 25px 0;
  color: rgba(71, 75, 60);
}

h2 {
  font-size: 18pt;
  line-height: 26pt;
  margin-top: 0;
  padding-bottom: 10px;
  border-bottom-color: #835333;
  border-bottom-style: solid;
  border-bottom-width: 2px;
  margin-bottom: 15px;
  color: rgba(71, 75, 60);
}

.subtitle2 {
  border-bottom-style: none;
  margin-bottom: ;
}

h3 {
  color: rgba(71, 75, 60);
  line-height: 20pt;
  font-size: 13pt;
}

p, .membershipinfo ul, select, td {
  font-family: 'Tajawal', sans-serif;
  font-size: 15pt;
  line-height: 23pt;
  margin-top: 0;
  font-weight: 500;
  letter-spacing: 0.25px;
}

.inputs {
  font-size: 11pt;
  display: inline-block;
  padding-top: 10px;
}

a {
  text-decoration: none;
  font-size: 13pt;
  line-height: 18pt;
  color: #657c38;
}

a:visited {
  color: #727860;
}

a:hover {
  text-decoration: underline;
  font-size: 13pt;
}

a:active {
  color: #727860;
}

.bylawsbutton a, .JSYSarchivebutton a, .listservbutton a, .songtoolsPDFguidebutton a {
    background-color: #8f9779;
    border-radius: 100px;
    color: antiquewhite;
    display: inline-block;
    padding: 15px 20px 15px 20px;
}

.membershipinfo .membershipformbutton a, .announcementsbutton a {
  background-color: #727860;
  border-radius: 100px;
  color: antiquewhite;
  display: inline-block;
  padding: 15px 20px 15px 20px;
}

.homelatest a, .JSYScopy2 a, .membershipinfo a, .newseventscontainer2 a {
  color: #c0d093;
}

.JSYScopy2 a:visited, .homelatest a:visited, .membershipinfo a:visited, .newseventscopycontainer2 a:visited, .resourcescontainer a:visited, .column2 a:visited, .column3 a:visited, .creditcontainer a:visited {
  color: #646954;
}

.membershipinfo .membershipformbutton a:visited {
  color: antiquewhite;
}

.announcementsbutton a:hover, .bylawsbutton a:hover, .JSYSarchivebutton a:hover, .membershipinfo .membershipformbutton a:hover, .listservbutton a:hover, .songtoolsPDFguidebutton a:hover {
  background-color: rgba(133, 57, 53, 0.9);
  color: antiquewhite;
  transition-timing-function: ease-in-out;
}

.banner, .songtoolsbanner1, .yuantoolsbanner1 {
  box-shadow: 0 10px 10px 0 rgba(0, 0, 0, .5);
  position: relative;
}

.bodycontainer {
  width: 100%;
  background-image: url(images/bg1.jpg);
}

.bodycontainer2 {
  width: 65%;
  position: relative;
  margin: auto;
  bottom: 130px;
  box-shadow: 0 30px 30px 0 rgba(0, 0, 0, .5);
  background-color: rgba(250, 235, 215, 1.0);
}

.banner, .songtoolsbanner1, .yuantoolsbanner1 {
    height: 405px;
}

.songtoolsbanner2, .yuantoolsbanner2 {
    height: 300px;
}

.homelatest, .officersrow, .JSYScopy2, .membershipinfo, .newseventscontainer2, .JSYScontainer1, .resourcescontainer, .editorsboardcontainer1, .songtoolscontainer2, .footer {
  background-color: rgb(143, 151, 121);
}

.footer {
  height: auto;
  padding: 55px 0px 55px 0px;
  width: 100%;
    box-shadow: inset 0 15px 35px rgba(0, 0, 0, .5);
}

.footercontainer {
  width: 65%;
  margin: auto;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.contactcontainer {
    width: 100%;
    display: -ms-flexbox;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
    border-bottom-color: #835333;
  border-bottom-style: solid;
  border-bottom-width: 2px;
    margin-bottom: 25px;
    
}

.footercontainer .column1, .footercontainer .column2, .footercontainer .column3 {
  width: auto;
}

.contactcopy, .column2 p, .column3 p, .column1 a, .column2 a, .column3 a {
  color: antiquewhite;
}

.creditcontainer p, .creditcontainer a {
    font-size: 10.5pt;
    color: antiquewhite;
}

.creditcontainer a {
    margin: 0px;
}

.creditcontainer p {
    font-size: 14pt;
    line-height: 21pt;
    margin-bottom: 15px;
}

.footer2 {
  height: 50px;
  background-color: #727860;
}

/* 48em = 768px */
@media (min-width: 78em) {
  .header li {
    float: left;
  }

  .header li a {
    padding: 20px 30px;
  }

  .header .menu {
    clear: none;
    float: right;
    max-height: none;
    height: 500px;
  }

  .header .menu-icon {
    display: none;
  }
}

/* Tablet -------*/
@media only screen and (min-width: 768px) and (max-width: 1024px) {

  .bodycontainer2, .footercontainer {
    width: 85%;
  }

  .footercontainer .column1, .footercontainer .column2, .footercontainer.column3 {
    width: 30%;
  }
}

/* Smartphones (portrait and landscape) ------- */
@media only screen and (min-width: 120px) and (max-width: 780px) {
  h1, h2, h3, h5, h6, a {
    font-weight: 900pt;
    letter-spacing: 0;
  }

  h1 {
    font-size: 24pt;
    line-height: 34pt;
  }

  h2 {
      font-size: 14pt;
    line-height: 24pt;
  }

  .bodycontainer2 {
    width: 100%;
    bottom: 0;
      box-shadow: none;
  }

  .banner, .songtoolsbanner1, .songtoolsbanner2, .yuantoolsbanner1, .yuantoolsbanner2 {
    height: 200px;
    background-size: cover;
    background-position: center;
  }

  .header ul {
    height: auto;
  }
    
    .contactcontainer {
        flex-direction: column;
    }

  .column1, .column2, .column3 {
    width: 100%;
  }
    
    .contactcopy p, .column1 p.column2 p {
        margin: 0;
    } 

  .footer {
    padding: 35px;
    box-shadow: none;
  }

  .footercontainer {
    width: 100%;
    flex-direction: column;
  }

  .footercontainer .column1, .footercontainer .column2, .footercontainer .column3 {
    width: 100%;
  }
}

.header {
  background-color: rgb(142, 148, 119);
  box-shadow: 1px 3px 4px 0 rgba(0, 0, 0, .5);
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1;
}

.header ul {
  /*margin: 0;*/
  /*padding: 0;*/
  /*list-style: none;*/
  /*overflow: hidden;*/
  /*background-color: rgba(143,151,121, 0.97);*/
}

.header li a:first-of-type {
  /*padding: 17px 19px 12px 19px;*/
}

.header li a, .dropbtn {
  /*display: block;*/
  /*color: antiquewhite;*/
  /*font-size: 12pt;*/
  /*font-family: 'Tajawal', sans-serif;*/
}

.header li a:hover,
.header .menu-btn:hover {
  /*background-color: rgb(255,255,240);*/
  /*color: #383838;*/
}

.header .logo {
  /*display: block;*/
  /*float: left;*/
  /*height: 50px;*/
  /*width: 209px;*/
  /*font-size: 16pt;*/
  /*background-image: url(images/logo.png);*/
  /*background-size: contain;*/
  /*background-repeat: no-repeat;*/
}

.header .logo:hover {
  /*color: rgba(0, 0, 0, 0.65);*/
}

.dropdown {
  /*display: block;*/
  /*min-width: inherit;*/
}

.dropdown-content {
  /*display: none;*/
  /*background-color: #8f9779;*/
  /*width: auto;*/
  /*position: absolute;*/
  /*z-index: 1;*/
}

.dropdown:hover .dropdown-content {
  /*display: block;*/
}

/* menu */
.header .menu {
  /*clear: both;*/
  /*max-height: 0;*/
  /*transition: max-height .2s ease-out;*/
}

/* menu icon */
.header .menu-icon {
  /*cursor: pointer;*/
  /*display: inline-block;*/
  /*float: right;*/
  /*padding: 28px 20px;*/
  /*position: relative;*/
  /*user-select: none;*/
}

.header .menu-icon .navicon {
  /*background: #333;*/
  /*display: block;*/
  /*height: 2px;*/
  /*position: relative;*/
  /*transition: background .2s ease-out;*/
  /*width: 18px;*/
}

.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
  /*background: #333;*/
  /*content: '';*/
  /*display: block;*/
  /*height: 100%;*/
  /*position: absolute;*/
  /*transition: all .2s ease-out;*/
  /*width: 100%;*/
}

.header .menu-icon .navicon:before {
  /*top: 5px;*/
}

.header .menu-icon .navicon:after {
  /*top: -5px;*/
}

/* menu btn */
.header .menu-btn {
  /*display: none;*/
}

.header .menu-btn:checked~.menu {
  /*max-height: 540px;*/
}

.header .menu-btn:checked~.menu-icon .navicon {
  /*background: transparent;*/
}

.header .menu-btn:checked~.menu-icon .navicon:before {
  /*transform: rotate(-45deg);*/
}

.header .menu-btn:checked~.menu-icon .navicon:after {
  /*transform: rotate(45deg);*/
}

.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:after {
  /*top: 0;*/
}

.column1, .column2, .column3 {
  /*width: 17%;*/
}

/* 48em = 768px */
@media (min-width: 78em) {
  .header li {
    /*float: left;*/
  }

  .header li a {
    /*padding: 20px 30px;*/
  }

  .header .menu {
    /*clear: none;*/
    /*float: right;*/
    /*max-height: none;*/
    /*height: auto;*/
  }

  .header .menu-icon {
    /*display: none;*/
  }
}