/* CSS Document */

/*-----------------------------------------------------------------------------------
/////////////////////////////////////////////////////////////////////////////////////
	Typography
/////////////////////////////////////////////////////////////////////////////////////
-----------------------------------------------------------------------------------*/

::selection {
  background: #F5D7DE;
  color: #F05A5A;
}


ol {
  /*list-style:none;
  counter-reset:madacounter;*/
  padding-left:0;
  margin-left:1rem;
  line-height: 1.5;
}

ul {
  padding-left:0;
  margin-left:0;
  line-height: 1.5;
}

ol > li {
  /*counter-increment:madacounter;*/
  position:relative;
  margin-bottom:1.5rem;
  padding-left:1.5rem;
}

.maincol ul {
  margin-left:1rem!important;
}

.maincol ul > li {
  /*counter-increment:madacounter;*/
  position:relative;
  margin-bottom:1.5rem;
  padding-left:1.5rem;
}

ol li ol li {
  list-style:lower-alpha;
  margin-left:2rem;
}

ol li ol li ul li {
  list-style:disc;
  padding-inline-start:0px;
  margin-bottom:1.5rem;
  padding-left:1.5rem;
}

ol li::before {
  /*content:counter(madacounter);*/
  padding-left:0;
  margin-left: 2rem;
  margin-right: 2rem;
  /*color: #F05A5A;*/
  font-weight:bold;
}

.maincol > ul li::before {
  /*content:counter(madacounter);*/
  padding-left:0;
  margin-left: 2rem;
  margin-right: 2rem;
  /*color: #F05A5A;*/
  font-weight:bold;
}

.card {
  background:white;
  /*border-color: #BEC2C9;*/
  border-color: rgba(0, 0, 0, .05);
  border-style: solid;
  border-width: 1px;
  padding:2rem;
  border-radius:0.5rem;
}

.backgroundcolor-mada {
  background: #F7F7FF;
}

.bg-white-95 {
  background-color:hsla(0,0%,100%,.95);
}

/*No longer used; was used in V1 of the site
.backgroundtexture {
  background: url("../images/bknd_denim3@2x.png");
  background-size: 211px 176px;
}
*/

h2 {
  font-weight:700;
}

/*CSS FOR ANY BREAKPOINTS ABOVE 30EM - i.e. NOT PHONES*/
@media screen and (min-width: 30em) {
  .background_cans-ns {
    width: 100%;
    /*min-height: 612px;*/
    background: white;
    background-image: url("../images/MADA-cans-background.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center bottom;
  }
}

/*CSS FOR ANY BREAKPOINTS SMALLER THAN 30EM - i.e. PHONES*/
@media screen and (max-width: 30em) {
  .bg-white-95-s {
    background-color:hsla(0,0%,100%,.95);
  }

  .mt55-s {
    margin-top:10rem;
  }

  .menuelement {
    margin-top:9rem;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }

  .menuelement-small {
    margin-top:2rem;
  }

  .flex-wrap-s {
    -ms-flex-wrap:wrap;flex-wrap:wrap;
  }
}



/*CSS FOR ANY BREAKPOINTS BETWEWEN 30EM-60EM - i.e. MEDIUM*/
@media screen and (min-width: 30em) and (max-width: 60em) {

}

/*CSS FOR ANY BREAKPOINTS ABOVE 60EM - i.e. DESKTOP*/
@media screen and (min-width: 60em) {

}

.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  /*Surprised this isn't supported in tachyons. Have to add this class manually*/
}

.top20 {
  top:20%;
}

.simplelist {
  padding-inline-start:0px;
}

.leftnav {
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  background-color:transparent;
  list-style-type:none;
}

.leftnav li {
  margin-bottom:1rem;
}

.active {
  color: #F05A5A !important;
  /*font-weight:bold;*/
  font-weight:600;
}

.grad2-ns {
  background: white;
  background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 92%,rgba(0,0,0,0.05) 100%); /* Chrome10-25,Safari5.1-6 */
  background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 92%, rgba(0,0,0,0.05) 100%); /* FF3.6-15 */
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 92%,rgba(0,0,0,0.05) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.backgroundcolor-madaheader {
  background: #F3F3FB;
}

.backgroundcolor-madalight {
  background: #FAFAFF;
}

.backgroundcolor-madared {
  background: #F05A5A;
}

.backgroundcolor-lrcorange {
  background: #faaf40; /*Living Room Conversations brand color orange*/
}

.backgroundcolor-lrcorangelight {
  background: #FEEFD9; /*Equivalent to 20% opacity of LRC orange*/
}

.backgroundcolor-madagreen {
  background: #37C457;
}

.backgroundcolor-lightgray {
  background: #F3F3FA;
}

.backgroundcolor-white {
  background: white;
}

.backgroundcolor-lightblue {
  background: #EDF2FA;
}

.floatbottom {
  clear:both;
}

.textblue {
  color: #0080F9;
}

.textorange {
  color: #faaf40; /*Living Room Conversations brand color orange*/
}

.background-fbblue {
  background: #0080F9;
}

.background-fblightblue {
  background: #E7F3FF;
}

.background-lightred {
  background: #F5D7DE;
}

.textwhite {
  color: #FFF;
}

.textred {
  color: #F05A5A;
}

