/* .sr .load-hidden {
  visibility: hidden;
}  */
/* ADD THE LOAD HIDDEN CLSAS TO EVERYTHING SO IT DOESNT GLITCH */

/* NAVBAR */

body,html{
  background-color:#454140;
  text-align: center;
  scroll-behavior: smooth;
  font-family: Montserrat;
}

a{
  cursor: pointer;
}

.navbar{
  border-bottom: 5px solid #FFA986;
  font-family: Montserrat;
  /* height: 90px;  */
}

.fa-bars {
  color: #FFA986;
}

.navbar, .dropdown-menu{
  text-align: center;
  background-color: #454140;
  color: #FFA986;
}

.navbar a{
  color: #FFA986;
}

.dropdown-divider{
  border-top: 1px solid #FFA986;
}

.navbar a:hover, .navbar a:focus{
  color:white;
  transition: color .5s;
}

.dropdown-item:focus, .dropdown-item:hover{
  background-color: transparent;
}

.navbar-brand{
  font-family: Mr Dafoe; 
  font-size:2rem;
  padding-left:20px;
}

.main1 h1{
  font-family: Mr Dafoe; 
  font-size:4rem;
  color:#FFA986;
}

.main2 h1{
  font-family: Mr Dafoe; 
  font-size:4rem;
  color:#454140;
}

.custom-toggler.navbar-toggler {
  border-color: #FFA986;
}

.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#FFA986' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.dropdown-menu{
  border:none;
}

.navbar-brand, ul a {
  animation: fadein 2s;
  -moz-animation: fadein 2s; /* Firefox */
  -webkit-animation: fadein 2s; /* Safari and Chrome */
  -o-animation: fadein 2s; /* Opera */
}

/* MAIN CONTENT */
.main1{
  z-index:10;
  background-color:#454140;
  color:#FFA986;
}

.main1 h1{
  padding-top:15px;
}

.main3{
  z-index:15;
  background-color:#FFA986;
  color:#454140;
}

.main2{
  background-color: #FFA986;
  color:#454140;
}

/* .main2 p {
  font-family: Montserrat;
} */

.main2.first.upcoming {
  background: #FFA986;
  color: #FFA986;
  /* color:#454140; */
}

@media (max-width:500px){	
  h1{
    font-size:1.5rem;
  }
}

/* .main1{
  margin-top:100px;
} */

.first{
  margin-top:90px;
}

.anchor{
  display: block;
  height: 90px; /*same height as header*/
  margin-top: -100px; /*same height as header*/
  visibility: hidden;
} /*so when we click it, it goes to the right place*/

hr.style1{
  overflow: visible; /* For IE */
  height: 30px;
  border-style: solid;
  border-color: black;
  border-width: 4px 0 0 0;
  border-radius: 20px;
}

hr.style1:before { /* Not really supposed to work, but does */
  display: block;
  content: "";
  height: 30px;
  margin-top: -31px;
  border-style: solid;
  border-color: black;
  border-width: 0 0 4px 0;
  border-radius: 20px;
}

hr.style5 {
  border: 0;
  height: 0; /* Firefox... */
  box-shadow: 0 0 10px 1px #454140;
}

hr.style5.pink{
  box-shadow: 0 0 10px 1px #FFA986;
}

hr.style5:after {
  content: "\00a0";  
}

/* Flaired edges, by Tomas Theunissen */

hr.style7 {
  overflow: visible; /* For IE */
  height: 30px;
  border-style: solid;
  border-color: #454140;
  border-width: 1px 0 0 0;
  border-radius: 20px;
  margin-top:50px;
}
hr.style7:before { /* Not really supposed to work, but does */
  display: block;
  content: "";
  height: 30px;
  margin-top: -31px;
  border-style: solid;
  border-color: #454140;
  border-width: 0 0 1px 0;
  border-radius: 20px;
}

.body_cont{
  padding-bottom: 25px;
  padding-top:15px;
}

.first .body_cont { 
  padding-top: 50px;
}

