/* start copied */
@import url('https://fonts.googleapis.com/css?family=Oswald');
/*Set height of body and the document to 100% to enable "full page tabs" */
body, html {
  height: 100%;
  margin: 8;
  /* font-family: 'Oswald'; */
}

/* Style tab links */
.tablink {
  background-color: #fcc288;
  color: rgb(70, 34, 0);
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  font-size: 17px;
  width: 33.333%;
  font-family: 'Oswald',sans-serif;
  text-transform: uppercase;
  letter-spacing: 10px;
}


.tablink:hover {
  background-color: #ffe2ba;
}

/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
  background-color: black;
  color: white;
  display: none;
  padding: 100px 20px;
  height: 100%;
}

#Marches {background-color: white;}
#Petitions {background-color: white;}
#Other {background-color: white;}

/* end copied */
/* button styling */
.container {
    overflow: hidden;
}

.filterDiv {
    display: none; /* Hidden by default */
}

/* The "show" class is added to the filtered elements */
.show {
    display: block;
}

/* Style the buttons */
.btn {
  border: none;
  outline: none;
  padding: 12px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
}

/* Add a light grey background on mouse-over */
.btn:hover {
  background-color: #ddd;
}

/* Add a dark background to the active button */
.btn.active {
  background-color: #666;
  color: white;
}

/* end button styling */


 .card {
    /* Add shadows to create the "card" effect */
   //margin-top: 15px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.5);
    transition: 0.3s;
    width: 50%;
   // visibility: visible;

}

/* On mouse-over, add a deeper shadow */
.card:hover {
    box-shadow: 0 8px 16px 0 rgba(1,1,1,1);
}



/* Add some padding inside the card container */
/* .cardcontainer {
    padding: 2px 16px;
    visibility:visible;
    overflow: hidden;
} */
.container {
    padding: 2px 16px;
    /* visibility:hidden; */
}

.flex-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    overflow: hidden;
  }



 h1 {
      font-family:'Oswald', sans-serif;
      font-size:24px;
      font-weight:400;
      text-align: center;
      text-transform: uppercase;
      color:black;
      padding:0;
      margin:0;
    }
 h2 {font-family:'Oswald', sans-serif; font-size:70px; letter-spacing:10px; text-align:center; color:white; font-weight:400; text-transform:uppercase; z-index:10; opacity:.8;}
 h3 {font-family:'Oswald', sans-serif;
      font-size:14px;
      line-height:0;
      font-weight:400;
      letter-spacing:8px;
      text-transform: uppercase;
      color:black;}
 p {font-family:'Source Sans Pro', sans-serif; font-weight:400; font-size:14px; line-height:24px; color: black;}
.first-character {font-weight:400; float: left; font-size: 84px; line-height: 64px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: 'Source Sans Pro', sans-serif;}

#topofpage {
  font-family: 'Oswald', sans-serif;
  font-weight:400;
  text-transform: uppercase;
}


 .title {background: white; padding: 60px; margin:0 auto; text-align:center;}

 .title h1 {font-size:35px; letter-spacing:8px;}

/* Section - Block */
/**************************/
#parallax-scroll .text-blocks {background: white; padding: 60px; width:820px; margin:0 auto; text-align:justify;}
#parallax-scroll .block-gray {background: #f2f2f2;padding: 60px;}
#parallax-scroll .section-overlay-mask {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: black; opacity: 0.70;}

/* Section - Parallax */
/**************************/
#parallax-scroll .parallax-one {padding-top: 100px; padding-bottom: 100px; overflow: hidden; position: relative; width: 100%; background-image: url("https://d15gqlu8dfiqiu.cloudfront.net/s3fs-public/styles/banner/public/images/chapters/new_york_background.jpg"); background-attachment: fixed; background-size: cover; -moz-background-size: cover; -webkit-background-size: cover; background-repeat: no-repeat; background-position: top center;}

/* Extras */
#parallax-scroll .line-break {border-bottom:1px solid black; width: 150px; margin:0 auto;}

/* Media Queries */
@media screen and (max-width: 959px) and (min-width: 768px) {
  #parallax-scroll .block {padding: 40px; width:620px;}
}
@media screen and (max-width: 767px) {
  #parallax-scroll .block {padding: 30px; width:420px;}
  #parallax-scroll h2 {font-size:30px;}
  #parallax-scroll .block {padding: 30px;}
  #parallax-scroll .parallax-one, #parallax-scroll .parallax-two, #parallax-scroll .parallax-three {padding-top:100px; padding-bottom:100px;}
}

@media screen and (max-width: 479px) {
  #parallax-scroll .block {
  padding: 30px 15px;
  width:290px;
  }
}



/*navbar*/
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a, .dropbtn {
    display: inline-block;
    font-family: 'Oswald';
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
    background-color: rgb(65, 65, 65);
}

li.dropdown {
    display: inline-block;
}

.dropdown-content {
    font-family: 'Oswald';
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    font-family: 'Oswald';
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

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

#clickOut{
  margin-top: 15px;
  color: black;
  background-color: white;
  font-family:'Oswald', sans-serif;
  text-transform: uppercase;
}
#Oswald {
  font-family: "Oswald," sans-serif;
}

/* collapsible styling */
/* Style the button that is used to open and close the collapsible content */
.collapsible {
  background-color: rgb(83, 83, 83);
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: 3px;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active1, .collapsible:hover {
  background-color: rgb(97, 97, 97);
}

/* Style the collapsible content. Note: hidden by default */
.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}

/* plus/minus stuff */
.collapsible:after {
    content: '\02795'; /* Unicode character for "plus" sign (+) */
    font-size: 13px;
    color: white;
    float: right;
    margin-left: 5px;
}

.active1:after {
    content: "\2796"; /* Unicode character for "minus" sign (-) */
    color: white;
}