.textyellow {
  color: #F2D492;
}

.textgreen {
  color: #37C457;
}

.textbody {
  color: #1D2129; /*Dark text*/
}

.textmeta {
  color: #BEC2C9; /*UI Light 20*/
}

.textui30 {
  color: #90949C; /*UI Light 30*/
}

.textfb {
  color: #4267B2;
}

.h1override {
  font-size:3em;
}

.wrapper {
    width: 95%;
    max-width: 940px;
    margin: 0 auto;
    text-align: left;
}

.wrapper_large {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  text-align: left;
}

.wrapper_large_right {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  text-align: right;
}

.z100 {
  z-index:100;
}

#menu {
  transition: .2s;
}

#menu li {

}

.left-100 {
  left: 100%;
}

.left-50 {
  left: 50%;
}

.left-25 {
  left: 25%;
}

.left-0 {
  left: 0%;
}

.divider {
  color: #DDDFE2; /*desktop divider*/
}

.b--divider {
  border-color: #DDDFE2;
}

.b--medgray {
  border-color: #DEDEE8;
}

.background-medgray {
  background-color: #DEDEE8;
}

.serif {
  font-family: 'Merriweather', serif;
}

.sans-serif {
  font-family: 'Work Sans', sans-serif;
}

.pa4-5 {
  padding: 3rem;
}

.ph8-ns {
  padding-left:24rem;
  padding-right:24rem;
}

.b--madayellow {
  border-color: #F2D492;
}

.b--fbblue {
  border-color: #4267B2;
}

.b--madared {
  border-color: #F05A5A;
}

.b--madagreen {
  border-color: #37C457;
}

.bl-w2 {
  border-left-width:2px;
}

.buttonshadow {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.12);
}

.headershadow {
  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.12);
  padding-top:2rem;
  padding-bottom:2rem;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.headerlogo {
  width:7rem;
  height:7rem;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.headerlogo_shrink {
  width:2rem;
  height:2rem;
}

.headershadow_shrink {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.12);
  padding-top:0.5rem;
  padding-bottom:0.5rem;
}

.yellowshadow {
  box-shadow: 0 2px 12px 0 rgba(242, 212, 146, 100)
}

.mediahero {
  background: linear-gradient(rgba(240, 90, 90, .50),rgba(240, 90, 90, .50)), /*MADA RED, 50% OPACITY*/
    url('../images/photo_dinner03.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment:fixed;

}

.lineseparator {
  background: #F05A5A;
  height: 2px;
  width: 80px;

}

.h-90{
  height:90%;
}

.h6{
  height:18rem;
}

.h15p {
  height:15%;
}

.helper {
    /*display: inline-block;
    height: 100%;
    vertical-align: middle;*/
    height:18rem; /*I can't seem to figure out this style; sometimes it works, sometimes it appears broken. No rhyme or reason. Commented out the previous style for it above, but should debug later.*/
}

.newshadow:hover {
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.05);
}

.city {
  cursor: pointer;
  z-index: 100;
  pointer-events: auto;
}

.city img {
  cursor:pointer;
}

.showstuff {
  overflow: visible!important;
}

.blob {
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
	  transform: scale(1);
	  animation: pulse 4s infinite;
}

@keyframes pulse {
	0% {
		transform: scale(0.99);
		box-shadow: 0 0 0 0 rgba(240, 90, 90, 0.7);
	}

	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px rgba(240, 90, 90, 0);
	}

	100% {
		transform: scale(0.99);
		box-shadow: 0 0 0 0 rgba(240, 90, 90, 0);
	}
}

/*Experimenting with the Online Events menu text to flash*/
.textpulse {
	  animation: flash 2s infinite;
}

@keyframes flash {
	0%, 100% {
		color: #90949C;
    /*text-shadow: 0 0 0 0 rgba(240, 90, 90, 0.7);*/
	}

	50% {
		color: #F05A5A;
    /*text-shadow: 1px 1px 4px rgba(240, 90, 90, 0.7);*/
	}
}
/*
.yshade{opacity:1}

.backgroundcolor-madalight,.backgroundcolor-madalight:focus,.backgroundcolor-madalight:hover {
  -webkit-transition: background-color:#EDF2FA .15s ease-in;
  transition: background-color:#EDF2FA .15s ease-in;
}

.backgroundcolor-madalight: focus,.backgroundcolor-madalight:hover {
  opacity: .5;
}

.backgroundcolor-madalight:active {
  opacity: .8;-webkit-transition:opacity .15s ease-out;
  transition: opacity .15s ease-out;
}

*/
a .backgroundcolor-madalight:hover {
  background-color: #F3F8FF;
}


.mb-1{margin:-.25rem}

/*Tried to use this instead of .grow in Tachyons, but ended up just changing its scale to 1.01 instead of 1.05.*/
.raise:hover {
  -webkit-transform: translateY(-2px);
  -moz-transform: translateY(-2px);
  -ms-transform: translateY(-2px);
  -o-transform: translateY(-2px);
  transform: translateY(-2px);
  transition-duration: 200ms;
  transition-property: all;
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.05);
  transition-timing-function: ease-in-out;
  background-color: #F3F8FF;
}

.borderlight {
  border-style: solid;
  border-width: 1px;
  border-color: rgba(0, 0, 0, .05);
  box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}