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

.groups         { padding: 20px; }
.groups h1      { text-align:center; text-transform: uppercase; font-size: 22px; font-weight: 900; }

.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                  { line-height: 135%; display:block; background-color:#009ab2; 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                  { max-width: 250px; margin: 20px;  }
.group-details .group-content .price                  { float:right; padding: 20px; font-size: 16px; text-align:center; background-color:#009ab2; color:white; margin-bottom: 10px }
.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:#009ab2; text-decoration:none;  }


.groups p.view-all { margin: 30px 0 20px 0; text-align:center; font-size: 20px; }
.groups p.view-all a { text-decoration:none; color:white; background:#009ab2; padding: 10px 25px; display:inline-block; }
.groups p.view-all a:hover { background:#585858;}


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



.group-outer                { float:left; width: 33.33%; padding: 10px; }
.group-outer a:hover                { text-decoration:none; }

.group-inner                { border: 1px #969696 solid; min-height: 200px; position: relative; }
.group-inner:hover      {  box-shadow: 0 0 7px rgba(0, 0, 0, 0.59); }
.group-img                  { padding: 16px; text-align:center; }
.group-img img                  { width: 100%; }
.group                  { padding: 16px 24px; }

.group p.title               { font-size: 20px; font-weight:bold; color:#009ab2; font-family: Open Sans; margin: 0 0 3px 0;}
.group p.dates               { font-size: 16px; font-weight:normal; color:#373737; font-family: Open Sans; margin: 0 0 3px 0;}
.group p.hosted               { font-size: 14px; font-weight:normal; font-style:italic; color:#373737;  margin: 0 0 3px 0;}
.group p.more { font-size: 13px; margin: 12px 0 0 0; text-align:right;   }
.group p.more span { background:#009ab2; color:white; display:inline-block; padding: 3px 10px; }
.group p.more span:hover { background:#314651; }

































@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;  }
.group-details .group-content img                  { float:none; width: 100%; max-width: 100%; margin: 12px 0;  }





}





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

{



}










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

{

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


}