

/* ------------ GROUP DETAILS ONLY  --------- */



.groups h1 { margin-bottom: 20px; }




.group-details                  { border: 1px #cacaca solid; padding: 8px; }
.group-details p.title                  { display:block; background-color:#343b42; color:white; font-weight:900; padding: 12px; font-size: 24px; text-align:center; margin: 0px; }
.group-details p.dates                  { display:block; background-color:#78aedf; 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-content .group-image { background-size: cover; background-repeat:no-repeat; background-position: center center;  }
.group-content .group-image img { width: 100%;  }

.group-content .price                  { float:right; padding: 20px; font-size: 16px; text-align:center; background-color:#343b42; color:white;  }
.group-content .price span                 { display:block; font-size: 30px; font-weight:900; }
.group-content .go                  { font-size: 16px; }
.group-content .go a                  { background-color:#78aedf; padding: 8px 16px; color:white; display:inline-block; }
.group-content .go a:hover                  { background-color:#343b42; text-decoration:none;  }



.groups-menu h3                     { text-align:center; margin: 0px 0 10px 0px; font-size: 17px; font-weight: 300; text-transform:uppercase;}
.groups-menu a,
.groups-menu a:hover { text-decoration: none; }

.groups-menu .group-outer { padding: 0; }

.groups-menu .group-outer .group-img { background-size: cover; background-repeat:no-repeat; background-position: center center;  }
.groups-menu .group-outer .group-img img { width: 100%;  }

.groups-menu .group-outer .group { padding: 10px 0px; }
.groups-menu .group-outer .group .title { margin-bottom: 5px; font-size: 17px; color:#343b42; font-weight:bold; }
.groups-menu .group-outer .group .dates { margin-bottom: 5px; font-size: 14px; color:#343b42; }
.groups-menu .group-outer .hosted { margin-bottom: 11px; font-size: 11px; color:#343b42; font-style:italic; }

.groups-menu .group-outer .group .more  { font-size: 13px; }
.groups-menu .group-outer .group .more span { background:#343b42; color:white; font-weight:bold; display:inline-block; padding: 3px 14px; }
.groups-menu .group-outer .group .more span:hover { background:#78aedf; }



/* ------------ GROUPS INTRO PAGE --------- */






.home-groups a,
.home-groups a:hover { text-decoration: none; }


.home-groups .group-outer { border: 0; }



.home-groups .group-outer .group-img { background-size: cover; background-repeat:no-repeat; background-position: center center;  }
.home-groups .group-outer .group-img img { width: 100%;  }

.home-groups .group-outer .group { padding: 10px 20px; }
.home-groups .group-outer .group .title { margin-bottom: 5px; font-size: 21px; color:#343b42; font-weight:bold; }
.home-groups .group-outer .group .dates { margin-bottom: 5px; font-size: 18px; color:#343b42; }
.home-groups .group-outer .group .hosted { margin-bottom: 12px; font-size: 16px; color:#343b42; font-style:italic; }

.home-groups .group-outer .group .more  { font-size: 13px; }
.home-groups .group-outer .group .more span { background:#343b42; color:white; font-weight:bold; display:inline-block; padding: 3px 14px; }
.home-groups .group-outer .group .more span:hover { background:#78aedf; }
































@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;}


}