main.min.css

*{font-family:Open Sans,Arial,sans-serif;margin:0}.container{width:900px;margin:0 auto;position:relative;max-width:90%}.title{text-align:center}.header{height:60px}.header .container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.header .group-logo{width:60px;margin-right:20px}.main{text-align:center;min-height:100vh;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-top:-60px}.main h1.title{font-size:70px;margin-bottom:30px}.event-logo{max-width:70%;width:400px;margin-bottom:20px}.informations{background-color:#f7de58;padding:50px 0}.informations .title{font-size:35px;margin-bottom:30px;text-transform:uppercase}.informations p{line-height:2}.informations .button{border:2px solid;padding:10px;font-weight:900;color:#000;display:block;margin:0 auto;width:200px;text-align:center;text-decoration:none;text-transform:uppercase;margin-top:40px}.informations .button:after{content:'';display:inline-block;height:2px;width:10px;margin-left:3px;background-color:#000;-webkit-animation-name:cursor;animation-name:cursor;-webkit-animation-duration:.8s;animation-duration:.8s;-webkit-animation-delay:.8s;animation-delay:.8s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.informations .button:hover{background-color:#000;color:#f7de58}.informations .button:hover:after{background-color:#f7de58}.informations-list{list-style:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding-left:0}.informations-list li{cursor:pointer;text-align:center;width:120px;height:120px;font-weight:800;border:3px solid;border-radius:50%;position:relative;overflow:hidden;margin:0 20px}.informations-list li:after{content:'';width:100%;height:0;-webkit-transition:1s;transition:1s;position:absolute;bottom:0;left:0;background-image:url(bg-beer.jpg);background-size:100%;z-index:0;border-radius:50%;pointer-events:none}.informations-list li span{position:absolute;top:60%;left:50%;font-weight:300;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-transition:.3s;transition:.3s;font-size:0;z-index:1}.informations-list li svg{width:60px;display:block;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-transition:.3s;transition:.3s;z-index:1}.informations-list li:hover svg{width:30px;top:30%}.informations-list li:hover a span{font-size:18px;color:#000}.informations-list li:hover:after{height:100%}@media(max-width:720px){.main .container h1.title{margin-top:60px}.main .container h2.title{margin-bottom:40px}}@media(max-width:550px){.informations .title{margin-bottom:50px}.informations .informations-list{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;-ms-grid-row-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.informations .informations-list li{margin-bottom:30px;width:150px;height:150px}.informations-list li svg{width:30px;top:30%}.informations-list li a span{font-size:18px;color:#000}.informations-list li:after{height:100%;-webkit-animation-name:swing;animation-name:swing;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-delay:1s;animation-delay:1s;-webkit-animation-direction:alternate;animation-direction:alternate;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.informations .title{font-size:22px}}@-webkit-keyframes swing{0%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}100%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}}@keyframes swing{0%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}100%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}}