.groupHeader {padding-top:20%; position:relative; border-bottom: 5px solid #000; background-size:cover;}
.groupHeader .contained .col-xs-12 {position:relative;}
.groupHeader #groupLogo {position:absolute;}
.groupHeader h1 {font-size: 42px; padding: 14px 50px; background:#000; display:inline-block; font-family:Roboto; font-weight: 300; color:#fff; border-radius: 20px 20px 0 0; box-shadow:0 -10px 10px rgba(0,0,0,0.2); text-shadow:0 1px 1px rgba(0,0,0,0.3); margin-bottom: -1px;}
.groupIntro {background:#eee; padding: 40px 0; font-size: 18px; font-family:Roboto; border-bottom: 5px solid #ddd; box-shadow:inset 0 5px 5px rgba(0,0,0,0.1); color:#333;}
.groupButtons {background:#f5f5f5; padding: 40px 0;}
.groupButtons .buttonBox {background:#fff; padding: 20px 25px; border-radius: 10px; border:1px solid #ccc; box-shadow:5px 5px 10px rgba(0,0,0,0.1);}
.groupButtons .buttonBox i {font-size: 32px; color:#333; display:inline-block; width: 20%; }
.groupButtons .buttonBox a {color:#333; display:block;}
.groupButtons .buttonBox label {display:inline-block; font-size: 16px; font-family:Roboto; padding: 0px 5px; vertical-align:top; width: 74%; line-height: 1.2;}
.groupButtons .buttonBox:hover {background:#000;}
.groupButtons .buttonBox:hover a, .groupButtons .buttonBox:hover i {color:#fff;}

.groupMembers {background:#444; padding: 50px 0; }
.memberCard {margin-bottom: 20px; box-shadow:0 0 50px rgba(0,0,0,0.2);}
.memberCard h3 {padding: 10px; text-align:center; background:#000; font-size: 16px; color:#fff; font-weight: 300; font-family:Roboto; border-radius: 5px 5px 0 0; }
.memberCard h4 {padding: 6px; text-align:center; background:#ddd; font-size: 14px; color:#333; font-weight: 400; font-family:Roboto; border-top:1px solid #aaa; }
.memberCard img {display:block;}
.memberCard h5 {padding: 6px; text-align:center; background:#eee; font-size: 11px; color:#444; font-weight: 400; font-family:Roboto; border-top:1px solid #aaa; border-radius: 0 0 5px 5px; }

.groupSlots {padding:40px 0; background:#f5f5f5;}
.groupSlots h2 {font-size: 28px; font-family:roboto; padding: 0px 0 40px 0; color:#444;}

.catSlot h3 {color:#fff;  font-size: 24px; text-align:center; border-radius: 6px 6px 0 0; padding: 15px 0; font-family:roboto; font-weight: 300;}
.catSlot p {background:#000; text-align:Center;color:#fff; font-size: 11px; font-family:roboto; padding: 5px; border-radius:0 0 6px 6px;}

.groupSearch {border-top:1px solid #ddd; padding: 30px 0; text-align:center;}
.groupSearch h3 {font-family:Roboto; font-size: 24px; color:#444; padding: 0 0 20px 0;}
.groupSearch label {font-family:Roboto;  font-size: 14px; color:#555; display:inline-block; padding: 4px;} 
.groupSearch input[type="text"] {-webkit-appearance:none; height: 40px; border:1px solid #aaa; border-radius: 6px; font-size: 18px; padding:0 20px;}
.groupSearch input[type="text"]:focus {border-color:#09f;}
.groupSearch select {-webkit-appearance:none; outline:none; color:#444; height: 40px; border:1px solid #aaa; border-radius: 6px; font-size: 18px; padding:0 20px;}
.groupSearch select:focus {border:1px solid #09f;}
.groupSearch input[type="button"] {-webkit-appearance:none; background:#222; color:#fff; height: 40px; border:1px solid #aaa; border-radius: 6px; font-size: 18px; padding:0 20px;}
.groupSearch input[type="button"]:hover {background:#555;}

.groupJoin {background:#ddd; padding: 40px 0; color:#333; font-family:Roboto; text-align:center;}
.groupJoin h3 {text-align:center; font-size: 24px; padding: 0 0 20px 0;}
.groupJoin p {line-height:1.4;text-align:center; font-size: 17px; font-weight: 300; padding: 0 0 20px 0;}
.groupJoin textarea {width:100%; height: 80px; -webkit-appearance:none; border:1px solid #aaa; font-family:Roboto; padding: 20px; border-radius: 6px; font-size: 16px;}
.groupJoin input[type="button"] {margin-top: 10px;-webkit-appearance:none; background:#222; color:#fff; height: 40px; border:1px solid #aaa; border-radius: 6px; font-size: 18px; padding:0 20px;}
.groupJoin input[type="button"]:hover {background:#555;}

.groupQR {background:#fff; padding: 40px 0; color:#333; font-family:Roboto; text-align:center;}
.groupQR h3 {text-align:center; font-size: 24px; padding: 0 0 20px 0;  font-family:Roboto; }

#groupLogo {position:absolute; width:170px; height: 170px; background-size:90%; background-position:50%;; border-radius: 6px; background-color:#fff;  border:6px solid #000; background-repeat:no-repeat; bottom: -20px; padding: 10px; right: 0; box-shadow:5px 5px 10px rgba(0,0,0,0.3);}



@media(max-width: 480px){

.groupHeader h1 {font-size: 23px; padding: 5px 10px; border-radius: 4px; max-width: 75%;}
#groupLogo {width: 80px; height: 80px; border-width:2px; right: 10px;}

.groupButtons .buttonBox {padding: 10px 15px; border-radius: 6px;}
.groupButtons .buttonBox i {font-size: 24px; width: 20%; }
.groupButtons .buttonBox label {font-size: 13px;}
.groupSearch { padding: 20px 0;}
.groupSearch h3 {font-family:Roboto; font-size: 24px; color:#444; padding: 0 0 20px 0;}
.groupSearch label { font-size: 12px; width: 25%; }
.groupSearch input[type="text"] {margin-bottom: 10px; font-size: 12px; width:70%;}
.groupSearch input[type="text"]:focus {border-color:#09f;}
.groupSearch select {margin-bottom: 10px; font-size: 12px; width:70%;}


}