/* ------------ GROUPS PAGE ONLY  --------- */

.groups h1 { margin-bottom: 20px; }



.groups-menu .group-outer           { float:none; width: 100%; }
.groups-menu h3                     { text-align:center; font-weight:bold; margin: 20px 0 10px 0px; font-size: 18px; text-transform:uppercase;}

.group-details                  { border: 1px #cacaca solid; padding: 8px; }
.group-details p.title                  { display:block; background-color:#f25953; color:white; font-weight:900; padding: 12px; font-size: 24px; text-align:center; margin: 0px; }
.group-details p.dates                  { display:block; background-color:#e5e5e5; color:black; font-weight:normal; padding: 12px; font-size: 18px; text-align:center; margin: 0px; }
.group-details p.hosted { border-bottom: 1px #cacaca dotted; padding: 10px; font-size: 15px; text-align:center; font-style:italic; }

.group-details .group-content                  { padding: 0 30px;  }
.group-details .group-content img                  { float:right; max-width: 250px; margin: 20px;  }
.group-details .group-content .price                  { float:right; padding: 20px; font-size: 16px; text-align:center; background-color:#f25953; color:white;  }
.group-details .group-content .price span                 { display:block; font-size: 30px; font-weight:900; }
.group-details .group-content .go                  { font-size: 16px; }
.group-details .group-content .go a                  { background-color:#585858; padding: 8px 16px; color:white; display:inline-block; }
.group-details .group-content .go a:hover                  { background-color:#f25953; text-decoration:none;  }



/* ------------ GROUPS PAGE ONLY  --------- */



.group-outer                {  margin-bottom: 25px; width: 100%; padding: 7px; background:white; }
.group-outer a:hover                { text-decoration:none; }

.group-inner                { border: 1px #969696 solid; padding: 14px 20px 40px 20px; min-height: 175px; position: relative; overflow:hidden; }
.group-inner:hover      {  box-shadow: 0 0 7px rgba(0, 0, 0, 0.59); }
.group-img                  { position: absolute; width: 100px; height: 100px; line-height: 100px; overflow:hidden; text-align:center; background:black;}
.group-img img                  { }
.group                  {  padding: 0px 0px 0px 120px; width: 100%; }

.group p.title               { font-size: 20px; font-weight:bold; margin: 0 0 6px 0; line-height: 115%; }
.group p.dates               { font-size: 15px; font-weight:normal; margin: 0 0 3px 0;}
.group p.hosted               { font-size: 13px; font-weight:normal; font-style:italic; margin: 0 0 3px 0;}

.group-inner .more { bottom: -40px; right: -40px; position: absolute; background:#f25953; width: 40px; height: 40px; line-height: 40px; font-size: 30px; padding-left: 4px; color:white; text-align:center; }
.group-inner:hover .more { bottom: 0; right: 0; }
.group-inner:hover .more:hover { background:#d9dde6; color:#2d2d2d }


































@media only screen and (max-width: 1000px) 

{

.group-outer                { width: 50%;  }

}


@media only screen and (max-width: 850px) 

{
.group-outer                { width: 100%;  }


}




@media only screen and (max-width: 650px) 

{



.group-details .group-content                  { padding: 0px;  }





}





@media only screen and (max-width: 500px) 

{



}










@media only screen and (max-width: 400px) 

{

.group-img          { float:none; width: 100%; position: relative; height: auto; width: 100%; margin-bottom: 10px; }



.group              { float:none; width: 100%; padding: 0 16px;}


}