@charset "utf-8";
/* CSS Document */
@import url('https://fonts.font.im/css?family=Aldrich');

#team{margin: 0 auto; padding: 150px 0;}

#team .title{ position: relative; text-align: center; margin: 0 auto;}
#team .title>h3{ position: relative;z-index: 20; font-size: 4rem; padding:30px 0 20px 0; font-weight: bold; color: #333;}
#team .title>h3:after{position: absolute;z-index: 1; left: 50%; bottom: 0;width:50px;height: 4px; background: #c7000c; transform: translateX(-50%); content: '';}
#team .title>h4{position: absolute;z-index: 1; left: 50%; top: 0; width: 100%; font-size: 6rem; color: #f3f3f3; transform: translateX(-50%); text-transform: uppercase;}
#team .layout{margin: 0 auto; padding: 100px 0; }
#team .layout>.content{margin: 0 auto; padding: 80px 0;}
#team .layout>.content>.text{text-align: center; width: 70%;margin: 0 auto; font-size: 1.6rem; color: #333;line-height: 3rem;}
#team .layout>.content>.text>span{position: relative; padding: 20px;}
#team .layout>.photo {margin: 0 auto;}
#team .layout>.photo>ul{display: block;margin: 0 auto; column-count: 3; column-gap: 30px;}
#team .layout>.photo>ul>li { position: relative; display: block;  background: #000; overflow: hidden; border-radius: 16px; margin-bottom: 30px; transition: all .35s;}
#team .layout>.photo>ul>li img{width: 100%;height: auto; transition: all .6s;}
#team .layout>.photo>ul>li p{ position: absolute; left: 50%; top: 50%;  transform: translate(-50%,-70%); width: 100%; padding: 20px 0; text-align: center; display: block; font-size: 1.8rem; opacity: 0; color: #fff;transition: all .35s;}
#team .layout>.photo>ul>li:hover img{opacity: .5; transform: scale(1.06);}
#team .layout>.photo>ul>li:hover{ box-shadow: 4px 3px 20px rgba(0,0,0,.16);}
#team .layout>.photo>ul>li:hover p{  transform: translate(-50%,-50%);  opacity: 1;}

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

    #team .title>h3{ font-size: 3.2rem;}
    #team .title>h4{font-size: 4.5rem;}

    #team .layout>.content>.text{ width: 80%;font-size: 1.4rem; line-height: 2.4rem;}

}


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

    #team .title>h3{ font-size: 2.8rem;}
    #team .title>h4{font-size: 4rem;}

    #team .layout>.content{padding-bottom: 50px;}
    #team .layout>.content>.text{ width: 100%;}

    #team .layout>.photo>ul {column-count: 2; }
    #team .layout>.photo>ul>li { border-radius: 10px;}
    #team .layout>.photo>ul>li p{ font-size: 1.6rem;}




}

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

    #team .layout{ padding: 50px 0; }

    #team .layout>.photo>ul {column-count: 1; }
    #team .layout>.photo>ul>li p{ font-size: 1.4rem;}

}


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

    #team{ padding: 60px 0;}

    #team .title>h3{ font-size: 2.4rem; padding: 15px 0;}
    #team .title>h4{font-size: 2.4rem;}

    #team .layout>.content>.text{ font-size: 1.2rem; line-height: 2rem; color: #666;}



}