@import url("https://fonts.googleapis.com/css2?family=Courgette&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Play&display=swap"); body { background-color: #414142; padding: 0; margin: 0; } h1, h2 { font-family: "Courgette", cursive; color: #efefef; } a { text-decoration: none; } h1 { font-size: 60px; text-align: center; margin: 10px 0; } h2 { font-size: 40px; } img { max-width: 100%; } a.btn { display: block; width: -webkit-fit-content; width: fit-content; width: -moz-fit-content; color: #efefef; padding: 10px 20px; border: 2px solid #efefef; font-size: 18px; } a.btn--blue { color: #00E8C2; border-color: #00E8C2; } p { margin: 5px 0; } input::-webkit-input-placeholder { font-family: "Play", sans-serif; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; color: #efefef; } input::-moz-placeholder { font-family: "Play", sans-serif; transition-duration: 0.3s; color: #efefef; } input:-ms-input-placeholder { font-family: "Play", sans-serif; transition-duration: 0.3s; color: #efefef; } input::-ms-input-placeholder { font-family: "Play", sans-serif; transition-duration: 0.3s; color: #efefef; } a, p, span, input, input::placeholder { font-family: "Play", sans-serif; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; color: #efefef; } a:hover { color: #00E8C2 !important; } .container { padding-top: 100px; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } @media (min-width: 768px) { .container { width: 750px; } } @media (min-width: 992px) { .container { width: 970px; } } @media (min-width: 1200px) { .container { width: 1170px; } } section { padding-bottom: 50px; } .map { width: 75%; display: block; margin: auto; } nav { background-color: #303030; padding: 5px 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; position: fixed; top: 0; z-index: 9990; left: 0; width: -webkit-fill-available; } nav .logo { margin: 0; cursor: pointer; font-size: 50px; font-family: "Courgette", cursive; color: #efefef; margin-right: 30px; } nav .left { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } nav .left .submenu { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } nav .left .submenu a { font-size: 20px; color: #efefef; padding: 0 20px; } nav .right { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: right; -ms-flex-pack: right; justify-content: right; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } nav .right img { width: 50px; cursor: pointer; border: 2px solid #efefef; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } nav .right img:hover { border-color: #00E8C2; } nav .right .search { color: #efefef; font-size: 50px; margin-right: 20px; cursor: pointer; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } nav .right .search:hover { color: #00E8C2; } .flex-card { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: space-evenly; -ms-flex-pack: space-evenly; justify-content: space-evenly; -ms-flex-wrap: wrap; flex-wrap: wrap; } .flex-card .card { -webkit-box-flex: 0; -ms-flex: 0 1 33%; flex: 0 1 33%; margin-bottom: 70px; } .flex-card .card .inner { margin: 0 30px; background: #333333; } .flex-card .card .inner:hover img { cursor: pointer; -webkit-filter: grayscale(70%); filter: grayscale(70%); -webkit-transform: scale(1.2) !important; transform: scale(1.2) !important; } .flex-card .card .img-container { width: 100%; overflow: hidden; } .flex-card .card .img-container img { -webkit-transition: all ease-in-out 0.3s; transition: all ease-in-out 0.3s; width: 100%; } .flex-card .card .content { padding: 20px; } .flex-card .card .content .date { color: #00E8C2; font-style: italic; font-size: 15px; } .flex-card .card .content .titre { font-size: 20px; } .flex-card .card .content a { margin: auto; margin-top: 30px; } #quicksearch { position: fixed; display: none; padding: 30px; padding-top: 100px; height: 100vh; z-index: 9999; width: -webkit-fill-available; background: rgba(0, 0, 0, 0.9); top: 0; left: 0; } #quicksearch:target { display: block !important; } #quicksearch .close { position: absolute; right: 20px; top: 20px; -webkit-transition: all ease-in-out 0.3s; transition: all ease-in-out 0.3s; } #quicksearch .close i { font-size: 70px; color: #efefef; } #quicksearch .close:hover { -webkit-transform: rotateZ(90deg); transform: rotateZ(90deg); } #quicksearch .search-bar { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-top: 30px; } #quicksearch .search-bar input { width: 80%; background: transparent; color: #efefef; font-size: 30px; border: none; border-bottom: 3px solid #efefef; padding: 15px; } #quicksearch .search-bar input::-webkit-input-placeholder { color: #d3d2d2; font-size: 30px; } #quicksearch .search-bar input::-moz-placeholder { color: #d3d2d2; font-size: 30px; } #quicksearch .search-bar input:-ms-input-placeholder { color: #d3d2d2; font-size: 30px; } #quicksearch .search-bar input::-ms-input-placeholder { color: #d3d2d2; font-size: 30px; } #quicksearch .search-bar input::placeholder { color: #d3d2d2; font-size: 30px; } #quicksearch .search-bar i { font-size: 50px; color: #efefef; cursor: pointer; } #quicksearch .fast-search { margin-top: 50px; } #quicksearch .fast-search h2 { text-align: center; font-size: 35px; } #quicksearch .fast-search .flex-search { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: space-evenly; -ms-flex-pack: space-evenly; justify-content: space-evenly; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #quicksearch .fast-search .flex-search .search-col { -webkit-box-flex: 0; -ms-flex: 0 1 30%; flex: 0 1 30%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } #quicksearch .fast-search .flex-search .search-col:first-child, #quicksearch .fast-search .flex-search .search-col:nth-child(2) { border-right: 2px solid #00E8C2; } #quicksearch .fast-search .flex-search .search-col .titre { text-align: center; font-size: 28px; color: #00E8C2; margin: 15px 0; } #quicksearch .fast-search .flex-search .search-col .search-card { display: -webkit-box; display: -ms-flexbox; display: flex; width: 85%; margin: auto; margin-top: 20px; background: #464646; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #quicksearch .fast-search .flex-search .search-col .search-card img { width: 50px; } #quicksearch .fast-search .flex-search .search-col .search-card .name { font-size: 20px; margin-left: 15px; } .personnal-info { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: left; -ms-flex-pack: left; justify-content: left; margin-top: 50px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .personnal-info img { width: 250px; border: 2px solid #efefef; } .personnal-info .infos { margin-left: 60px; } .personnal-info .infos p:first-child { font-size: 30px; } .biographie { margin-top: 50px; } .timeline-container { background: #303030; padding: 15px 50px; margin-top: 50px; padding-right: 0; } .timeline-container .point-content .titre { font-size: 20px; } .timeline-container .point-content .date { color: #00E8C2; font-style: italic; font-size: 15px; } .timeline-container .point-content .desc { margin-top: 20px; } .timeline-container .timeline { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; overflow: auto; position: relative; padding: 20px 0; } .timeline-container .timeline::-webkit-scrollbar { width: 0; height: 0; } .timeline-container .timeline .stroke { position: absolute; top: 50%; left: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 280%; height: 3px; z-index: 10; background: #efefef; } .timeline-container .timeline .point { -webkit-box-flex: 1; -ms-flex: 1 0 20%; flex: 1 0 20%; z-index: 15; position: relative; } .timeline-container .timeline .point span { top: -15px; left: 35%; -webkit-transform: translateX(-50%); transform: translateX(-50%); position: absolute; } .timeline-container .timeline .point a { display: block; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; padding: 5px 10px; background: #efefef; border-radius: 50%; } .timeline-container .timeline .point a:hover, .timeline-container .timeline .point a.active { color: #00E8C2 !important; background: #00E8C2; } .regilog-title { margin: 50px 0; } .regilog-form { background: #303030; padding: 50px; border-radius: 10px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: auto; width: 50%; width: -moz-fit-content; } .regilog-form .flexgroup { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 100%; } .regilog-form .flexgroup input:first-child { margin-right: 20px; } .regilog-form .flexgroup input:last-child { margin-left: 20px; } .regilog-form input { background: transparent; color: #efefef; font-size: 20px; border: none; width: 100%; border-bottom: 2px solid white; margin-bottom: 30px; } .regilog-form input::-webkit-input-placeholder { color: #d3d2d2; } .regilog-form input::-moz-placeholder { color: #d3d2d2; } .regilog-form input:-ms-input-placeholder { color: #d3d2d2; } .regilog-form input::-ms-input-placeholder { color: #d3d2d2; } .regilog-form input::placeholder { color: #d3d2d2; } .regilog-form input[type=submit] { width: -webkit-fit-content; width: fit-content; width: -moz-fit-content; padding: 10px 20px; display: block; margin: auto; color: #00E8C2; border: 2px solid #00E8C2; font-size: 25px; } /*# sourceMappingURL=style.css.map */