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

.groups         { padding: 20px; }
.groups h1      { text-align:center; text-transform:uppercase; margin-bottom: 0; }

.groups h3 { text-align:center; font-weight: 300; text-transform:uppercase; margin: 0 0 30px 0; }



.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;}


.groups-menu .mm-group { border-top: 1px #cacaca solid; padding: 10px 18px; }

.groups-menu .mm-group p.title               { font-size: 18px; line-height: 115%; color:#0f75bc; font-weight:bold; margin: 0 0;}
.groups-menu .mm-group p.dates               { font-size: 14px; text-transform:uppercase; font-weight:normal; color:#373737; margin: 3px 0 0 0;}
.groups-menu .mm-group p.hosted               { font-size: 12px; font-weight:normal; font-style:italic; color:#373737;  margin: 0 0 4px 0;}

.groups-menu .mm-group p.more  { font-size: 11px; text-align:right;  }
.groups-menu .mm-group p.more a          { background-color:#223b73; padding: 4px 8px; color:white; }
.groups-menu .mm-group p.more a:hover         { background-color:#0f75bc; padding: 4px 8px; text-decoration:none; }

.groups-menu p.view-all { text-align:center; font-size: 16px; }
.groups-menu p.view-all a { display:inline-block; background:#0f75bc; color:white; padding: 10px 35px; }
.groups-menu p.view-all a:hover { text-decoration: none; background:#223b73; }











.group-details                  { border: 1px #cacaca solid; padding: 8px; }
.group-details p.title                  { display:block; background-color:#0f75bc; 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:#0f75bc; 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:#0f75bc; text-decoration:none;  }



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



.group-outer                { margin-bottom: 35px; }
.group-outer:hover      {  box-shadow: 0 0 7px rgba(0, 0, 0, 0.59); }
.group-outer a:hover                { text-decoration:none; }






.group-img                  { background-repeat: no-repeat; background-position: center center; background-size:cover; }



.group-img img                  { width: 100%; }
.group                  { padding: 20px; }

.group p { line-height: 115%; }


.group .title { font-weight: bold; color:#343b42; line-height: 120%; font-size: 21px; margin: 0 }
.group .dates { font-size: 14px; margin: 8px 0; color:black; }
.group .hosted { font-style:italic; font-size:13px; margin: 0 0 12px 0;  }

.group .more { font-size: 13px; }
.group .more span { background:#464f6b; color:white; font-weight:bold; display: inline-block; padding: 5px 10px;}
.group .more span:hover { background:#515151; }
































@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;}


}