h1.team-h1 {
position: relative; text-align: center; text-shadow: 2px 2px black; background-color:#ff805b; color: white; padding: 10px; width: 100%;
}
.cf:before, .cf:after {
content: " "; /* 1 */ display: table; /* 2 */
}
.cf:after {
clear: both;
}
/**
* For IE 6/7 only * Include this rule to trigger hasLayout and contain floats. */
.cf {
*zoom: 1;
}
.padding-team {
padding: 5%;
}
.team-container {
max-width: 1200px; margin: 30px auto 30px auto; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; *, *:before, *:after { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; }
}
.team-container-top {
margin-top: 100px;
}
.team-container-bottom {
margin-bottom: 60px;
}
.team-member {
padding: 10px 20px 10px 20px; width: 16%; text-align: center; float: left;
}
.team-member:last-child {
margin-right: 0;
}
.team-member span, .team-member h3 {
font-family: sans-serif; letter-spacing: -1px;
}
.team-member h3 {
color: SlateGray ; margin: 5px 0px 0px 0px;
}
.email {
color: #ff805b;
}
.team-member span {
display: block; padding: 5px 0px 0px 0px;
}
.team-photo {
border-radius: 50%; text-align: center; margin: auto; max-width: 100%; height: auto; transition: 0.1s transform ease-in-out;
}
.team-photo:hover {
transform: scale(0.9); cursor: pointer;
}
@media (max-width:1300px){
.team-container { max-width: 850px; }
}
@media (max-width:1000px){
.team-container { max-width: 700px; }
}
/* code for phone layout */ @media (max-width:760px){
.team-member { padding: 0; float: none; display: block; margin: 20px auto; width: 100%; text-align: center; } .team-container { margin: 50px 10px 10px 10px; }
}