.img-fluid{
  max-width:100%;
  padding-top:15px;
}

.main3 h1{
  font-family: Montserrat;
  font-size:2rem;
  color:#454140;
  font-style: italic;
  font-weight: bold;
}

.main1 h6, .main3 h6{
font-weight: bold;
}

#footer h6{
  padding-top: 5px;
}

h6 a{
  font-family: Mr Dafoe;
  font-size:2rem;
  padding-top: 5px;
  color:#FFA986 ;
}

h6 a:hover, h6 a:active{
  color: white;
  text-decoration: none;
}

blockquote p{
  text-align: left;
}

@media(max-width: 767px){
  /*this is when the image flyer should disappear, and the descriptions of the classes should appear between the two buttons*/
  .show_flyer{
    display:block;
    margin:10px;
  }
  #upcoming_event_flyer{
    display: none;
  }
}

#logo{
  height:50px;
  width:100px;
  background-color: white;
  margin:10px;
}

h1, h2{
  padding-top:10px;
}

/*#mc_embed_signup .container{
  width:400px;
}*/

.mc-field-group{
  text-align: left;
  padding:5px;
}

@media(min-width:900px){
  .mc-field-group{
    padding-left:150px;
    padding-right: 150px;
  }
}

.change{
  width:100%;
}

.clear{
  padding-bottom:10px;
  font-family: Montserrat;
}

p{
  font-family: Montserrat;
}

.bold{
  font-weight: 700;
}

/*Contact Form Page*/

.fixthis{
  padding-top: 15px;
  padding-bottom: 15px;
}

.form-group{
  text-align: left;
}

.col-3{
  padding-left:40px;
}

.col-9{
  padding-right: 40px;
}

#footer a {
  color:#FFA986;
}

#footer a:hover, #footer a:active {
  color:white;
  text-decoration: none;
  transition: color .3s;
}

#footer{
  margin-top:0;
  border-top: 5px solid #FFA986;
}

#footer .row{
  margin-right: 0;
  margin-left: 0;
}

#designed h5{
  background-color:#FFA986;
  color:#454140; 
  font-size: 12px;
  font-family: Montserrat;
}

#designed h5
{
  margin-bottom:0;
  padding:5px;
}


@keyframes fadein {
  from {
    opacity:0;
  }
  to {
    opacity:1;
  }
}
@-moz-keyframes fadein { /* xrefox */
  from {
    opacity:0;
  }
  to {
    opacity:1;
  }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
  from {
    opacity:0;
  }
  to {
    opacity:1;
  }
}
@-o-keyframes fadein { /* Opera */
  from {
    opacity:0;
  }
  to {
    opacity: 1;
  }
}

@-webkit-keyframes fadeout { /* Safari and Chrome */
  from {
    opacity:1;
  }
  to {
    opacity:0;
  }
}

blockquote {
  font-family: Georgia, serif;
  position: relative;
  margin: 0.5em;
  padding: 0.5em 2em 0.5em 3em;
}
/* Thanks: http://callmenick.com/post/styling-blockquotes-with-css-pseudo-classes */
blockquote:before {
  font-family: Georgia, serif;
  position: absolute;
  font-size: 6em;
  line-height: 1;
  top: 0;
  left: 0;
  content: "\201C";
}
blockquote:after {
  font-family: Georgia, serif;
  position: absolute;
 /* display: block; don't use this, it raised the quote too high from the bottom - defeated line-height? */
  float:right;
  font-size:6em;
  line-height: 1;
  right:0;
  bottom:-0.5em;
  content: "\201D";
}
blockquote footer {
  padding: 0 2em 0 0;
  text-align:right;
}
blockquote cite:before {
  content: "\2013";
}

blockquote > p{
  font-family: Montserrat;
}

.shalom-bayis-pic{
  width:100%;
  padding: 10px 0px;
}

h2{
  font-style: italic;
  font-weight: bold;
  font-family: Montserrat;
}

iframe{
  margin-top: 20px;
}